关于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

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理