基于vue.js實現樹形表格的封裝

yedf 發布于2019-08-26 12:09 / 2357人閱讀

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

基于vue.js實現樹形表格的封裝（vue-tree-table） 前言

由于公司產品（基于vue.js）需要，要實現一個樹形表格的功能，百度、google找了一通，并沒有發現很靠譜的，也不是很靈活。所以就用vue自己擼了一個，還望大家多多指教。

主要技術點：vue子組件的遞歸實現及相關樣式的實現 樹形表格實現

效果圖(Demo)

主要代碼

index.vue頁面實現業務邏輯代碼，比如樹表格上面的一些操作按鈕的實現及數據獲取。

原始數據`list`：是不包含子數據的數據結構，即沒有層級結構，例如：
[{id:111,parentId:0,name:"父及"},{id:111,parentId:111,name:"子級"}...]，通過parentId來獲取對應父子層級結構
`treeDataSource`：是樹表格需要的數據結構，例如：
[{id:0,name:"父及",children:[{id:10,name:"子級",children:[]}]},...]

如果后臺返回給你的是原始數據格式，就可以用下面方法封裝成樹表格可以使用的數據結構：

    getTreeData() {
      // 取父節點
      let parentArr = this.list.filter(l => l.parentId === 0)
      this.treeDataSource = this.getTreeData(this.list, parentArr)
    },
    // 這里處理沒有children結構的數據
    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頁面。此頁面是實現樹表格的關健頁面。主要代碼如下：

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

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

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

感謝

收到favourli的指正，現已將原有寫法更新,采用遞歸組件來實現，這樣頁面看起來就更清晰。

    components: {
            treeItem: () => import("./tree-item.vue")
    }

補充一點：不要只看js部分，css部分才是這個樹表格的關健所在。當然里面我采用了大量的計算屬性去判斷各種樣式的展示，還有一種方法，就是在initTreeData方法里面去實現，這個方法就是處理或添加一些我們樹表格所使用的信息。比如我現在在里面實現的層級線的偏移量m.bLeft = level === 1 ? 34 : (level - 2) * 16 + 34 這個計算如果沒有看明白，可以留言。

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

源碼地址github，歡迎star。

參考資源隔壁家的老黃

GPU云服務器云服務器基于webrtc的電話回聲消除的研究與實現基于webrtc的視頻會議系統的設計與實現基于防火墻技術的校園網絡安全設計與實現 java實現樹形結構

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

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

輕松實現可擴展的樹形表格

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

harryhappy 2019-08-23 16:52 評論0 收藏0
【Vue項目總結】基于餓了么組件封裝

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

YPHP 2019-08-23 18:23 評論0 收藏0
VUE+element三級聯動或樹形菜單獲取最后一項,并加入到表格中

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

yeyan1996 2019-08-26 10:28 評論0 收藏0
安利一款基于element的大數據樹形表格

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

BigNerdCoding 2019-08-23 18:14 評論0 收藏0
D2 Crud，一款簡單易用的表格組件

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

fevin 2019-08-23 11:43 評論0 收藏0