vue 城市选择器（省市区）的使用 element-china-area-data

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

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

1. 安装

npm install element-china-area-data -S

2. 使用

import { regionData, CodeToText, TextToCode } from 'element-china-area-data'

1. regionData是省市区三级联动数据（不带“全部”选项）
2. CodeToText是个大对象，属性是区域码，属性值是汉字 用法例如：CodeToText[‘110000’]输出北京市
3. 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){return null;}elseif(null === codeArray){
        codeArray = codeStr.split(",");}let area ="";
      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;}return area;}

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-cascader
      size="large":options="options"
      v-model="selectedOptions"
      @change="handleChange"></el-cascader></div></template><script>import{ regionData, CodeToText, TextToCode }from'element-china-area-data'exportdefault{data(){return{options: regionData,selectedOptions:[]}},methods:{// 在获取详情信息接口中使用 TextToCode 将字符串转换成编码赋给 selectedOptions projectInfo(){var that =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(",");}let area ="";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 = area
          return area;}}}</script>

最后效果：

点击编辑后：