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

yedf 發(fā)布于2019-08-26 12:09 / 2398人閱讀

摘要：此頁面是實(shí)現(xiàn)樹表格的關(guān)健頁面。這里就是關(guān)健點(diǎn)，因?yàn)檫@個(gè)子組件是需要遞歸實(shí)現(xiàn)，所以，需要?jiǎng)討B(tài)注冊(cè)到當(dāng)前組件中。補(bǔ)充一點(diǎn)不要只看部分，部分才是這個(gè)樹表格的關(guān)健所在。

基于vue.js實(shí)現(xiàn)樹形表格的封裝（vue-tree-table） 前言

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

主要技術(shù)點(diǎn)：vue子組件的遞歸實(shí)現(xiàn)及相關(guān)樣式的實(shí)現(xiàn) 樹形表格實(shí)現(xiàn)

效果圖(Demo)

主要代碼

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

原始數(shù)據(jù)`list`：是不包含子數(shù)據(jù)的數(shù)據(jù)結(jié)構(gòu)，即沒有層級(jí)結(jié)構(gòu)，例如：
[{id:111,parentId:0,name:"父及"},{id:111,parentId:111,name:"子級(jí)"}...]，通過parentId來獲取對(duì)應(yīng)父子層級(jí)結(jié)構(gòu)
`treeDataSource`：是樹表格需要的數(shù)據(jù)結(jié)構(gòu)，例如：
[{id:0,name:"父及",children:[{id:10,name:"子級(jí)",children:[]}]},...]

如果后臺(tái)返回給你的是原始數(shù)據(jù)格式，就可以用下面方法封裝成樹表格可以使用的數(shù)據(jù)結(jié)構(gòu)：

    getTreeData() {
      // 取父節(jié)點(diǎn)
      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頁面。此頁面是實(shí)現(xiàn)樹表格的關(guān)健頁面。主要代碼如下：

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

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

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

感謝

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

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

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

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

源碼地址github，歡迎star。

參考資源隔壁家的老黃

云服務(wù)器 GPU云服務(wù)器基于webrtc的電話回聲消除的研究與實(shí)現(xiàn) 基于webrtc的視頻會(huì)議系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn) 基于防火墻技術(shù)的校園網(wǎng)絡(luò)安全設(shè)計(jì)與實(shí)現(xiàn) java實(shí)現(xiàn)樹形結(jié)構(gòu)