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 。

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