js二级联动省市代码（Element UI 中国省市区级联选择器）

目录

1.安装

2.说明

3.示例

1.安装

npm install element-china-area-data -S

2.说明

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

provinceAndCityData是省市二级联动数据（不带“全部
    
    
    
”选项） regionData是省市区三级联动数据（不带“全部     


     


     


     ”选项） provinceAndCityDataPlus是省市区三级联动数据（带“全部 




 




 




 



”选项） regionDataPlus是省市区三级联动数据（带“全部

   

   

   

”选项） “全部"选项绑定的value是空字符串     

     

     

    ”" CodeToText是个大对象    
    
    
    
，属性是区域码 


     


     


     


，属性值是汉字 用法例如：CodeToText[‘110000’]输出北京市 extToCode是个大对象

 




 




 




 ，属性是汉字   

   

   

   
，属性值是区域码

用法例如：TextToCode[‘北京市’].code输出110000,TextToCode[‘北京市’][‘市辖区’].code输出110100,TextToCode[‘北京市’][‘市辖区’][‘朝阳区’].code输出110105

3.示例

(1)导入

import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from element-china-area-data

(使用)

<el-form-item label="仓库地址" prop="addressJson"> <el-row> <el-col :span="16"> <el-cascader :options="addressData" :disabled="false" @change="handleAddress" style="width: 95%" v-model="addressSelections" placeholder="请选择省市区"></el-cascader> </el-col> <el-col :span="8"> <el-input v-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 (let i = 0; i < this.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); },

 还可以实现四级联动



   




   




   




 ，这里就不说明了

参照：

Element UI 中国省市区级联数据_最小的帆也能远航的博客-CSDN博客