Skip to content

msidolphin/element-ui-area

Repository files navigation

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": "延庆区"
    }
}