vue+element 学习之路（三）地区级联选择插件

今天爬坑的过程中遇到一个需求就是用户地址，首先一开始想到的是数据库可以设计地区无限分类表，但是我们怎么能忘了我们强大的饿了么团队呢，于是上网搜了一下果然有非常好用的插件，下面来总结一下这个插件的用法

首先安装

npm install element-china-area-data -S

组件代码

<template>
 
  <div>
 
    <el-cascader
 
      size="large"
 
      :options="options"
 
      v-model="selectedOptions"
 
      @change="handleChange">
 
    </el-cascader>
    
  </div>
</template>
 
 
 
<script>
 
  import { provinceAndCityData,CodeToText,TextToCode } from 'element-china-area-data' //引入
 
  export default {
    data () {
      return {
        options: provinceAndCityData,
        selectedOptions: []
      }
    },
    methods: {
      handleChange (value) {
        console.log(value);
      }
    }
  }
 
</script>

当我们选择地址时，看控制台

显而易见 第一个区域码是省级，第二个则是市级，若是直辖市规律也是一样的。

下面来介绍 CodeToText和TextToCode的用法

CodeToText 用法： 区域码 => 地区名

控制台输出结果：

如果省市区域码都有的话，默认只输出市名

TextToCode 用法： 地区名 => 区域码 同理
记得结尾要加上 .code

输出结果：

还有一个需求 场景，就是用户在更改地址时，怎么从之前的地址开始呢？
非常简单

控制选项列表中选项值的正是 selectedOptions，所以我们只需要把原来的区域码附进去就行啦

点击改变 选项栏跳转到河北省保定市

这里要注意一点的就是 selectedOptions 赋值的时候不能只附最低级别的区域码 例如

点击改变不生效

每隔一段时间会更新一下文章，起到一个总结的作用，若以后某一天发现自己现在写的都是垃圾的话，说明自己真的进步了，嘿嘿嘿~