region-select

region-select

引入

yarn add region-select
npm i region-select

依赖项：
element-ui

使用

请参考极简demo：
cd node_modules/region-select/demo

地区级联选择组件，根据所选最后一级id数据级联选中

<RegionSelect 
    v-model="areaCode"          选中地区 code
    :label.sync='areaLabel'     选中地区 label
    :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'
                }
            },
        ]
    },
]