element级联多选能不能一次性拿到所有已选择的数据

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

img


img

img

img

类似这种的数据格式,

img

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

img

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