国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

yeyan1996 / 1447人閱讀

摘要：如下圖要實(shí)現(xiàn)的功能如下勾選三級(jí)聯(lián)動(dòng)的材料勾選最后一級(jí)的材料把勾選的材料信息動(dòng)態(tài)添加到下面表格中數(shù)據(jù)三級(jí)聯(lián)動(dòng)數(shù)據(jù)材料鍵值對(duì)選中的材料從后臺(tái)獲取三級(jí)聯(lián)動(dòng)數(shù)據(jù)調(diào)用封裝的函數(shù)把最后一項(xiàng)添加到函數(shù)中獲取最后一級(jí)材料函數(shù)遍歷材料樹如果有下級(jí)材料就一直

如下圖,要實(shí)現(xiàn)的功能如下,勾選三級(jí)聯(lián)動(dòng)的材料,勾選最后一級(jí)的材料,把勾選的材料信息動(dòng)態(tài)添加到下面表格中



1 data數(shù)據(jù)

return {
    options:[],              // 三級(jí)聯(lián)動(dòng) 數(shù)據(jù)
    optionsObj : {}           //{id: item}  材料id鍵值對(duì)
    clList: [],            //  選中的材料


}

2 從后臺(tái)獲取三級(jí)聯(lián)動(dòng)數(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 獲取最后一級(jí)材料 函數(shù)

  getLastTree(arr, obj){
    arr.map(item => {        //遍歷材料樹 如果有下級(jí)材料,就一直調(diào)用函數(shù)循環(huán),沒有就就向 0bj 對(duì)象中添加最后一項(xiàng)
        if(item.children){
            this.getLastTree(item.children, obj)
        }else{
            obj[item.id] = item
            // item.children = []
        }
    })
    return obj
},

4 三級(jí)聯(lián)動(dòng)多選事件

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 對(duì)象中找到 并添加到 clList數(shù)組中
    })
    console.log( this.clList)
    this.dialogVisibleTableData02=this.deepClone(this.clList)
},

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/106238.html

相關(guān)文章

  • 使用vue+element ui 實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)

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

    netScorpion 評(píng)論0 收藏0

  • vue項(xiàng)目中使用element-ui下拉框選項(xiàng)值為對(duì)象時(shí)報(bào)錯(cuò)

    摘要：在做后臺(tái)管理時(shí)，使用了搭配，請(qǐng)求方法使用了插件，在使用下拉框時(shí)，因?yàn)槲倚枰@取選中的選項(xiàng)中的其他值，因此需要傳入對(duì)象。 在做后臺(tái)管理時(shí)，使用了vue搭配elementUI，請(qǐng)求方法使用了axios插件，在使用下拉框時(shí)，因?yàn)槲倚枰@取選中的選項(xiàng)中的其他值，因此需要傳入對(duì)象。對(duì)select下拉框的文檔沒有讀的很仔細(xì)，百度過幾篇文章，也沒有理解他們表達(dá)的意思，然后自己又去看文檔，把他的屬性看...

    Drummor 評(píng)論0 收藏0

  • angular三級(jí)聯(lián)動(dòng)組件編寫，樹形組件

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

    testHs 評(píng)論0 收藏0

  • vue+element tree(樹形控件數(shù)據(jù)格式)組件(1)

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

    Pines_Cheng 評(píng)論0 收藏0

  • vue+element tree(樹形控件數(shù)據(jù)格式)組件(1)

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

    wangdai 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<