公司新的产品需求是这样的,省市区,拿到之后存在数据库,value值倒是拿到了,但是需要回显出省市区的名字label,网上搜了一下使用级联的change时间获取ref的getCheckedNodes这个方法就可以获取当前选择的省市区,但是我要的是选择全部的数据类型啊!




类似这种的数据格式,






下面例子可以获取选中value集合,label集合, 以及label和value都有的 ,看你需要哪个this.checkedNodes 就push哪个就行了

<template>
<el-cascader-panel ref="panel" :props="{ multiple: true }" :options="options" @change="handleChange"></el-cascader-panel>
</template>
<script>
export default {
data() {
return {
options: [{
value: '1',
label: '北京',
children: [{
value: '01',
label: '北京市',
children: [{
value: '0011',
label: '朝阳区'
}, {
value: '0012',
label: '海淀区'
}, {
value: '0013',
label: '西城区'
}, {
value: '0014',
label: '东城区'
}]
}]
},{
value: '2',
label: '上海',
children: [{
value: '02',
label: '上海市',
children: [{
value: '0021',
label: '静安区'
}, {
value: '0022',
label: '闵行区'
}, {
value: '0023',
label: '宝山区'
}, {
value: '0024',
label: '奉贤区'
}]
}]
}],
checkedNodes:[]
};
},
methods: {
handleChange(){
this.checkedNodes = [];
const nodes = this.$refs.panel.getCheckedNodes();
nodes.forEach(v=>{
const pathNodes = [];
v.pathNodes.forEach(item=>{
pathNodes.push({label: item.label, value:item.value});
})
this.checkedNodes.push([v.path,v.pathLabels,pathNodes])
})
console.log(this.checkedNodes)
}
}
};
</script>