VUEelement三级联动或树形菜单获取最后一项并加入到表格中

如下图, 要实现的功能如下, 勾选三级联动的材料, 勾选最后一级的材料, 把勾选的材料信息动态添加到下面表格中



1 data 数据

return {options:[],              // 三级联动 数据
    optionsObj : {}           //{id: item}  材料 id 键值对
    clList: [],            //  选中的材料}

2 从后台获取三级联动数据

  getDataTrees(){this.startLoading()
    this.$post("/api/pc/CategoryController/getCategoryAreaTree", {},data=>{console.log("TCL: getInit -> data", data,6766)
        this.options=data.tree
        
     
        this.optionsObj = this.getLastTree(this.options, {})        // 调用封装的函数 把最后一项添加到函数中
        
        
    })
},

3 获取最后一级材料 函数

  getLastTree(arr, obj){
    arr.map(item => {        // 遍历材料树 如果有下级材料, 就一直调用函数循环, 没有就就向 0bj 对象中添加最后一项
        if(item.children){this.getLastTree(item.children, obj)
        }else{obj[item.id] = item
            // item.children = []}
    })
    return obj
},

4 三级联动多选事件

changeSelectTree(val){let ids = []
    this.clList = []        // 每次调用初始化 clList 里的值
    
    val.map(item => {ids.push(item[item.length-1])        // 把选中的最后一项的 id 添加到 ids 数组中
    })
    ids.map(item => {this.clList.push(this.optionsObj[item])   // 循环选中的每一项, 在 optionsObj 对象中找到 并添加到 clList 数组中
    })
    console.log(this.clList)
    this.dialogVisibleTableData02=this.deepClone(this.clList)
},