ws-china-area-data
文盛通用省市区级联组件
说明:此组件为elementui下cascade扩展,因此需要安装elementui库;
地址:https://www.npmjs.com/package/ws-china-area-data;
安装
npm i -S ws-china-area-data
或者
cnpm i -S ws-china-area-data
例子
<template>
<chinaAreaData
v-model="codes"
:chinaAreaDataNames.sync="chinaAreaDataNames"
:chinaAreaDataCodes.sync="chinaAreaDataCodes"
:allOption="['全国','全部省','全部市']"
:CodeToText.sync="wsCodeToText"
:defaultPlaceCodes=” defaultPlaceCodes”
common-service-url="公司公用数据源(js地址)"
/>
</template>
<script>
import chinaAreaData from 'ws-china-area-data/components/chinaAreaData'
export default {
name: 'search',
components: {
chinaAreaData
},
data () {
return {
codes:[],
chinaAreaDataNames:[],
chinaAreaDataCodes: [],
wsCodeToText:{},
defaultPlaceCodes:[]
}
}
}
</script>
Attributes
参数 |
说明 |
类型 |
默认值 |
chinaAreaDataCodes/sync(v-model) |
选中的绑定值(编码),可以通过v-model快捷绑定。 |
string[] |
- |
chinaAreaDataNames/sync |
选中的绑定值(名称)。 |
string[] |
- |
CodeToText/sync |
编码转文字 |
Object |
- |
Options
参数 |
说明 |
类型 |
默认值 |
allOption |
全部选项的文字设置,不需要放空字符串即可,文字可修改 |
string[] |
['全部','全部','全部'] |
commonServiceUrl |
公共js文件地址(必传),注意需要和提供方确认最新地址 |
url |
- |
checkStrictly |
设置父子节点取消选中关联 |
boolean |
false |
clearable |
是否支持清空选项 |
boolean |
false |
collapse-tags |
多选模式下是否折叠Tag |
boolean |
false |
defaultPlaceCodes |
预设地址编码,使用v-model方式可以不用此选项,此属性兼容老版组件 |
string[] |
- |
disabled |
选项是否禁用 |
boolean |
false |
level |
控件需要级别:1.省级、2.省市二级联动、3.省市区三级联动 |
number |
3 |
locateCurrentCity |
是否定位当前城市 |
boolean |
false(当defaultPlacesCode有值是该项失效) |
myPlaceholder |
输入框占位文本 |
string |
请选择 |
multiple |
选项是否多选 |
boolean |
false |
staticData |
传入自定义数据,数据结构例子[{label:'',value:'',children:[]}],注意字段名名要一致 |
- |
[] |
size |
尺寸(同elementui) |
string |
- |
showAllLevels |
输入框中是否显示选中值的完整路径 |
boolean |
true |
update |
公共js文件的缓存周期(目前每月一更),一般不用设置。 |
string |
monthly |
whistList |
省级选择地区白名单,如果不为空数组,即只能选择白名单内的省份 |
string[] |
[] |
width |
组件宽度(单位px) |
number |
200 |
Events
参数 |
说明 |
回调参数 |
change |
当选中节点变化时触发 |
选中节点的值 |
remove-tag |
在多选模式下,移除Tag时触发 |
选中节点的值 |
Methods