region-select
引入
yarn add region-select
npm i region-select
依赖项:
element-ui
使用
请参考极简demo:
cd node_modules/region-select/demo
地区级联选择组件,根据所选最后一级id数据级联选中
<RegionSelect
v-model="area_id" 绑定值,绑定选中项的id
:options="area_list" 数据源
:size='size' 尺寸 默认medium (非必输)
:disabled='false' 是否禁用 默认false (非必输)
:placeholder='xxx' 占位文本 默认“所属地区” (非必输)
:props='props' 对象属性绑定 默认如props对象 (非必输)
:level='1' 显示层级 1 (非必输)
@change='fun' change事件,当选中节点变化时触发
/>
props 默认对象
props = {
label: "name", // 指定每个选项显示,为某个属性
value: "cityCode", // 指定每个选项值,为某个属性
children: "child", // 指定每个子选项,为某个属性
checkStrictly: false, // 任意层级可选,默认false
multiple: false // 是否多选,默认false 多选情况下,v-model为字符数组
}
数据源格式
area_list = [
{
name: "呼和浩特市",
cityCode: '001',
child: [
{
name: "市辖区",
cityCode: '0011'
},
{
name: "东河区",
cityCode: '0012'
},
{
name: "昆都仑区",
cityCode: '0013'
},
]
}
]