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

yeyan1996 發布于2019-08-26 10:28 / 1434人閱讀

摘要：如下圖要實現的功能如下勾選三級聯動的材料勾選最后一級的材料把勾選的材料信息動態添加到下面表格中數據三級聯動數據材料鍵值對選中的材料從后臺獲取三級聯動數據調用封裝的函數把最后一項添加到函數中獲取最后一級材料函數遍歷材料樹如果有下級材料就一直

如下圖,要實現的功能如下,勾選三級聯動的材料,勾選最后一級的材料,把勾選的材料信息動態添加到下面表格中

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)
},

GPU云服務器云服務器三級聯動菜單 js中獲取表格數據樹形菜單二級樹形菜單

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106238.html

使用vue+element ui 實現省市區三級聯動

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

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

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

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

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

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

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

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

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

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