亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

基于vue.js實現(xiàn)樹形表格的封裝

yedf / 2454人閱讀

摘要：此頁面是實現(xiàn)樹表格的關(guān)健頁面。這里就是關(guān)健點，因為這個子組件是需要遞歸實現(xiàn)，所以，需要動態(tài)注冊到當(dāng)前組件中。補充一點不要只看部分，部分才是這個樹表格的關(guān)健所在。

基于vue.js實現(xiàn)樹形表格的封裝（vue-tree-table） 前言 
由于公司產(chǎn)品（基于vue.js）需要，要實現(xiàn)一個樹形表格的功能，百度、google找了一通，并沒有發(fā)現(xiàn)很靠譜的，也不是很靈活。所以就用vue自己擼了一個，還望大家多多指教。
主要技術(shù)點：vue子組件的遞歸實現(xiàn)及相關(guān)樣式的實現(xiàn) 樹形表格實現(xiàn)

效果圖(Demo)

主要代碼

index.vue頁面實現(xiàn)業(yè)務(wù)邏輯代碼，比如樹表格上面的一些操作按鈕的實現(xiàn)及數(shù)據(jù)獲取。


原始數(shù)據(jù)`list`：是不包含子數(shù)據(jù)的數(shù)據(jù)結(jié)構(gòu)，即沒有層級結(jié)構(gòu)，例如：
[{id:111,parentId:0,name:"父及"},{id:111,parentId:111,name:"子級"}...]，通過parentId來獲取對應(yīng)父子層級結(jié)構(gòu)
`treeDataSource`：是樹表格需要的數(shù)據(jù)結(jié)構(gòu)，例如：
[{id:0,name:"父及",children:[{id:10,name:"子級",children:[]}]},...]
如果后臺返回給你的是原始數(shù)據(jù)格式，就可以用下面方法封裝成樹表格可以使用的數(shù)據(jù)結(jié)構(gòu)：
    getTreeData() {
      // 取父節(jié)點
      let parentArr = this.list.filter(l => l.parentId === 0)
      this.treeDataSource = this.getTreeData(this.list, parentArr)
    },
    // 這里處理沒有children結(jié)構(gòu)的數(shù)據(jù)
    getTreeData(list, dataArr) {
      dataArr.map((pNode, i) => {
        let childObj = []
        list.map((cNode, j) => {
          if (pNode.Id === cNode.parentId) {
            childObj.push(cNode)
          }
        })
        pNode.children = childObj
        if (childObj.length > 0) {
          this.getTreeData(list, childObj)
        }
      })
      return dataArr
    }
tree-table.vue頁面。此頁面是實現(xiàn)樹表格的關(guān)健頁面。主要代碼如下：

首先這里的子組件tree-item沒有在頁面上有引入，但是也可以正常使用。這里就是關(guān)健點，因為這個子組件是需要遞歸實現(xiàn)，所以，需要動態(tài)注冊到當(dāng)前組件中。代碼如下（由于代碼太多，先貼圖說明吧，點擊這里可以看源碼）：

這里子組件看起來是不是挺奇怪的，但是為了遞歸他本身，暫時也只想到這種辦法。如果有更好的辦法，歡迎留言指正。

那么，樹表格的結(jié)構(gòu)實現(xiàn)在哪里呢？？對，就是在子組件的模版(template)里面，這里就不貼代碼了，可以移步到源碼查看。

感謝

收到favourli的指正，現(xiàn)已將原有寫法更新,采用遞歸組件來實現(xiàn)，這樣頁面看起來就更清晰。
    components: {
            treeItem: () => import("./tree-item.vue")
    }
補充一點：不要只看js部分，css部分才是這個樹表格的關(guān)健所在。當(dāng)然里面我采用了大量的計算屬性去判斷各種樣式的展示，還有一種方法，就是在initTreeData方法里面去實現(xiàn)，這個方法就是處理或添加一些我們樹表格所使用的信息。比如我現(xiàn)在在里面實現(xiàn)的層級線的偏移量m.bLeft = level === 1 ? 34 : (level - 2) * 16 + 34 這個計算如果沒有看明白，可以留言。

最后，此篇乃我的開篇之作，如有問題，還請多多包含，多多指教?。。№槺憬o我好久沒有更新的博客打個廣告,
歡迎點擊（一座城池）

源碼地址github，歡迎star。

參考資源隔壁家的老黃

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

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

相關(guān)文章

  • 輕松實現(xiàn)可擴展的樹形表格

    摘要：由于目前還未開發(fā)樹形表格組件，也參閱了網(wǎng)絡(luò)上部分基于表格封裝的開源樹形組件，都沒有找的太理想可進行二次開發(fā)的開源項目，所以就萌生了自行開發(fā)樹形表格。 由于ElementUI目前還未開發(fā)樹形表格組件，也參閱了網(wǎng)絡(luò)上部分基于ElementUI表格封裝的開源樹形組件，都沒有找的太理想可進行二次開發(fā)的開源項目，所以就萌生了自行開發(fā)樹形表格。 本示例提供開發(fā)思路，移除了多余的樣式，比較適合新手入...

    harryhappy 評論0 收藏0

  • 【Vue項目總結(jié)】基于餓了么組件封裝

    摘要：項目中，組件是項目的基石，每個頁面都是組件來組裝起來，我司沒有自己的組件庫，選用的是組件庫，在它的基礎(chǔ)上再次封裝。部分代碼三級效果如下總結(jié)組件是項目的積木條，公用組件的封裝成功與否其實是對項目的開發(fā)效率有直接影響。 vue項目中，組件是項目的基石，每個頁面都是組件來組裝起來，我司沒有自己的組件庫，選用的是ElementUI組件庫，在它的基礎(chǔ)上再次封裝。 可編輯表格 由于是后臺管理項目，...

    YPHP 評論0 收藏0

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

    摘要：如下圖要實現(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)添加到下面表格中showImg(https://segment...

    yeyan1996 評論0 收藏0

  • 安利一款基于element的大數(shù)據(jù)樹形表格

    摘要：項目介紹一款基于改寫的支持樹形表格的大數(shù)據(jù)表格組件直接懟地址看看前端的小伙伴能不能給顆星呢，哈哈，歡迎提交和各種建議，討論 項目介紹 一款基于element-ui(2.9.1)改寫的支持樹形表格的大數(shù)據(jù)表格組件 ?? 直接懟地址 github: https://github.com/Spdino/vbt... 看看前端的小伙伴能不能給顆星呢， 哈哈，歡迎提交BUG和各種建議，討論···...

    BigNerdCoding 評論0 收藏0

  • D2 Crud，一款簡單易用的表格組件

    摘要：是一套基于和的表格組件。將的功能進行了封裝，并增加了表格的增刪改查數(shù)據(jù)校驗表格內(nèi)編輯等常用的功能。大部分功能可由配置實現(xiàn)，在實現(xiàn)并擴展了表格組件功能的同時，降低了開發(fā)難度，減少了代碼量，大大簡化了開發(fā)流程。 D2-Crud 是一套基于Vue.js 2.2.0+ 和 Element UI 2.0.0+ 的表格組件。D2-Crud 將 Element 的功能進行了封裝，并增加了表格的增刪改...

    fevin 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<