当前位置: 首页 > Web前端 > vue.js

Vue+elementUI省市三级联动

时间:2023-03-31 14:52:50 vue.js

依赖导入安装:第1页使用npminstallelement-china-area-data-S,页面注入import{provinceAndCityData,CodeToText,TextToCode}from'element-china-area-data';//地址级联选择器2.使用3.导入数据源areaSelectData:provinceAndCityData,//options绑定的数据为导入的provinceAndCityDataselectedOptions:[],//区域选择参数,['省区号','市区号']4.按要求格式化地址1.获取用户信息中选择的当前省市getCity(){varself=this;让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(){varself=this;console.log(self.infoForm.province,self.infoForm.city);//TextToCode属性为汉字,属性值为地区代码TextToCode['北京'].code输出110000//省份varprovinceCode=TextToCode[self.infoForm.province].code;//城市varcityCode=TextToCode[self.infoForm.province][self.infoForm.city].code;self.selectedOptions=[provinceCode,cityCode];},3.编辑用户新选择的地址//编辑格式化地址handleChange(){varself=this;varprovinceCode=self.selectedOptions[0];varcityCode=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为省市二级联动数据(不带"all"选项)2.regionData为省市三级联动数据(不带"all"选项)3.provinceAndCityDataPlus为省市三级联动数据(带"all"选项)4.regionDataPlus为省市三级联动数据市政当局(带有“all”选项)5.绑定到“all”选项的值是一个空字符串“”6.CodeToText是一个大对象,属性是地区代码,属性值是汉字的用法。例如:CodeToText['110000']输出北京7。TextToCode是一个大对象,属性为汉字,属性值为区号使用示例:TextToCode['北京'].code输出110000,TextToCode['北京']['市区'].code输出110100,TextToCode['北京']['市区']['朝阳区'].code输出110105