基于element-china-area-data实现中国省市区级联以及数据回显

第一步 下载并引入element-china-area-data

 npm install element-china-area-data -S
 
// 根据需求引入
// 1.  `provinceAndCityData`是省市二级联动数据（不带“全部”选项）
// 1.  `regionData`是省市区三级联动数据（不带“全部”选项）
// 1.  `provinceAndCityDataPlus`是省市区三级联动数据（带“全部”选项）
// 1.  `regionDataPlus`是省市区三级联动数据（带“全部”选项）
// 1.  "全部"选项绑定的value是空字符串`""`
// 1.  `CodeToText`是个大对象，属性是区域码，属性值是汉字 用法例如：`CodeToText['110000']`输出`北京市`
// 1.  `TextToCode`是个大对象，属性是汉字，属性值是区域码 用法例如：`TextToCode['北京市'].code`输出`110000`,`TextToCode['北京市']['市辖区'].code`输出`110100`,`TextToCode['北京市']['市辖区']['朝阳区'].code`输出`110105`
import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'

第二步，配置el-cascader下拉选择框

    <el-cascader
      size="large"
      :options="options" // 为多选框的省市区的选项
      v-model="selectedOptions" // 为选择的值
      @change="handleChange">// 每次改变时都会调用一次的函数
    </el-cascader>
    
    ```
export default {
    data () {
      return {
        options: regionData,
        selectedOptions: []
      }
    },
 
    methods: {
    // 选择后可以得到一个字符串数组，需要调用CodeToText方法将编码转译成汉字 
      handleChange (value) {
        console.log(value)
      }，
      
      
      translate(){
      // 声明一个新数组
          let address = []
          // 遍历旧数组，push每个转译后编码进去address
          this.selectedOptions.forEach(item => {
              address.push(CodeToText[item])
          })
          return address
      }
    }
  }

得到了转译后的省市区数据的汉字字符串数组后，由于数据回显需要三个编码的字符串数组，而element-china-area-data并没有给我们提供一个方法能够返回三组汉字的字符串数组转译成三个编码的字符串数组，所以需要我们自己封装一个方法

export function translateToCode(text){
// 先将传入的字符传去掉“，”，变成一个拥有三组汉字的字符串数组
  const arr = text.split(',')
  // 声明一个数组接收遍历到的编码
  let code = []
  // 通过TextToCode获得省的code
  code.push(TextToCode[arr[0]].code)
  // 获得这个省的对象
  const provinceCode = TextToCode[arr[0]]
  // 声明城市与区的对象
  let cityCode,regionCode
  // for in方法遍历省对象，找到市对象并接收
   for (const key in provinceCode) {
    if(key === arr[1]){
      cityCode = provinceCode[key]
      // 获取这个市的code
      code.push(cityCode.code)
      // 当存在第三级，则需要继续查找区对象
      if(arr[2]){
        for (const key in cityCode) {
          if(key === arr[2]){
            regionCode = cityCode[key]
            // 获得区的code
            code.push(regionCode.code)
          }
        }
      }
    }
  }
  // 最后返回code
  return code
}

只要传入一个省市区的字符串，就能返回相应的编码字符串数组，然后再绑定到selectedOptions中即可