VUE+element三級聯(lián)動或樹形菜單獲取最后一項,并加入到表格中

yeyan1996 發(fā)布于2019-08-26 10:28 / 1542人閱讀

摘要：如下圖要實現(xiàn)的功能如下勾選三級聯(lián)動的材料勾選最后一級的材料把勾選的材料信息動態(tài)添加到下面表格中數(shù)據(jù)三級聯(lián)動數(shù)據(jù)材料鍵值對選中的材料從后臺獲取三級聯(lián)動數(shù)據(jù)調(diào)用封裝的函數(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ù) 把最后一項添加到函數(shù)中
        
        
    })
},

3 獲取最后一級材料函數(shù)

  getLastTree(arr, obj){
    arr.map(item => {        //遍歷材料樹 如果有下級材料,就一直調(diào)用函數(shù)循環(huán),沒有就就向 0bj 對象中添加最后一項
        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])        //把選中的最后一項的id添加到 ids 數(shù)組中
    })
    ids.map(item => {
        this.clList.push(this.optionsObj[item])   // 循環(huán)選中的每一項,在optionsObj 對象中找到 并添加到 clList數(shù)組中
    })
    console.log( this.clList)
    this.dialogVisibleTableData02=this.deepClone(this.clList)
},

云服務器 GPU云服務器三級聯(lián)動菜單 js中獲取表格數(shù)據(jù) 樹形菜單二級樹形菜單

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/106238.html

使用vue+element ui 實現(xiàn)省市區(qū)三級聯(lián)動

摘要：使用實現(xiàn)省市區(qū)三級聯(lián)動開發(fā)工具使用技術效果圖如下話不多說上代碼一，頁面部分二，部分首先引入以下代碼注意引入上方代碼之前需先運行下方代碼進行安裝然后再寫入以下代碼這樣一個省市區(qū)三級聯(lián)動的下拉列表就完成了 ...

netScorpion 2021-11-11 16:54 評論0 收藏0
vue項目中使用element-ui下拉框選項值為對象時報錯

摘要：在做后臺管理時，使用了搭配，請求方法使用了插件，在使用下拉框時，因為我需要獲取選中的選項中的其他值，因此需要傳入對象。在做后臺管理時，使用了vue搭配elementUI，請求方法使用了axios插件，在使用下拉框時，因為我需要獲取選中的選項中的其他值，因此需要傳入對象。對select下拉框的文檔沒有讀的很仔細，百度過幾篇文章，也沒有理解他們表達的意思，然后自己又去看文檔，把他的屬性看...

Drummor 2019-08-26 10:57 評論0 收藏0
angular三級聯(lián)動組件編寫，樹形組件

摘要：總部東北總部遼寧東北東南總部總部遍歷取出數(shù)據(jù)解析多個層級數(shù)據(jù)一維數(shù)據(jù)解析成樹形，如本來就為樹形結(jié)構(gòu)，忽略此步驟同函數(shù)同種功能臨時變量寫法自定義指令，編寫成組件隔離作用域隔離和父的雙向綁定單向父屬性值改變時，的值也會跟這改變，但是 JS Bin ul { list-style: none; } .text-field { c...

testHs 2019-08-20 15:09 評論0 收藏0
vue+element tree(樹形控件數(shù)據(jù)格式)組件(1)

摘要：樹形控件數(shù)據(jù)格式組件最近做了第一個組內(nèi)可以使用的組件，雖然是最簡版，也廢了不少力。讓我來記錄這個樹形組件的編寫過程和期間用到的知識點。 vue+element tree(樹形控件數(shù)據(jù)格式)組件(1), 最近做了第一個組內(nèi)可以使用的組件，雖然是最簡版，也廢了不少力。各位前輩幫我解決問題，才勉強搞定。讓我來記錄這個樹形組件的編寫過程和期間用到的知識點。首先說說需求，就是點擊出現(xiàn)彈窗+蒙板...

Pines_Cheng 2019-08-02 16:05 評論0 收藏0
vue+element tree(樹形控件數(shù)據(jù)格式)組件(1)

摘要：樹形控件數(shù)據(jù)格式組件最近做了第一個組內(nèi)可以使用的組件，雖然是最簡版，也廢了不少力。讓我來記錄這個樹形組件的編寫過程和期間用到的知識點。 vue+element tree(樹形控件數(shù)據(jù)格式)組件(1), 最近做了第一個組內(nèi)可以使用的組件，雖然是最簡版，也廢了不少力。各位前輩幫我解決問題，才勉強搞定。讓我來記錄這個樹形組件的編寫過程和期間用到的知識點。首先說說需求，就是點擊出現(xiàn)彈窗+蒙板...

wangdai 2019-08-23 11:56 評論0 收藏0