python三级联动菜单_VUE+element三级联动或树形菜单获取最后一项,并加入到表格中...

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

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)

},