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;
      } else if (null === codeArray) {
        codeArray = codeStr.split(",");
      }

      let area = "";
      switch (codeArray.length) {
        case 1:
          area += CodeToText[codeArray[0]];
          break;
        case 2:
          area += CodeToText[codeArray[0]] + "/" + CodeToText[codeArray[1]];
          break;
        case 3:
          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'
  export default {
    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) {
	        return null;
	      } else if (null === codeArray) {
	        codeArray = codeStr.split(",");
	      }
	      let area = "";
	      switch (codeArray.length) {
	        case 1:
	          area += CodeToText[codeArray[0]];
	          break;
	        case 2:
	          area += CodeToText[codeArray[0]] + "/" + CodeToText[codeArray[1]];
	          break;
	        case 3:
	          area +=
	            CodeToText[codeArray[0]] +
	            "/" +
	            CodeToText[codeArray[1]] +
	            "/" +
	            CodeToText[codeArray[2]];
	          break;
	        default:
	          break;
	      }
	      console.log(area)
	      this.addForm.area = area
	      return area;
	    }
    }
  }
</script>

最后效果：

点击编辑后：