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)
},
總結
以上是生活随笔為你收集整理的python三级联动菜单_VUE+element三级联动或树形菜单获取最后一项,并加入到表格中...的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python 元组和列表区别_Pytho
- 下一篇： python实现谷歌翻译