region-select

region-select

引入

yarn add region-select
npm i region-select

依赖项：
element-ui

版本迭代

RegionSelect 0.3.0 版本
取消外部数据源，由于组件维护全国地区树JSON (如有个性化数据源，可通过data重置数据源)
如需部分地区地区树，可用filter筛选

RegionSelect 0.3.8 版本
实现属性穿透
现 RegionSelect 支持 Element Cascader (级联选择组件) 所有原生属性、方法

引入

yarn add region-select
npm i region-select

简介

region-select 是基于 Element Cascader 开发的全国地区级联选择组件，组件内置全国通用地区数据，支持指定地区、层级过滤（如只需要贵州省所属州市选择）。

使用

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

<RegionSelect 
    v-model="areaCode"          选中地区 code
/>

全局配置

如需在项目中对组件进行一些公共配置，可在 main.js 注册组件时，注入 config 属性对象

* 在页面中对 config 中属性进入重复设置，会覆盖全局设置 * 

import RegionSelect from 'region-select'

Vue.use(RegionSelect,{
    filter:'520000000000',     地区过滤，是否只需要其子类地区
    level = '2'                地区树显示层级（如有地区过滤，则为过滤后地区树的层级）   
    placeholder = '所属地区'    占位文本
    props = option.props       属性绑定
})

地区选择级联属性

参数	说明	类型	可选值	默认值
v-model	选中地区 code	string	—	—
data	组件内置标准全国数据源，如有个性化数据源，可通过data重置数据源	array	自定义数据源格式下有详情	标准全国数据源
label.sync	选中地区最后一级label	string	—	—
pathLabel.sync	选中地区全路径	string	—	—
filter	地区过滤，是否只需要部分地区	string	—	—
filterShowChild	只显示过滤地区的子类地区（需 filter 过滤才会生效）	boolean	true / false	false
level	地区树显示层级（如有地区过滤，则为过滤后地区树的层级）	number	—	—
props	配置选项，具体见下表	object	—	—

element 级联原生属性

参数	说明	类型	可选值	默认值
data	size	string	medium / small / mini	—
placeholder	输入框占位文本	string	—	请选择
clearable	是否禁用	boolean	—	false
clearable	是否支持清空选项	boolean	—	false
show-all-levels	输入框中是否显示选中值的完整路径	boolean	—	true
data	组件内置	array	—	—

Props

参数	说明	类型	可选值	默认值
checkStrictly	任意层级可选	boolean	true / false	false
multiple	是否多选（返回数据为字符数组）	boolean	true / false	false

事件

事件名称	说明	回调参数
change	当选中节点变化时触发	选中节点的值
blur	当失去焦点时触发	(event: Event)
focus	当获得焦点时触发	(event: Event)
visible-change	下拉框出现/隐藏时触发	出现则为 true，隐藏则为 false

自定义数据源格式

[
    {
        label: "呼和浩特市",
        value: '001',
        children: [
            {
                label: "市辖区",
                value: '0011'
            },
            {
                label: "东河区",
                value: '0012'
            },
            {
                label: "昆都仑区",
                value: '0013'
            },
        ]
    }
]