Vue实现省市区级联选择器,使用Elementui的Cascader级联选择器获取label值
前言:项目中的收货地址需要使用到省市区级联选择器,选择的UI框架是 Element效果图获取到的数据参考文档:Element的Cascader 级联选择器省市区等联动地址数据:收纳了很多数据我使用的数据是 pca-code.json代码部分:<template><el-cascader:options="options"ref="c...
·
前言:项目中的收货地址需要使用到省市区级联选择器,选择的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 做替换的,结果数据太长超过限制莫法。。
更多推荐
已为社区贡献31条内容
所有评论(0)