vue + element UI 中省市区三级联动，使用element-china-area-data

vue + element UI 中省市区三级联动，使用element-china-area-data

依赖引入

安装：npm install element-china-area-data -S

在页面中使用

1、页面中注入

import {provinceAndCityData, CodeToText, TextToCode} from 'element-china-area-data';// 地址级联选择器

2、页面中使用

<el-cascader :options="areaSelectData" :disabled="isNotEdit"
              @change="handleChange" class="full-width" size="large" 
              v-model="selectedOptions" placeholder="请选择您所在的城市" />

areaSelectData: provinceAndCityData, // options绑定的数据就是引入的 provinceAndCityData
selectedOptions: [], // 地区选择参数，['省区域码', '市区域码']

3、根据需求格式化地址

1. 获取用户信息中已选择的当前省市

getCity() {
     var self = this;
     let data = localStorage.getItem('kimid');
     self.$api.getcustomers(data).then(res => {
         self.infoForm.province = res.data.province,//省
         self.infoForm.city = res.data.city;
         self.formatCity();
     })
},

2. 格式化地址使其展示在页面上

// 获取到省市数据，进行格式化
formatCity(){
    var self = this;
    console.log(self.infoForm.province,self.infoForm.city);
    // TextToCode属性是汉字，属性值是区域码 TextToCode['北京市'].code输出110000
    // 省份
    var provinceCode = TextToCode[self.infoForm.province].code;
    // 城市
    var cityCode = TextToCode[self.infoForm.province][self.infoForm.city].code;
    self.selectedOptions = [provinceCode, cityCode];
},

3. 编辑用户新选择的地址

// 编辑格式化地址
handleChange() {
     var self = this;
     var provinceCode = self.selectedOptions[0];
     var cityCode = self.selectedOptions[1];
     // CodeToText属性是区域码，属性值是汉字 CodeToText['110000']输出北京市
     self.infoForm.province = CodeToText[provinceCode];
     self.infoForm.city = CodeToText[cityCode];
     console.log("选择的省市：", self.infoForm.province, self.infoForm.city);
 },

至此，已达到项目需求，对插件使用方法进行摘抄记录：
首先附上链接：https://www.npmjs.com/package/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