element ui地区选择器(vue 省市区)

ElementUI中国省市级联选择器目录

1.安装

2.说明

3.示例

1.安装

npminstallelement-china-area-data-S

2.说明

文档：element-china-area-data-npm

ProvinceAndCityData为省市二级联动数据RegionData为省市三级联动数据provinceAndCityDataPlus为省市三级联动数据和城市RegionDataPlus是省市三级联动数据"all'选项绑定的值为空字符串"'CodeToText是一个大字符串对象，属性为区号，属性值为汉字。例如：CodeToText['110000']输出北京extToCode是一个大对象，属性为汉字，属性值为区号

使用示例：TextToCode['北京市'].code输出110000，TextToCode['北京市']['市辖区'].code输出110100，TextToCode['北京市']['市辖区']['朝阳区'].代码输出110105

3.示例

(1)导入

从'element-china-area-data'导入{provinceAndCityData，regionData，provinceAndCityDataPlus，regionDataPlus，CodeToText，TextToCode}

el-form-itemlabel='仓库地址'prop='addressJson'el-rowel-col:span='16'el-cascader:options='addressData':disabled='false'@change='handleAddress'style='width:95%'v-model='addressSelections'placeholder='请选择省市'/el-cascader/el-colel-col:span='8'el-inputv-model='form.detail'placeholder='请填写详细地址'//el-col/el-row/el-form-item

options中的内容与导入的具体数据绑定。可以选择的类型请参考说明中的内容，如下

data(){return{//遮罩层loading:true,//选中的数组ids:[],//地址信息addressData:RegionData,addressSelections:[],Warehouse:'warehouse'};},

在change方法中编辑省份和城市信息。当然，你也可以直接存储。主要看你的后端用什么来接受它。

handleAddress(){for(leti=0;ithis.addressSelections.length;i++){if(i==0){this.form.province=CodeToText[this.addressSelections[i]]}if(i==1){this.form.city=CodeToText[this.addressSelections[i]]}if(i==2){this.form.town=CodeToText[this.addressSelections[i]]}}},

根据后端传过来的数据恢复省市数据格式。

getAddressInfo(){this.addressSelections=[];}this.form.provinceCode=this.form.province?TextToCode[this.form.province].code:'';this.form.cityCode=this.form.city?TextToCode[this.form.province][this.form.city].code:'';this.form.townCode=this.form.town?TextToCode[this.form.province][this.form.city][this.form.town].code:'';this.addressSelections.push(this.form.provinceCode);this.addressSelections.push(this.form.cityCode);this.addressSelections.push(this.form.townCode);},

还可以实现四级联动，这里不再说明。

参考：

ElementUI中国省市级联数据_最小的风帆也能扬帆远方博客-CSDN博客