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



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)
},