1. 下载依赖
npm install element-china-area-data -S
2. 引用
import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from ‘element-china-area-data’
(1)provinceAndCityData是省市二级联动数据(不带“全部”选项)
(2)regionData是省市区三级联动数据(不带“全部”选项)
(3)provinceAndCityDataPlus是省市区三级联动数据(带“全部”选项)
(4)regionDataPlus是省市区三级联动数据(带“全部”选项)“全部"选项绑定的value是空字符串”"
(5)CodeToText是个大对象,属性是区域码,属性值是汉字 用法例如:CodeToText[‘110000’]输出北京市
(6)TextToCode是个大对象,属性是汉字,属性值是区域码 用法例如:TextToCode[‘北京市’].code输出110000,TextToCode[‘北京市’][‘市辖区’].code输出110100,TextToCode[‘北京市’][‘市辖区’][‘朝阳区’].code输出110105
3. 代码使用
<template>
<div class="app-container">
<el-cascader
class="widthSmall"
:options="options"
v-model="selectedOptions"
@change="cityCodeMapChange">
</el-cascader>
</div>
</template>
<script>
import { regionData, CodeToText } from "element-china-area-data";
export default {
data() {
return {
options: regionData,
selectedOptions: [],
filter: {},
},
methods: {
cityCodeMapChange(arr) {
this.filter.provinceCode = arr[0];
this.filter.cityCode = arr[1];
this.filter.areaCode = arr[2];
this.filter.receiverProvince = CodeToText[arr[0]];
this.filter.receiverCity = CodeToText[arr[1]];
this.filter.receiverRegion = CodeToText[arr[2]];
},
},
};
</script>