如何將ElementUI表格變身成樹(shù)形表格

這篇文章給大家分享的是有關(guān)如何將ElementUI表格變身成樹(shù)形表格的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

由于ElementUI目前還未開(kāi)發(fā)樹(shù)形表格組件，也參閱了網(wǎng)絡(luò)上部分基于ElementUI表格封裝的開(kāi)源樹(shù)形組件，如果想進(jìn)行二次開(kāi)發(fā)的話都不太理想，所以就萌生了自行開(kāi)發(fā)樹(shù)形表格。

本示例提供開(kāi)發(fā)思路，移除了多余的樣式，比較適合新手入門學(xué)習(xí)，如果應(yīng)用于實(shí)際項(xiàng)目還請(qǐng)自行封裝。

目前還僅僅實(shí)現(xiàn)了視覺(jué)的樹(shù)結(jié)構(gòu)的層級(jí)效果和控制結(jié)構(gòu)的顯示隱藏，后續(xù)還會(huì)進(jìn)行不斷的完善和優(yōu)化，有必要的話會(huì)對(duì)組件進(jìn)行二次封裝，有點(diǎn)在重復(fù)造論的感覺(jué)哈。

效果圖

完整代碼

頁(yè)面(tree-table.vue)

<template>
 <div>
  TreeTable
  <el-table :data="list" :row- border>
   <el-table-column type="selection" width="55"></el-table-column>
   <el-table-column prop="id" label="ID" width="180">
    <template slot-scope="scope">
     <span class="collapse"
        :class="collapseClass(scope.row)"
        :
        @click="handleCollapseClick(scope.row)">
     </span>
     <span>{{ scope.row.id }}</span>
    </template>
   </el-table-column>
   <el-table-column prop="name" label="NAME"></el-table-column>
  </el-table>
 </div>
</template>

<script lang="ts">
  import {Component, Vue} from 'vue-property-decorator'
  // 引入兩個(gè)封裝好的工具方法
  import { arrayToTree } from './utils/array.js'
  import { ergodicTree } from './utils/tree.js'

  @Component
  export default class TreeTable extends Vue {
    private list: object[] = [];
    private tree: object[] = [];

    created() {
      // 準(zhǔn)備一組含有父子級(jí)關(guān)系的一維數(shù)組方便示例測(cè)試
      // 在實(shí)際項(xiàng)目應(yīng)用中，理應(yīng)通過(guò)后端接口返回
      let _list = [
        {
          id: 'a',
          pid: '',
          name: '部門a',
          children: []
        },
        {
          id: 'a1',
          pid: 'a',
          name: '子部門a1',
          children: []
        },
        {
          id: 'a2',
          pid: 'a',
          name: '子部門a2',
          children: []
        },
        {
          id: 'a2-1',
          pid: 'a2',
          name: '子部門a2-1',
          children: []
        },
        {
          id: 'a2-2',
          pid: 'a2',
          name: '子部門a2-2',
          children: []
        },
        {
          id: 'a3',
          pid: 'a',
          name: '子部門a3',
          children: []
        },
        {
          id: 'a3-1',
          pid: 'a3',
          name: '子部門a3-1',
          children: []
        },
        {
          id: 'b',
          pid: '',
          name: '部門b',
          children: []
        },
        {
          id: 'b1',
          pid: 'b',
          name: '子部門b1',
          children: []
        },
        {
          id: 'c',
          pid: '',
          name: '部門c',
          children: []
        },
      ];
      
      // 將一維數(shù)組轉(zhuǎn)成樹(shù)形結(jié)構(gòu)并存儲(chǔ)于tree變量
      this.tree = arrayToTree(_list);
      
      // 考慮到實(shí)際應(yīng)用過(guò)程中接口返回的數(shù)據(jù)是無(wú)序的，所以我們對(duì)tree進(jìn)行先序遍歷將節(jié)點(diǎn)一一插入到list變量
      this.list = [];
      ergodicTree(this.tree, (node: any) => {
        this.list.push(node);
        
        // 遍歷過(guò)程中并對(duì)每個(gè)節(jié)點(diǎn)掛載open和show屬性
        // open：控制節(jié)點(diǎn)的打開(kāi)和關(guān)閉
        // show：控制節(jié)點(diǎn)的顯示和隱藏
        this.$set(node, 'open', true);
        this.$set(node, 'show', true)
      })
    }

    // 控制行的顯示和隱藏
    tableRowStyle(scope: any) {
      return {
        'display': scope.row.show ? '' : 'none'
      }
    }

    // 通過(guò)每個(gè)節(jié)點(diǎn)的深度，設(shè)置行的縮進(jìn)實(shí)現(xiàn)視覺(jué)上的層級(jí)效果
    tableRowPaddingStyle(row: any) {
      return {
        'margin-left': `${(row._depth - 1) * 24}px`
      }
    }

    // 控制展開(kāi)按鈕的展開(kāi)和關(guān)閉狀態(tài)
    collapseClass(row: any) {
      return {
        'collapse--open': row.open == false && row.children && row.children.length > 0,
        'collapse--close': row.open == true && row.children && row.children.length > 0
      }
    }

    // 處理展開(kāi)按鈕的點(diǎn)擊事件
    handleCollapseClick(row: any) {
      const _open = row.open;
      // 通過(guò)節(jié)點(diǎn)訪問(wèn)路徑控制節(jié)點(diǎn)的顯示隱藏，由于內(nèi)存指針的關(guān)系list和tree的節(jié)點(diǎn)操作都會(huì)相互影響
      ergodicTree(this.tree, (node: any) => {
        node._idPath.forEach((pathId: any) => {
          if (pathId == row.id) {
            this.$set(node, 'show', !_open);
            this.$set(node, 'open', !_open)
          }
        })
      });
      row.show = true;
      row.open = !_open;
    }
  }
</script>

<style lang="scss" scoped>
 .collapse {
  display: inline-block;
  width: 8px;
  cursor: pointer;
  margin-right: 8px;
 }

 .collapse--open:before {
  content: '+';
 }

 .collapse--close:before {
  content: '-';
 }
</style>

工具方法

考慮數(shù)組轉(zhuǎn)樹(shù)和遍歷樹(shù)都是在實(shí)際項(xiàng)目中都是非常常用的，所以這邊對(duì)這兩個(gè)方法進(jìn)行了封裝。

數(shù)組轉(zhuǎn)樹(shù)結(jié)構(gòu)(./utils/array.ts)

export function arrayToTree(list: object[], props = {id: 'id', pid: 'pid', children: 'children'}) {
      let tree: object[] = [];
      let map: any = {};

      let listLength = list.length;
      for (let i = 0; i < listLength; i++) {
        let node: any = list[i];
        let nodeId: any = node[props.id];
        map[nodeId] = node;
      }

      for (let i = 0; i < listLength; i++) {
        let node: any = list[i];
        let nodePid: any = node[props.pid];
        let parentNode: any = map[nodePid];
        if (parentNode) {
          parentNode[props.children] = parentNode[props.children] || [];
          parentNode[props.children].push(node)
        } else {
          tree.push(node)
        }
      }

      return tree
    }

遍歷樹(shù)結(jié)構(gòu)(./utils/tree.ts)

結(jié)合實(shí)際項(xiàng)目應(yīng)用，我們采用了先序遍歷法對(duì)樹(shù)進(jìn)行遍歷，為了方便在業(yè)務(wù)代碼里的應(yīng)用，在遍歷過(guò)程中會(huì)對(duì)每個(gè)節(jié)點(diǎn)掛載節(jié)點(diǎn)訪問(wèn)路徑 _idPath 屬性和節(jié)點(diǎn)深度 _depth 屬性。

export function ergodicTree(tree: object[], callback: any = () => {}, props = {id: 'id', pid: 'pid', children: 'children'}) {
      function _ergodicTree(tree: object[], parentIdPath?: any[], depth: number = 0) {
        const treeLength = tree.length;
        for (let i = 0; i < treeLength; i++) {
          let node: any = tree[i];
          const _idPath: any[] = parentIdPath ? [...parentIdPath, node[props.id]] : [node[props.id]];
          const _depth: number = depth + 1;
          node._idPath = _idPath;
          node._depth = _depth;
          callback(node);
          if (node[props.children] && node[props.children] instanceof Array) {
            _ergodicTree(node[props.children], _idPath, _depth)
          }
        }
      }

      _ergodicTree(tree);
      return tree;
    }

感謝各位的閱讀！關(guān)于“如何將ElementUI表格變身成樹(shù)形表格”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！