基于element的Cascader的省市县联动

　　接到了一个简单的需求，就是要做一个简单的省市县三联动。这种网上肯定会有相对应的代码。所以就不自己写了。找到了，首先是安装

cnpm install element-china-area-data -S

然后就是应用了。然后在过程中，发现了一个小问题，就是只能获取到选中的value，但是没有获取到选中的label，然后去网站上搜索，搜到了两个也不知道博主再说什么。然后自己去研究element的说明文档，真的还发现了能利用的。先把文档放上 ，然后大家看下截图

 

 

getCheckedNodes就能获取到，现在选中的节点，这个节点中就包含了，现在选中的所有的信息。我把打印的信息的截图，简单的给大家看下。

 

这里就能看到，选中的节点的内容了，就能获取到选中的label。下面把整个的代码都给出来；

<template>
    <div id="ssx">
        <p>省市县三级联动测试</p>
        <el-cascader
            size="large"
            :options="options"
            v-model="selectedOptions"
            @change="handleChange"
            ref="shengshi"
        ></el-cascader>
    </div>
</template>
<script>
import {
  provinceAndCityData,
  regionData,
  provinceAndCityDataPlus,
  regionDataPlus,
  CodeToText,
  TextToCode
} from "element-china-area-data";
export default {
  name: "ssx",
  data() {
    return {
      options: provinceAndCityData,
      selectedOptions: ['130000', '130300']// 这里直接赋值，就能回显
    };
  },
  props: {},
  mounted() {
    console.log(provinceAndCityData);
  },
  components: {},
  computed: {},
  methods: {
    handleChange() {
      
      console.log(this.selectedOptions);
      var arr = this.$refs.shengshi.getCheckedNodes();
      console.log(arr); // 这里就是获取到的所有的数据。就能从中获取到想要的label和value
    }
  }
};
</script>
<style lang="scss" scoped>
</style>