資訊專欄INFORMATION COLUMN
摘要：如下圖要實(shí)現(xiàn)的功能如下勾選三級聯(lián)動的材料勾選最后一級的材料把勾選的材料信息動態(tài)添加到下面表格中數(shù)據(jù)三級聯(lián)動數(shù)據(jù)材料鍵值對選中的材料從后臺獲取三級聯(lián)動數(shù)據(jù)調(diào)用封裝的函數(shù)把最后一項(xiàng)添加到函數(shù)中獲取最后一級材料函數(shù)遍歷材料樹如果有下級材料就一直
如下圖,要實(shí)現(xiàn)的功能如下,勾選三級聯(lián)動的材料,勾選最后一級的材料,把勾選的材料信息動態(tài)添加到下面表格中
1 data數(shù)據(jù)
return {
options:[], // 三級聯(lián)動 數(shù)據(jù)
optionsObj : {} //{id: item} 材料id鍵值對
clList: [], // 選中的材料
}
2 從后臺獲取三級聯(lián)動數(shù)據(jù)
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, {}) //調(diào)用封裝的函數(shù) 把最后一項(xiàng)添加到函數(shù)中
})
},
3 獲取最后一級材料 函數(shù)
getLastTree(arr, obj){
arr.map(item => { //遍歷材料樹 如果有下級材料,就一直調(diào)用函數(shù)循環(huán),沒有就就向 0bj 對象中添加最后一項(xiàng)
if(item.children){
this.getLastTree(item.children, obj)
}else{
obj[item.id] = item
// item.children = []
}
})
return obj
},
4 三級聯(lián)動多選事件
changeSelectTree(val){
let ids = []
this.clList = [] //每次調(diào)用初始化 clList 里的值
val.map(item => {
ids.push(item[item.length-1]) //把選中的最后一項(xiàng)的id添加到 ids 數(shù)組中
})
ids.map(item => {
this.clList.push(this.optionsObj[item]) // 循環(huán)選中的每一項(xiàng),在optionsObj 對象中找到 并添加到 clList數(shù)組中
})
console.log( this.clList)
this.dialogVisibleTableData02=this.deepClone(this.clList)
},
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/106238.html
摘要：使用實(shí)現(xiàn)省市區(qū)三級聯(lián)動開發(fā)工具使用技術(shù)效果圖如下話不多說上代碼一，頁面部分二，部分首先引入以下代碼注意引入上方代碼之前需先運(yùn)行下方代碼進(jìn)行安裝然后再寫入以下代碼這樣一個省市區(qū)三級聯(lián)動的下拉列表就完成了 ...
摘要：在做后臺管理時，使用了搭配，請求方法使用了插件，在使用下拉框時，因?yàn)槲倚枰@取選中的選項(xiàng)中的其他值，因此需要傳入對象。 在做后臺管理時，使用了vue搭配elementUI，請求方法使用了axios插件，在使用下拉框時，因?yàn)槲倚枰@取選中的選項(xiàng)中的其他值，因此需要傳入對象。對select下拉框的文檔沒有讀的很仔細(xì)，百度過幾篇文章，也沒有理解他們表達(dá)的意思，然后自己又去看文檔，把他的屬性看...
摘要：總部東北總部遼寧東北東南總部總部遍歷取出數(shù)據(jù)解析多個層級數(shù)據(jù)一維數(shù)據(jù)解析成樹形，如本來就為樹形結(jié)構(gòu)，忽略此步驟同函數(shù)同種功能臨時變量寫法自定義指令，編寫成組件隔離作用域隔離和父的雙向綁定單向父屬性值改變時，的值也會跟這改變，但是 JS Bin ul { list-style: none; } .text-field { c...
摘要：樹形控件數(shù)據(jù)格式組件最近做了第一個組內(nèi)可以使用的組件，雖然是最簡版，也廢了不少力。讓我來記錄這個樹形組件的編寫過程和期間用到的知識點(diǎn)。 vue+element tree(樹形控件數(shù)據(jù)格式)組件(1), 最近做了第一個組內(nèi)可以使用的組件，雖然是最簡版，也廢了不少力。各位前輩幫我解決問題，才勉強(qiáng)搞定。讓我來記錄這個樹形組件的編寫過程和期間用到的知識點(diǎn)。 首先說說需求，就是點(diǎn)擊出現(xiàn)彈窗+蒙板...
摘要：樹形控件數(shù)據(jù)格式組件最近做了第一個組內(nèi)可以使用的組件，雖然是最簡版，也廢了不少力。讓我來記錄這個樹形組件的編寫過程和期間用到的知識點(diǎn)。 vue+element tree(樹形控件數(shù)據(jù)格式)組件(1), 最近做了第一個組內(nèi)可以使用的組件，雖然是最簡版，也廢了不少力。各位前輩幫我解決問題，才勉強(qiáng)搞定。讓我來記錄這個樹形組件的編寫過程和期間用到的知識點(diǎn)。 首先說說需求，就是點(diǎn)擊出現(xiàn)彈窗+蒙板...
閱讀 1320·2021-11-11 10:57
閱讀 3740·2021-09-07 10:10
閱讀 3455·2021-08-03 14:03
閱讀 3082·2019-08-30 13:45
閱讀 696·2019-08-29 11:19
閱讀 1052·2019-08-28 18:07
閱讀 3112·2019-08-26 13:55
閱讀 824·2019-08-26 12:17
