前言:项目中的收货地址需要使用到省市区级联选择器,选择的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 -> valuename -> label

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

Logo

前往低代码交流专区

更多推荐