一、Element UI 中国省市区级联数据

本文参考：Element UI 中国省市区级联数据本文参考：根据此文做的整理

1. 安装

npm install element-china-area-data -S

2. 使用

import { regionData, CodeToText, TextToCode } from element-china-area-dataregionData是省市区三级联动数据（不带“全部”选项）CodeToText是个大对象，属性是区域码，属性值是汉字 用法例如：CodeToText[‘110000’]输出北京市extToCode是个大对象，属性是汉字，属性值是区域码用法例如：TextToCode[‘北京市’].code输出110000,TextToCode[‘北京市’][‘市辖区’].code输出110100,TextToCode[‘北京市’][‘市辖区’][‘朝阳区’].code输出110105

3.CodeToText的使用

数据示例：codeStr=‘110000,110100,110101’, codeArray=[110000,110100,110101]

getCodeToText(codeStr,codeArray){if(null===codeStr&&null===codeArray){returnnull;}elseif(null===codeArray){codeArray=codeStr.split(",");}letarea="";switch(codeArray.length){case1:area+=CodeToText[codeArray[0]];break;case2:area+=CodeToText[codeArray[0]]+"/"+CodeToText[codeArray[1]];break;case3:area+=CodeToText[codeArray[0]]+"/"+CodeToText[codeArray[1]]+"/"+CodeToText[codeArray[2]];break;default:break;}returnarea;}

4. TextToCode 的使用

北京市/市辖区/东城区 转换成 110101

在获取详情信息的接口中，使用TextToCode 将字符串转换成编码赋给 selectedOptions

this.selectedOptions=TextToCode[this.addForm.area.split(/)[0]][this.addForm.area.split(/)[1]][this.addForm.area.split(/)[2]].code;

如果想选择任意一级，比如只选省市不选取的话，可以增加条件判断

if(this.addForm.area.split(/)[2]){this.selectedOptions=TextToCode[this.addForm.area.split(/)[0]][this.addForm.area.split(/)[1]][this.addForm.area.split(/)[2]].code;}else{this.selectedOptions=TextToCode[this.addForm.area.split(/)[0]][this.addForm.area.split(/)[1]].code;}

5 整体代码：省市三级联动（不带“全部”选项）

如果想选择任意一级，可以使用element-ui的级联选择器中的选择任意一级选项的选择器，给el-cascader添加:props="{ checkStrictly: true }"属性

<template><div id="app"><el-cascadersize="large":options="options"v-model="selectedOptions"@change="handleChange"></el-cascader></div></template><script>import{regionData,CodeToText,TextToCode}fromelement-china-area-dataexportdefault{data(){return{options:regionData,selectedOptions:[]}},methods:{// 在获取详情信息接口中使用 TextToCode 将字符串转换成编码赋给 selectedOptionsprojectInfo(){varthat=this;getProjectInfo({token:getToken(),id:that.id}).then(res=>{this.addForm={id:res.id,// 基础信息p_name:res.p_name,//项目名p_message:res.p_message,//项目信息area:res.area,//地区remark:res.remark,//备注}this.selectedOptions=TextToCode[this.addForm.area.split(/)[0]][this.addForm.area.split(/)[1]][this.addForm.area.split(/)[2]].code;}).catch(err=>{Message.error(err)})},handleChange(value){console.log(value)this.getCodeToText(null,value)},getCodeToText(codeStr,codeArray){if(null===codeStr&&null===codeArray){returnnull;}elseif(null===codeArray){codeArray=codeStr.split(",");}letarea="";switch(codeArray.length){case1:area+=CodeToText[codeArray[0]];break;case2:area+=CodeToText[codeArray[0]]+"/"+CodeToText[codeArray[1]];break;case3:area+=CodeToText[codeArray[0]]+"/"+CodeToText[codeArray[1]]+"/"+CodeToText[codeArray[2]];break;default:break;}console.log(area)this.addForm.area=areareturnarea;}}}</script>

最后效果：点击编辑后：