Vue实现省市区级联选择器，使用Elementui的Cascader级联选择器获取label值

太过爱你忘了你带给我的痛 2023-07-18 14:16 130阅读 0赞

前言：项目中的收货地址需要使用到省市区级联选择器，选择的UI框架是 Element

效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70]  
获取到的数据  
![在这里插入图片描述][20200329002817636.png]  
**参考文档：**  
[Element的Cascader 级联选择器][Element_Cascader]  
[省市区等联动地址数据][Link 1]：收纳了很多数据

我使用的数据是 `pca-code.json`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70 1]  
**代码部分：**

<template>
    	<el-cascader
    		:options="options"
    		ref="cascaderAddr"
    		v-model="selectedOptions"
    		@change="handleChange">
     	</el-cascader>
    </template>
    
    <script>
    let pcas = require('../../../assets/pca-code.json')
    
    export default { 
        name: 'receiveAddress',
        data() { 
            return { 
                options: pcas,
                selectedOptions: [],
          },
        methods: { 
            // 获取省市区地址级联
            handleChange(e, form, thsAreaCode) { 
                thsAreaCode = this.$refs['cascaderAddr'].getCheckedNodes()[0].pathLabels// 注意2： 获取label值
                console.log(thsAreaCode) // 注意3： 最终结果是个一维数组对象
                console.log(thsAreaCode[0] + thsAreaCode[1] + thsAreaCode[2])
            },
        },
    }
    </script>

**注意：**  
（1）获取 `value` 的值 Element 文档有介绍，这里获取的是 `label` 的值。  
（2）下载下来的 `pca-code.json` 数据的数据是 `code、name、children`，而 `Element` 的级联选择器对应的数据是 `value、label、children`，所以我对 `pca-code.json` 数据做了一个全局替换单词，将 `code` \-> `value`，`name` \-> `label` 。

> 我使用的记事本（编辑->替换->全部替换）做的全局替换<囧>本来想用 VS code 做替换的，结果数据太长超过限制莫法。。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70]: /images/20230528/08e315b0964d43a18e389882f734f4f8.png
[20200329002817636.png]: /images/20230528/bf8148ef5f774fc6bd87507118ce9928.png
[Element_Cascader]: https://element.eleme.cn/2.0/#/zh-CN/component/cascader
[Link 1]: https://github.com/modood/Administrative-divisions-of-China
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70 1]: /images/20230528/df7658b494df46bbaa93bdd07e7808f9.png