Vue项目中使用Element中的省市区级联选择器绑定数据和优化这是我在某后台管理项目中使用省市区级联选择器（el-ca

这是我在某后台管理项目中使用中国省市区级联选择器（el-cascader）的用法和使用说明

安装

在vue项目目标文件中，先安装包

使用npm的安装

npm install element-china-area-data -S

使用yarn的安装

yarn add element-china-area-data -S

在线示例(github)

引入

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

服务端用法

const { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } = require('element-china-area-data/dist/app.commonjs')

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

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

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

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

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

CodeToText是个大对象，属性是区域码，属性值是汉字用法例如：CodeToText['110000']输出北京市

TextToCode是个大对象，属性是汉字，属性值是区域码用法例如：TextToCode['北京市'].code输出110000,TextToCode['北京市']['市辖区'].code输出110100,TextToCode['北京市']['市辖区']['朝阳区'].code输出110105

思路总结

首先要知道引入的regionData和CodeToText，通过打印可知

regionData

regionData是一个数组，数组中的每个对象是省份信息，对应的每个对象中的children中是市区信息，每个市区信息中的children是区域信息。

CodeToText

CodeToText是对象中键值对的形式储存的省市区对应的code

Change输出

首先Change事件，当每次输入完成数据后，会返回一个value，这个value如下，是一个数组，分别是['省'，'市'，'区'],对应的code

['310000', '310100', '310101']

可以利用CodeToText，通过已知code查找对应的value(省市区名称)，处理数据可得到例如：'上海市/市辖区/黄浦区/'

数据导入

这里我假设axios请求得到的数据被处理成数组的形式['省'，'市'，'区']

['浙江省','杭州市','西湖区']

forEach递归查找，在addrOptions中请求得到的省市区数据对应的区域ID，封装成函数以便生命周期created阶段引用

注意：

关于使用CodeToText，只能在已知code的情况下找value，不能在已知value的情况下找code！
已知value找code用regionData 因为value是不唯一的（如：市辖区），通过CodeToText可能会找到多个对应的code

使用

<template>
  <div id="app">
    <el-cascader size="large"
    :options="addrOptions"
    v-model="selectedOptions"
    placeholder="请选择省/市/区,试试搜索：北京"
    @change='handleChange'
    style="width:30%"></el-cascader>
  </div>
</template>

<template>
  <div id="app">
    <el-cascader size="large"
    :options="addrOptions"
    v-model="selectedOptions"
    placeholder="请选择省/市/区,试试搜索：北京"
    @change='handleChange'
    style="width:30%"></el-cascader>
  </div>
</template>

<script>
  import {regionData,CodeToText} from 'element-china-area-data'
  export default {
    data () {
      return {
        addrOptions: regionData, //省市区地区value和地区code
        selectedOptions: [],  //绑定输入框中的省市区数据，这里导入导出的都是地区代码
        addtions:{},	//存储地址数据
      }
    },
    created(){
      //这里我假设axios请求得到的数据被处理成数组的形式['省'，'市'，'区']
      this.getObjectCode(['浙江省','杭州市','西湖区'],this.selectedOptions)
    },
    methods: {
      handleChange (value) {
      //我们选择地址后，selectedOptions 会保存对应的区域码，例如北京的区域码为'110000'
      //我们要取出区域码对应的汉字，就需要用CodeToText(区域码)进行输出
        this.addtions.selectedOptions = value
        let name = ''
        this.selectedOptions.map(item => name += CodeToText[item] + '/')
        this.addtions.names = name
      },
      // forEach递归查找 在addrOptions中请求得到的省市区数据对应的区域ID，封装成函数以便生命周期created阶段引用
      getObjectCode(array,Options){
         this.addrOptions.forEach((item)=>{
           if(item.label===array[0]){
             Options[0]=item.value
             item.children.forEach((item)=>{
               if(item.label===array[1]){
                 Options[1]=item.value
                 item.children.forEach((item)=>{
                   if(item.label===array[2]){
                     Options[2]=item.value
                     }
                 })
               }
             })
           }
         })
      }
    },
  }
</script>

优化

在清空表单后会触发change事件，这时value为undefined，执行到map会报错。需要加入if判断，value有值为true执行里面的代码。

handleChange (value) {
  if(value){
  this.addtions.selectedOptions = value
  let name = ''
  this.selectedOptions.map(item => name += CodeToText[item] + '/')
  this.addtions.names = name
  }
},