elementui 的省市区级联选择器数据回显问题

elementui 的省市区级联选择器数据回显问题

关于elementui的级联选择器数据回显问题，找了好多资料也没解决。今天在这记录下级联选择器在编辑的时候数据回显的问题。

这里是在npm找到的一个省市区的数据 https://www.npmjs.com/package/element-china-area-data

安装

npm install element-china-area-data -S

使用

这里引入的时候可以按需引入没有必要全部引入

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

参数说明

1. provinceAndCityData是省市二级联动数据（不带“全部”选项）
2. regionData是省市区三级联动数据（不带“全部”选项）
3. provinceAndCityDataPlus是省市区三级联动数据（带“全部”选项）
4. regionDataPlus是省市区三级联动数据（带“全部”选项）
5. “全部"选项绑定的value是空字符串”"
6. CodeToText是个大对象，属性是区域码，属性值是汉字 用法例如：CodeToText[‘110000’]输出北京市
7. TextToCode是个大对象，属性是汉字，属性值是区域码
   用法例如：TextToCode[‘北京市’].code输出110000,TextToCode[‘北京市’][‘市辖区’].code输出110100,TextToCode[‘北京市’][‘市辖区’][‘朝阳区’].code输出110105

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

<template>
  <div id="app">
    <el-cascader
      size="large"
      :options="options"
      v-model="selectedOptions"
      @change="handleChange">
    </el-cascader>
  </div>
</template>
 
<script>
  import { regionData，CodeToText } from 'element-china-area-data'
  export default {
    data () {
      return {
        options: regionData,
        selectedOptions: []
      }
    },
 
    methods: {
      handleChange (value) {
        console.log(value) 
       // 可以在这里去处理数据，拿到的是每个区域的区域码然后将这个区域码存入后端。取得时候也是取出区域码
      }
    }
  }
</script>

以上这些大家都可以在参考地址https://www.npmjs.com/package/element-china-area-data
去查看

级联的数据回显

在级联选择器中因为它绑定的值是它每个区域的区域码，而我们在创建的时候给后端存入的也是区域码，所以当我们取出后我们只需要处理成它所需要的绑定值，就可以回显了。。。。。。