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';// 地址级联
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、根据需求格式化地址
- 获取用户信息中已选择的当前省市
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();
})
},
- 格式化地址使其展示在页面上
// 获取到省市数据,进行格式化
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];
},
- 编辑用户新选择的地址
// 编辑格式化地址
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
更多推荐
所有评论(0)