省市县级联效果
- 选择插件：element-china-area-data，方便快捷。
- 安装插件：npm install element-china-area-data -S（如果该命令安装失败，则将-S去掉。）
- 在项目中引入该插件：
import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'
说明：1）provinceAndCityData是省市二级联动数据（不带“全部”选项）
2）regionData是省市区三级联动数据（不带“全部”选项）
3）provinceAndCityDataPlus是省市区三级联动数据（带“全部”选项）
4）regionDataPlus是省市区三级联动数据（带“全部”选项）
5）"全部"选项绑定的value是空字符串""
6）CodeToText是个大对象，属性是区域码，属性值是汉字 用法例如： CodeToText['110000']输出北京市
7）TextToCode是个大对象，属性是汉字，属性值是区域码 用法例如：TextToCode['北京市']，code输出110000。TextToCode['北京市']['市辖区']，code输出110100。TextToCode['北京市']['市辖区']['朝阳区']，code输出110105。
- 用例：
<template>
<div>
<el-cascader size="large" :options="regions" v-model="selectedRegions"
@change="addressChange">
</el-cascader>
</div>
</template>
<script>
import { regionData,CodeToText } from 'element-china-area-data'
export default {
data () {
return {
regions: regionData,
selectedRegions: []
}
},
methods: {
addressChange(arr) {
console.log(CodeToText [arr[0]], CodeToText [arr[1]], CodeToText [arr[2]]);
//打印语句为省名称 市名称 区县名称。例如：辽宁省 沈阳市 浑南区。
}
}
}
</script>
页面效果如下：