element-ui-area

基于Vue和ElementUI的中国行政区划选择器

安装

npm install element-ui-area -S

使用方式

项目依赖于Element-UI，您需要先进行引入

引入

import AreaComponent from 'element-ui-area'
Vue.use(AreaComponent, {})
 
// or
import {Cascader, Select} from 'element-ui-area'
Vue.use(Cascader, {})
Vue.use(Select, {})

配置项

属性	类型	说明	默认值
dataSource	Object	数据源	-

使用

Cascader

<template>
    <area-cascader v-model="value" :level="3" @change="onChange"/>
</template>
<script>
export default {
    data () {
        return {
            value: []
        }
    },
    methods: {
        onChange (val, text) {
            console.log(val)
            console.log(text) // 地区中文
        }
    }
}
</script>

Select

<template>
    <div style="width:600px;margin:10px auto;">
      <area-select v-model="value" :level="1"/>
      <area-select v-model="value1" :level="2"/>
      <area-select v-model="value2" :level="3"/>
    </div>
</template>
<script>
export default {
    data () {
        return {
            value: [],
            value1: [],
            value2: []
        }
    }
}
</script>

配置项

area-cascader

属性	类型	说明	默认值
value	String	绑定值	[ ]
level	Number	层级，由于数据原因，目前最多只支持三级	3
disabled	Boolean	是否禁用	false
size	String	尺寸	small
noMatchText	String	无匹配项时展现的文字	无匹配数据
noDataText	String	无数据时展现的文字	无数据
clearable	Boolean	是否支持清空	true
placeholder	String	占位符	请选择地区
immediate	Boolean	是否立即触发change事件	true
dataSource	Object	数据源	6位短编码行政区划

area-select

属性	类型	说明	默认值
value	String	绑定值	[ ]
level	Number	层级，由于数据原因，目前最多只支持三级	3
disabled	Boolean	是否禁用	false
size	String	尺寸	small
gutter	number	间距	10
noMatchText	String	无匹配项时展现的文字	无匹配数据
noDataText	String	无数据时展现的文字	无数据
clearable	Boolean	是否支持清空	true
placeholder	Array	占位符	['请选择省', '请选择市', '请选择区县', '请选择街道']
filterable	Boolean	是否支持搜索	false
immediate	Boolean	是否立即触发change事件	true
dataSource	Object	数据源	6位短编码行政区划

事件

名称	说明	参数
change	选中值改变事件，初始化时会触发一次	改变后的值, 中文名称
blur	失去焦点	事件对象
focus	聚焦	事件对象

数据源格式范例

{
    "86": {
        "110000": "北京市",
    },
    "110000": {
        "110100": "市辖区"
    },
    "110100": {
        "110101": "东城区",
        "110102": "西城区",
        "110105": "朝阳区",
        "110106": "丰台区",
        "110107": "石景山区",
        "110108": "海淀区",
        "110109": "门头沟区",
        "110111": "房山区",
        "110112": "通州区",
        "110113": "顺义区",
        "110114": "昌平区",
        "110115": "大兴区",
        "110116": "怀柔区",
        "110117": "平谷区",
        "110118": "密云区",
        "110119": "延庆区"
    }
}