region-select
引入
yarn add region-select
npm i region-select
依赖项:
element-ui
版本迭代
RegionSelect 0.4.3 版本
取消外部数据源,由于组件维护全国地区树JSON (如有个性化数据源,可通过data重置数据源)
如需部分地区地区树,可用filter筛选
测试版本
为0.1.0版本号开头
引入
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 属性绑定
data = areaTree 全局自定义地区树
})
地区选择级联属性
参数 |
说明 |
类型 |
可选值 |
默认值 |
v-model |
选中地区 code |
string |
— |
— |
data |
组件内置标准全国数据源,如有个性化数据源,可通过data重置数据源 |
array |
自定义数据源格式下有详情 |
标准全国数据源 |
label.sync |
选中地区最后一级label |
string |
— |
— |
pathLabel.sync |
选中地区全路径 |
string |
— |
— |
filter |
地区过滤,是否只需要部分地区 |
string |
— |
— |
filterShowChild |
只显示过滤地区的子类地区(需 filter 过滤才会生效) |
boolean |
true / false |
false |
level |
地区树显示层级(如有地区过滤,则为过滤后地区树的层级) |
number |
— |
— |
collapseTags |
折叠展示Tag |
boolean |
true / false |
true |
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 |
label |
指定选项标签为选项对象的某个属性值 |
string |
— |
— |
value |
指定选项的值为选项对象的某个属性值 |
string |
— |
— |
事件
事件名称 |
说明 |
回调参数 |
change |
当选中节点变化时触发 |
选中节点的值 |
handleExpandChange |
当选中节点变化时触发 |
返回节点node,可在node中获取所有的父类信息 |
自定义数据源格式
[
{
label: "呼和浩特市",
value: '001',
children: [
{
label: "市辖区",
value: '0011'
},
{
label: "东河区",
value: '0012'
},
{
label: "昆都仑区",
value: '0013'
},
]
}
]