近期做一个关于物流的项目需要实现获取全国的省市区的功能。查阅资料发现element-ui里面直接提供了这样的一个插件，并且发现十分的好用，于是便直接拿来使用了。
预览 有想体验的小伙伴可以进入Element China Area Data体验。
安装
在使用插件前必不可少的操作当然是引入插件啦。
1
| npm i element-china-area-data
|
使用
在你需要使用的页面中引入相应的模块功能
1
| import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'
|
如下是功能模块的功能介绍
| 模块 | 功能介绍 |
|---|
provinceAndCityData | 省市二级联动数据（不带“全部”选项） |
regionData | 省市区三级联动数据（不带“全部”选项） |
provinceAndCityDataPlus | 省市区三级联动数据（带“全部”选项） |
regionDataPlus | 省市区三级联动数据（带“全部”选项） |
CodeToText | 大对象，属性是区域码，属性值是汉字，可以将区域码转化成真实地址 |
TextToCode | 大对象，属性是汉字，属性值是区域码，可以将真实地址转化成区域码 |
“全部”选项绑定的value是空字符串""
我们需要使用什么类型的组件，就在data中配置options选项即可，如下有示例。
区域码转地址
当我们存储的数据是区域码时，为了显示出来是真实地址，我们需要将区域码转成真实地址，具体的操作我们可以使用CodeToText大对象进行获取。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| <template>
<div id="app">
<el-cascader
size="large"
:options="options"
v-model="selectedOptions"
@change="handleChange">
</el-cascader>
</div>
</template>
<script>
// 引入省市区三级联动数据（不带“全部”选项）
import { regionData } from 'element-china-area-data'
export default {
data () {
return {
options: regionData, //配置数据项
selectedOptions: []
}
},
methods: {
handleChange (value) {
console.log(value)// 此处获取的是区域码
console.log(CodeToText[value]) // 将区域码转化成真实地址
console.log(CodeToText['110000']) // 将输出北京市
}
}
}
</script>
|
地址转区域码
我们有时可能需要将省市区真实地址转化成区域码进行存储，我们可以使用如下操作
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| <template>
<div id="app">
<el-cascader
size="large"
:options="options"
v-model="selectedOptions"
@change="handleChange">
</el-cascader>
</div>
</template>
<script>
// 引入省市区三级联动数据（带“全部”选项）
import { regionDataPlus } from 'element-china-area-data'
export default {
data () {
return {
options: regionDataPlus,
selectedOptions: []
}
},
methods: {
handleChange (value) {
console.log(TextToCode['北京市'].code) // 将输出110000
console.log(TextToCode['北京市']['市辖区'].code) // 将输出110100
console.log(TextToCode['北京市']['市辖区']['朝阳区'].code) // 将输出110105
}
}
}
</script>
|
对这个有兴趣的可以具体参考element-china-area-data
