實(shí)現(xiàn)一個(gè)可無(wú)限折疊的table

如何在table上實(shí)現(xiàn)一個(gè)可折疊展開(kāi)子節(jié)點(diǎn)的table?先看下最終實(shí)現(xiàn)效果圖:

技術(shù)棧:

  • vue
  • javascript

動(dòng)手實(shí)現(xiàn)

為有興趣的同學(xué)先準(zhǔn)備一下大綱目錄預(yù)覽,為了不讓同學(xué)們看入迷,讓大綱為你 指明前行的道路 !

大綱預(yù)覽

  1. 明確需求
  2. 樹(shù)形結(jié)構(gòu)數(shù)據(jù)準(zhǔn)備
  3. 數(shù)據(jù)扁平化 (重點(diǎn))
  4. 層級(jí)展示
  5. 折疊展開(kāi)功能實(shí)現(xiàn)

1. 明確需求

實(shí)現(xiàn)一個(gè)可折疊展開(kāi)的table,看上去很迷茫的樣子。但實(shí)際上就是:

  1. table 上點(diǎn)擊時(shí)對(duì)其 子集 進(jìn)行 隱藏顯示
  2. 通過(guò)縮進(jìn)的距離來(lái)表現(xiàn)層級(jí)關(guān)系

在代碼里很東西其實(shí)都是偽裝出來(lái)的,例如我們要實(shí)現(xiàn)的這個(gè)可無(wú)限折疊的table。但在用戶操作的時(shí)候看來(lái)就是那么回事咯 ~ ~

2. 樹(shù)形結(jié)構(gòu)數(shù)據(jù)準(zhǔn)備

這里已經(jīng)準(zhǔn)備好了樹(shù)形結(jié)構(gòu)的數(shù)據(jù),存放于 data.js 的文件中,節(jié)點(diǎn)通過(guò) Children 連接。如標(biāo)題所說(shuō),可無(wú)限折疊,無(wú)論這里的樹(shù)形數(shù)據(jù)有多少層級(jí),都能給它辦妥當(dāng)了。先把牛吹在這,接下來(lái)看看如何實(shí)現(xiàn)。

3. 數(shù)據(jù)扁平化

條件梳理

樹(shù)形結(jié)構(gòu)數(shù)據(jù)扁平化并不難,難點(diǎn)在于在扁平化的時(shí)候要做的處理。這里深入梳理一下:

  1. 我們將一個(gè)樹(shù)節(jié)點(diǎn)的所有父節(jié)點(diǎn)稱為 family ,好比我們要知道的自己的大領(lǐng)導(dǎo)、二領(lǐng)導(dǎo)、直系領(lǐng)導(dǎo)...因?yàn)樗麄兊拿钤蹅兌嫉脠?zhí)行。在這個(gè)表單中就是當(dāng)父節(jié)點(diǎn)或更高的祖輩節(jié)點(diǎn)發(fā)命令時(shí),做一個(gè)懂事的子節(jié)點(diǎn)當(dāng)然要聽(tīng)話辦事。 __family 字段就是用來(lái)存放所有所有的父節(jié)點(diǎn)的數(shù)組。在扁平化數(shù)據(jù)是通過(guò) 數(shù)組字段 __family 收集其所有 父節(jié)點(diǎn) 。這樣一來(lái),就像族譜一樣,就能清晰知道該節(jié)點(diǎn)的所有父節(jié)點(diǎn)。 至于如和折疊收縮呢? **我們通過(guò)一個(gè) foldList 數(shù)組來(lái)記錄要 **折疊的節(jié)點(diǎn) ,也稱為 死亡名單 。如此一來(lái),只要 包含父節(jié)點(diǎn)標(biāo)識(shí)節(jié)點(diǎn) 就乖乖的隱藏吧。

  2. 每個(gè)成員都因該是唯一的,那么我們?cè)诒闅v時(shí)都應(yīng)該為每個(gè)成員添加一個(gè)唯一標(biāo)識(shí) __identity 。正是上一個(gè)步驟中說(shuō)的 節(jié)點(diǎn)標(biāo)志

  3. 為了明確知道各個(gè)節(jié)點(diǎn)之間的層級(jí)關(guān)系,通過(guò) __level 明確層級(jí)關(guān)系。那么我們規(guī)定 __level 的值越小等級(jí)越高。 __level=0 代表首層節(jié)點(diǎn)。

  4. 既然是無(wú)限層級(jí),肯定是用遞歸來(lái)實(shí)現(xiàn)了。 formatConversion() 方法實(shí)現(xiàn)遞歸。 那何時(shí)跳出當(dāng)前遍歷的遞歸呢 ?當(dāng)前節(jié)點(diǎn)沒(méi)有子集時(shí) Children.length = 0 的時(shí)候跳出本次遞歸,進(jìn)行下一次遞歸。該方法可能需要花點(diǎn)時(shí)間理解,代碼里注釋已寫(xiě)的比較詳細(xì),有問(wèn)題歡迎留言溝通~~

數(shù)據(jù)扁平化

/*********************************
 ** Fn: formatConversion
 ** Intro: 將樹(shù)形接口數(shù)據(jù)扁平化
 ** @params: parent 為當(dāng)前累計(jì)的數(shù)組  也是最后返回的數(shù)組
 ** @params: children 為當(dāng)前節(jié)點(diǎn)仍需繼續(xù)扁平子節(jié)點(diǎn)的數(shù)據(jù)
 ** @params: index 默認(rèn)等于0, 用于在遞歸中進(jìn)行累計(jì)疊加 用于層級(jí)標(biāo)識(shí)
 ** @params: family 裝有當(dāng)前包含元素自身的所有父級(jí) 身份標(biāo)識(shí)
 ** @params: elderIdentity 父級(jí)的  唯一身份標(biāo)識(shí)
 ** Author: zyx
 *********************************/
    formatConversion (parent, children, index = 0, family = [], elderIdentity = 'x') {
      // children如果長(zhǎng)度等于0,則代表已經(jīng)到了最低層
      // let page = (this.startPage - 1) * 10
      if (children.length > 0) {
        children.map((x, i) => {
          // 設(shè)置 __level 標(biāo)志位 用于展示區(qū)分層級(jí)
          Vue.set(x, '__level', index)
          // 設(shè)置 __family 為家族關(guān)系 為所有父級(jí),包含本身在內(nèi)
          Vue.set(x, '__family', [...family, elderIdentity + '_' + i])
          // 本身的唯一標(biāo)識(shí)  可以理解為個(gè)人的身份證咯 一定唯一。
          Vue.set(x, '__identity', elderIdentity + '_' + i)
          parent.push(x)
          // 如果仍有子集,則進(jìn)行遞歸
          if (x.Children.length > 0) this.formatConversion(parent, x.Children, index + 1, [...family, elderIdentity + '_' + i], elderIdentity + '_' + i)
        })
      } return parent
    }

我們來(lái)對(duì)比一下扁平話的數(shù)據(jù)

  • 原數(shù)據(jù)
  • 扁平化后的數(shù)據(jù)

對(duì)比數(shù)據(jù)的前后,先明確(父節(jié)點(diǎn): Name: "App" ), (子節(jié)點(diǎn): Name: "企業(yè)查詢" )。我們先看看__level字段,分別對(duì)應(yīng)0和1,沒(méi)問(wèn)題。 __family 包含了本身節(jié)點(diǎn)。 __identity 的個(gè)格式就是 前綴 x 加上在 數(shù)據(jù)中的位置 。例如節(jié)點(diǎn) App 在數(shù)據(jù)中的位置是第一個(gè)節(jié)點(diǎn),那對(duì)應(yīng)的 __identity 即是 x_0 。 企業(yè)查詢 位于 App 節(jié)點(diǎn)下的第一個(gè)元素, 則在父節(jié)點(diǎn)的標(biāo)識(shí)的基礎(chǔ)上追加一位0 ,那對(duì)應(yīng)的 __identity 即是 x_0_0 。其他依次類推。一切已準(zhǔn)備妥當(dāng)~~

4. 層級(jí)展示

如圖所示:

如果展示層級(jí)呢?利用css即可實(shí)現(xiàn)

  • 字體圖標(biāo)準(zhǔn)備: 這里先補(bǔ)充一點(diǎn),這里涉及兩個(gè)字體圖標(biāo),圖中紅色框標(biāo)注的,資源存放于src目錄下的iconfont目錄下中。 層級(jí)最低的字段時(shí)不需要展示該圖標(biāo)呢 , 該如何判斷呢? 通過(guò)判斷當(dāng)前節(jié)點(diǎn)是否還有子集 params.Children.length === 0 即可判斷。若沒(méi)有子集則不設(shè)置字體圖標(biāo)即可。 點(diǎn)擊時(shí) 還需要對(duì) 圖標(biāo)進(jìn)行切換 ,這又如何實(shí)現(xiàn)呢?前臺(tái)提到過(guò)的 死亡名單 foldList ,如果該存在該名單中,代表該數(shù)據(jù)已經(jīng)被折疊,那返回折疊圖標(biāo)。否則返回展開(kāi)圖標(biāo)。如代碼:
//    html
<i :class="toggleFoldingClass(scope.row)"></i>

//    js methods:

    /*********************************
      ** Fn: toggleFoldingClass
      ** Intro: 如果子集長(zhǎng)度為0,則不返回字體圖標(biāo)。
      ** Intro: 如果子集長(zhǎng)度為不為0,根據(jù)foldList是否存在當(dāng)前節(jié)點(diǎn)的標(biāo)識(shí)返回相應(yīng)的折疊或展開(kāi)圖標(biāo)
      ** Intro: 關(guān)于class說(shuō)明:permission_placeholder返回一個(gè)占位符,具體查看class
      ** @params: params 當(dāng)前行的數(shù)據(jù)對(duì)象
      ** Author: zyx
    *********************************/
    toggleFoldingClass (params) {
      return params.Children.length === 0 ? 'permission_placeholder' : (this.foldList.indexOf(params.__identity) === -1 ? 'iconfont icon-minus-square-o' : 'iconfont icon-plussquareo')
    },
  • 層級(jí)展示: __level 字段就是這時(shí)候發(fā)揮用處。 __level 值越大,則將 margin-left 值增大。如代碼:
<p :style="`margin-left: ${scope.row.__level * 20}px;`">...

基本的樣子已經(jīng)有了,那接下來(lái)實(shí)現(xiàn)點(diǎn)擊功能。

5. 折疊展開(kāi)功能實(shí)現(xiàn)

記錄點(diǎn)擊的節(jié)點(diǎn)標(biāo)識(shí)

通過(guò) 死亡名單 foldList 來(lái)記錄點(diǎn)擊。點(diǎn)擊事件在點(diǎn)擊折疊展開(kāi)圖標(biāo)時(shí)觸發(fā) toggleFoldingStatus(scope.row) 事件,前面也說(shuō)過(guò), foldList 存在的標(biāo)識(shí),對(duì)于所有的子節(jié)點(diǎn)都要隱藏起來(lái)。如果 foldList 沒(méi)有數(shù)據(jù),則全部展開(kāi),萬(wàn)事大吉。代碼如圖所示,就是那么簡(jiǎn)單。

//    html
<i  @click="toggleFoldingStatus(scope.row)" class="permission_toggleFold" :class="toggleFoldingClass(scope.row)"></i>
//    js methods
    /*********************************
      ** Fn: toggleFoldingStatus
      ** Intro: 切換展開(kāi) 還是折疊
      ** @params: params 當(dāng)前點(diǎn)擊行的數(shù)據(jù)
      ** Author: zyx
    *********************************/
    toggleFoldingStatus (params) {
      this.foldList.includes(params.__identity) ? this.foldList.splice(this.foldList.indexOf(params.__identity), 1) : this.foldList.push(params.__identity)
    },

折疊展開(kāi)功能實(shí)現(xiàn)

萬(wàn)事俱備,只欠東風(fēng)。最后一件要做的大事就是根據(jù) 死亡名單 foldList 來(lái)進(jìn)行顯示和隱藏?cái)?shù)據(jù)。 這里借助el-table中的 row-style 實(shí)現(xiàn)。同學(xué)們也可以自己實(shí)現(xiàn)。來(lái)看下官方的說(shuō)明

![](http://upload-images.jianshu.io/upload_images/13661853-aeb3373889e7cc00.png!web?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

該方法就是為table中的每一行數(shù)據(jù)設(shè)置樣式。

/*********************************
 ** Fn: toggleDisplayTr
 ** Intro: 該方法會(huì)對(duì)每一行數(shù)據(jù)都做判斷 如果foldList 列表中的元素 也存在與當(dāng)前行的 __family列表中  則該行不展示
 ** @params:
 ** Author: zyx
 *********************************/
    toggleDisplayTr ({row, index}) {
      for (let i = 0; i < this.foldList.length; i++) {
        let item = this.foldList[i]
        // 如果foldList中元素存在于 row.__family中,則該行隱藏。  如果該行的自身標(biāo)識(shí)等于隱藏元素,則代表該元素就是折疊點(diǎn)
        if (row.__family.includes(item) && row.__identity !== item) return 'display:none;'
      }
      return ''
    },
  • 在來(lái)看看效果


錦上添花

如果數(shù)據(jù)太多的話,一個(gè)層級(jí)層級(jí)的去搜索確實(shí)也麻煩,所以那么我們?cè)賮?lái)添加兩個(gè)按鈕 全部折疊全部展開(kāi) 好了。 咨詢分析一下,其實(shí)這個(gè)功能很簡(jiǎn)單。還是關(guān)于前面提到過(guò)的 死亡名單foldList 。

  • 全部展開(kāi) : 如果 foldList 為空,則萬(wàn)事大吉,數(shù)據(jù)全部展開(kāi)。
  • 全部折疊 :我們的設(shè)計(jì)是只要存在于死亡名單的所有包含該標(biāo)識(shí)的節(jié)點(diǎn)都要隱藏。那么只要將所有的首層節(jié)點(diǎn)添加進(jìn)去就可以了。 this.foldList = this.tableListData.map(x => x.__identity) 即取出首層節(jié)點(diǎn)的標(biāo)識(shí)。

結(jié)語(yǔ)

更復(fù)雜的需求是結(jié)合分頁(yè),當(dāng)從其他頁(yè)回到之前頁(yè)時(shí),之前頁(yè)的折疊狀態(tài)要依舊保持。這里就不在說(shuō)明了,因?yàn)閼?yīng)用場(chǎng)景很少。

  • 點(diǎn)贊給個(gè)鼓勵(lì)喲~

文章出處:https://juejin.im/post/5be797456fb9a04a0378bb91。歡迎大家前去點(diǎn)贊支持~!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容