关于vue.js:vue-element-UI-中省市区三级联动

依赖引入

装置：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="请抉择您所在的城市" /> 

3. 引入数据源

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

4. 依据需要格式化地址

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();})
}, 

1. 格式化地址使其展现在页面上

// 获取到省市数据，进行格式化
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