如下图,要实现的功能如下,勾选三级联动的材料,勾选最后一级的材料,把勾选的材料信息动态添加到下面表格中
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)
},
