region-select

0.4.12 • Public • Published

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'
            },
        ]
    }
]

Readme

Keywords

none

Package Sidebar

Install

npm i region-select

Weekly Downloads

2

Version

0.4.12

License

MIT

Unpacked Size

6.96 MB

Total Files

15

Last publish

Collaborators

  • tanzhiwen
  • yang06061079
  • moer
  • wangyuan389
  • hanneil