elementui cascader 级联选择器多选 全选半选获取当前选中节点 转成options数据

1,956 阅读1分钟

今天遇到这个需求,记录一下

ElementUI Cascader 级联选择器多选,如果是全选就获取整个节点,半选则获取当前选中的节点

实现代码

<div class="block">
    <span class="demonstration">折叠展示Tag</span>
    <el-cascader
      :options="options"
      :props="props"
      collapse-tags
      ref="cascader"
      clearable>
    </el-cascader>
    <el-button type="primary" @click="gsisok">确认</el-button>
</div>
gsisok(){
    let nodes = this.$refs['cascader'].getCheckedNodes()
    nodes = nodes.filter(item => !(item.parent && item.parent.checked));
    let arr = []
    nodes.forEach(item=>{ 
        let calculationData = {}
        this.dg_CalculationData2(calculationData,item)
        arr.push(calculationData)
    })
    console.log(arr);
},
dg_CalculationData2(data,nodes){
    data.label = nodes.label
    data.value = nodes.value
    if(nodes.children.length > 0){
        data.children = []
        nodes.children.forEach((item,index)=>{
            data.children[index] = {label: '', value: ''}
            this.dg_CalculationData2(data.children[index],item)
        })
    }
},

效果图

屏幕截图 2022-11-24 131556.png

屏幕截图 2022-11-24 131607.png