基于element的Cascader的省市县联动

程先生哈

已于 2023-02-23 15:45:59 修改

阅读量380

点赞数

于 2021-12-01 11:34:00 首次发布

本文链接：https://blog.csdn.net/qq_35073135/article/details/129153611

版权

Element Cascader 省市县联动 getCheckedNodes label value

关键词由CSDN通过智能技术生成

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

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>