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

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

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

效果图
在这里插入图片描述
获取到的数据

参考文档：
Element的Cascader 级联选择器
省市区等联动地址数据：收纳了很多数据

我使用的数据是 pca-code.json
在这里插入图片描述
代码部分：

<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 。