前端工作过程中难免会要用到选择地址的时候，除了从后台获取特定地区数据的情况外，一般都是全国的省市区提供给用户选择，Element UI 提供了一个很好的插件。
Element UI 中国省市区级联数据
- 安装(使用 npm)
npm install element-china-area-data -S - 引入
import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data' - Tips
- provinceAndCityData是省市二级联动数据（不带“全部”选项）
- regionData是省市区三级联动数据（不带“全部”选项）
- provinceAndCityDataPlus是省市区三级联动数据（带“全部”选项）
- regionDataPlus是省市区三级联动数据（带“全部”选项）
- "全部"选项绑定的value是空字符串""
- CodeToText是个大对象，属性是区域码，属性值是汉字 用法例如：CodeToText['110000']输出北京市
- TextToCode是个大对象，属性是汉字，属性值是区域码 用法例如：TextToCode['北京市'].code输出110000,TextToCode['北京市']['市辖区'].code输出110100,TextToCode['北京市']['市辖区']['朝阳区'].code输出110105
- 页面使用
<template>
<div id="app">
<el-cascader size="large" :options="options" v-model="selectedOptions" @change="handleChange"></el-cascader>
</div>
</template>
<script>
import { provinceAndCityDataPlus, CodeToText } from 'element-china-area-data'
export default {
data () {
return {
options: provinceAndCityDataPlus,
selectedOptions: []
}
},
methods: {
handleChange (value) {
console.log(value) // value值为区域码
// 用CodeToText转换成中文
console.log(CodeToText[value[0]])
console.log(CodeToText[value[1]])
}
}
}
</script>
