胡1杨 2022-04-15 19:25 采纳率: 20%
浏览 24

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

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

img


img

img

img

类似这种的数据格式,

img

  • 写回答

1条回答 默认 最新

  • 会飞的咕咕鱼 2022-04-18 17:26
    关注

    下面例子可以获取选中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>
    
    
    评论

报告相同问题?

问题事件

  • 创建了问题 4月15日