region-select
引入
yarn add region-select
npm i region-select
依赖项:
element-ui
使用
请参考极简demo:
cd node_modules/region-select/demo
地区级联选择组件,根据所选最后一级id数据级联选中
<RegionSelect
v-model="areaTree" 绑定值,绑定选中项的id
:options="list" 数据源
:size='size' 尺寸 默认medium (非必输)
:disabled='false' 是否禁用 默认false (非必输)
:placeholder='xxx' 占位文本 默认“所属地区” (非必输)
:props='props' 对象属性绑定 默认如props对象 (非必输)
:level='1' 地区树显示层级 (非必输)
:flatten="true" 扁平化数据源,并增加“全选”父类 可用于多选需要全选的情况
:clearable='false' 是否可清空
filter='0001' 地区过滤,筛选出此地区及其子类的地区树
@change='fun' change事件,当选中节点变化时触发
/>
props 默认对象
props = {
label: "name", // 映射 label
value: "cityCode", // 映射 value
children: "child", // 映射 children
checkStrictly: false, // 任意层级可选,默认false 可通过 props.checkStrictly = true 来设置父子节点取消选中关联,从而达到选择任意一级选项的目的。
multiple: false // 是否多选,默认false 多选情况下,返回数据为字符数组
}
数据源格式 提供两种格式
1.
list = [
{
name: "呼和浩特市",
cityCode: '001',
child: [
{
name: "市辖区",
cityCode: '0011'
},
{
name: "东河区",
cityCode: '0012'
},
{
name: "昆都仑区",
cityCode: '0013'
},
]
}
]
2.
list = [
{
data: {
name: "呼和浩特市",
code: '001',
},
child: [
{
data: {
name: "市辖区",
code: '0011'
}
},
{
data: {
name: "东河区",
code: '0012'
}
},
{
data: {
name: "昆都仑区",
code: '0013'
}
},
]
},
]