Element UI 樹形表格，TreeGrid或TreeTable實現

說明：

徹底基於Element UI表格組件實現，經過對數據增長字段實現。

直接從工程裏面拷的代碼，須要本身梳理一下，圖標用了font awesome。

先看效果圖：

VUE文件代碼：

<template>
  <div class="statistics common-content">
    <el-row class="searchForm">
      <el-col :span="24">
        <div class="grid-content">
          <span class="label">查詢條件：</span>
          <span class="label">過去</span>
          <el-input-number v-model="pastDays" controls-position="right" :min="0" :max="90"></el-input-number>
          <span class="label">天</span>
          <span class="attention">（注：0查詢全部）</span>
          <el-button type="primary" @click="search">查詢</el-button>
        </div>
      </el-col>
    </el-row>

    <el-table :data="statisticDatas" border style="width: 100%;" size="medium" :row-class-name="rowClassNameHandler">
      <el-table-column label="分類名稱" width="460" align="left" show-overflow-tooltip>
        <template slot-scope="scope">
          <span :style="{marginLeft: scope.row.level * 23 + 'px'}">&ensp;</span>
          <i v-if="scope.row.showChildren" :class="{'fa fa-folder-open':scope.row.showChildren, 'fa fa-file-o':!scope.row.hasChildren}" @click="onExpand(scope.row)" :style="{cursor:scope.row.hasChildren ? 'pointer' : 'normal'}"></i>
          <i v-else :class="{'fa fa-folder':scope.row.hasChildren, 'fa fa-file-o':!scope.row.hasChildren}" @click="onExpand(scope.row)" :style="{cursor:scope.row.hasChildren ? 'pointer' : 'normal'}"></i>
          <span :data-level="scope.row.level" :style="{marginLeft: 4 + 'px'}">{{ scope.row.categoryName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="categoryid" label="分類ID" width="80" align="center"></el-table-column>
      <el-table-column prop="parentcategoryid" label="父類ID" width="80" align="center"></el-table-column>
      <el-table-column prop="undeployed" label="模板（未發佈）" align="left"></el-table-column>
      <el-table-column prop="deployed" label="模板（已發佈）" align="left"></el-table-column>
      <el-table-column prop="edit" label="合同實例（編輯中）" align="left"></el-table-column>
      <el-table-column prop="completed" label="合同實例（完成）" align="left"></el-table-column>
    </el-table>
  </div>
</template>

<script src="./ContractStatistic.js"></script>

<style lang="less">
.statistics {
    padding: 10px;
    .hiddenRow {
        display: none;
    }
    .searchForm{
        padding: 10px;
        span.label{
            margin-right: 10px;
        }
        span.attention{
            color: #e50021;
        }
    }
    
}
</style>

js文件代碼：

import { commonService } from '@/service/commonService.js'

export default {
  name: 'ContractStatistic',
  data() {
    return {
      statisticDatas: [],
      pastDays: 0
    }
  },

  mounted() {
    let self = this
    self.loadStatisticData()
  },

  methods: {
    _processLevelStatisticData(dataArray) {
      let self = this

      let resultArray = [] // 一級欄目
      let level = 1
      for (let i = 0; i < dataArray.length; i++) {
        let item = dataArray[i]
        // 查找一級分類
        if (item.parentcategoryid === 0) {
          item['level'] = level
          resultArray.push(item)
          self._loadChildrenData(resultArray, dataArray, item, level + 1)
        }
      }
      return resultArray
    },

    _loadChildrenData(resultArray, originArray, item, level) {
      let self = this

      let deployed = 0
      let undeployed = 0
      let edit = 0
      let completed = 0

      for (let i = 0; i < originArray.length; i++) {
        let originItem = originArray[i]
        // 判斷是不是item項的子項
        if (originItem.parentcategoryid === item.categoryid) {
          item['hasChildren'] = true
          item['showChildren'] = false

          originItem['level'] = level
          originItem['visible'] = false // 子項默認隱藏
          originItem['hiddenByCategory'] = false

          resultArray.push(originItem)
          self._loadChildrenData(
            resultArray,
            originArray,
            originItem,
            level + 1
          )

          // 應該放在統計完子類數據以後
          deployed += originItem.deployed
          undeployed += originItem.undeployed
          edit += originItem.edit
          completed += originItem.completed
        }
      }
      // 計算子欄目統計合計
      item.deployed += deployed
      item.undeployed += undeployed
      item.edit += edit
      item.completed += completed
    },

    search() {
      console.log(this.pastDays)
      this.loadStatisticData()
    },

    loadStatisticData() {
      let self = this
      let params = {
        pastDays: self.pastDays
      }
      commonService.getGeneralStatistics(params).then(function(response) {
        let result = response.data
        let resultArray = self._processLevelStatisticData(result)
        self.statisticDatas = resultArray
      })
    },

    rowClassNameHandler({ row, rowIndex }) {
      // console.log(row['visible'])
      let className = 'pid-' + row.parentcategoryid
      if (
        row.parentcategoryid !== 0 &&
        (row['visible'] !== true || row['hiddenByCategory'] === true)
      ) {
        className += ' hiddenRow'
      }
      return className
    },

    onExpand(row) {
      let self = this

      let isShowChildren = !row['showChildren']
      row['showChildren'] = isShowChildren
      self._loadAllSubItems(row, true, isShowChildren)
    },

    _loadAllSubItems(item, isFirstLevlChildren, isShowChilren) {
      let self = this
      let dataArray = []
      for (let i = 0; i < self.statisticDatas.length; i++) {
        let tempItem = self.statisticDatas[i]
        if (tempItem.parentcategoryid === item.categoryid) {
          if (isFirstLevlChildren) {
            tempItem['visible'] = !tempItem['visible']
          }
          tempItem['hiddenByCategory'] = !isShowChilren

          dataArray.push(tempItem)
          let subItemArray = self._loadAllSubItems(
            tempItem,
            false,
            isShowChilren
          )
          dataArray = dataArray.concat(subItemArray)
        }
      }
      return dataArray
    }
  }
}

數據集（能夠直接替換進去看效果）：

[{"parentcategoryid":0,"edit":0,"undeployed":1,"deployed":0,"completed":0,"categoryName":"商業管理類","categoryid":1105},{"parentcategoryid":0,"edit":0,"undeployed":0,"deployed":1,"completed":0,"categoryName":"研發設計類","categoryid":1117},{"parentcategoryid":0,"edit":0,"undeployed":3,"deployed":0,"completed":0,"categoryName":"行政管理類","categoryid":1901},{"parentcategoryid":0,"edit":0,"undeployed":6,"deployed":0,"completed":0,"categoryName":"哈哈","categoryid":2402},{"parentcategoryid":0,"edit":10,"undeployed":2,"deployed":21,"completed":5,"categoryName":"測試分類","categoryid":3201},{"parentcategoryid":0,"edit":0,"undeployed":0,"deployed":0,"completed":0,"categoryName":"臨時建立","categoryid":4901},{"parentcategoryid":1,"edit":0,"undeployed":0,"deployed":0,"completed":0,"categoryName":"哈哈2","categoryid":3403},{"parentcategoryid":1,"edit":0,"undeployed":0,"deployed":0,"completed":0,"categoryName":"lzk","categoryid":3739},{"parentcategoryid":1,"edit":0,"undeployed":0,"deployed":0,"completed":0,"categoryName":"test","categoryid":3740},{"parentcategoryid":1,"edit":0,"undeployed":0,"deployed":0,"completed":0,"categoryName":"122","categoryid":4201},{"parentcategoryid":1,"edit":0,"undeployed":0,"deployed":0,"completed":0,"categoryName":"招標材設類（模板包）","categoryid":4602},{"parentcategoryid":1101,"edit":0,"undeployed":0,"deployed":0,"completed":0,"categoryName":"111","categoryid":1102},{"parentcategoryid":1101,"edit":0,"undeployed":0,"deployed":0,"completed":0,"categoryName":"11","categoryid":1103},{"parentcategoryid":1103,"edit":0,"undeployed":0,"deployed":0,"completed":0,"categoryName":"111","categoryid":1104},{"parentcategoryid":1105,"edit":0,"undeployed":0,"deployed":0,"completed":0,"categoryName":"財務","categoryid":1106},{"parentcategoryid":1105,"edit":0,"undeployed":0,"deployed":0,"completed":0,"categoryName":"銷售","categoryid":1109},{"parentcategoryid":1105,"edit":0,"undeployed":0,"deployed":0,"completed":0,"categoryName":"信息","categoryid":1110},{"parentcategoryid":1105,"edit":0,"undeployed":0,"deployed":0,"completed":0,"categoryName":"運營","categoryid":1111},{"parentcategoryid":1105,"edit":0,"undeployed":0,"deployed":0,"completed":0,"categoryName":"合同","categoryid":1112},{"parentcategoryid":1105,"edit":0,"undeployed":0,"deployed":0,"completed":0,"categoryName":"重慶","categoryid":1114},{"parentcategoryid":1105,"edit":0,"undeployed":0,"deployed":0,"completed":0,"categoryName":"長沙","categoryid":1115},{"parentcategoryid":1105,"edit":0,"undeployed":0,"deployed":0,"completed":0,"categoryName":"成都","categoryid":1121},{"parentcategoryid":1105,"edit":0,"undeployed":0,"deployed":0,"completed":0,"categoryName":"武漢","categoryid":1122},{"parentcategoryid":1105,"edit":0,"undeployed":0,"deployed":0,"completed":0,"categoryName":"合同模板管理","categoryid":1902},{"parentcategoryid":1106,"edit":0,"undeployed":0,"deployed":0,"completed":0,"categoryName":"稅務","categoryid":1107},{"parentcategoryid":1114,"edit":0,"undeployed":0,"deployed":0,"completed":0,"categoryName":"222","categoryid":2801},{"parentcategoryid":1114,"edit":0,"undeployed":0,"deployed":0,"completed":0,"categoryName":"555","categoryid":2902},{"parentcategoryid":1114,"edit":0,"undeployed":0,"deployed":0,"completed":0,"categoryName":"111","categoryid":2903},{"parentcategoryid":1114,"edit":0,"undeployed":0,"deployed":0,"completed":0,"categoryName":"不能沒有名稱啊","categoryid":2904},{"parentcategoryid":1117,"edit":0,"undeployed":0,"deployed":0,"completed":0,"categoryName":"解決哈哈啥哈","categoryid":1601},{"parentcategoryid":1117,"edit":0,"undeployed":0,"deployed":1,"completed":2,"categoryName":"主合同","categoryid":2701},{"parentcategoryid":1601,"edit":0,"undeployed":0,"deployed":0,"completed":0,"categoryName":"測試","categoryid":2601},{"parentcategoryid":1902,"edit":0,"undeployed":0,"deployed":0,"completed":0,"categoryName":"商業管理類","categoryid":1903},{"parentcategoryid":1902,"edit":0,"undeployed":0,"deployed":0,"completed":0,"categoryName":"研發設計類","categoryid":1904},{"parentcategoryid":1902,"edit":0,"undeployed":0,"deployed":0,"completed":0,"categoryName":"招標材設類","categoryid":1905},{"parentcategoryid":2402,"edit":0,"undeployed":0,"deployed":0,"completed":0,"categoryName":"總包","categoryid":2403},{"parentcategoryid":2403,"edit":0,"undeployed":0,"deployed":0,"completed":0,"categoryName":"主合同","categoryid":2404},{"parentcategoryid":2403,"edit":0,"undeployed":0,"deployed":0,"completed":0,"categoryName":"合同附件","categoryid":2405},{"parentcategoryid":2403,"edit":0,"undeployed":0,"deployed":0,"completed":0,"categoryName":"工程標準","categoryid":2406},{"parentcategoryid":2601,"edit":0,"undeployed":0,"deployed":0,"completed":0,"categoryName":"測試技術框架是不是","categoryid":3001},{"parentcategoryid":2801,"edit":0,"undeployed":0,"deployed":0,"completed":0,"categoryName":"55555555555","categoryid":2802},{"parentcategoryid":2801,"edit":0,"undeployed":0,"deployed":0,"completed":0,"categoryName":"222","categoryid":2901},{"parentcategoryid":2802,"edit":0,"undeployed":0,"deployed":0,"completed":0,"categoryName":"6666666666","categoryid":2803},{"parentcategoryid":3201,"edit":7,"undeployed":0,"deployed":3,"completed":3,"categoryName":"222","categoryid":3906},{"parentcategoryid":3201,"edit":0,"undeployed":0,"deployed":0,"completed":0,"categoryName":"5","categoryid":3907},{"parentcategoryid":3201,"edit":0,"undeployed":6,"deployed":0,"completed":0,"categoryName":"6","categoryid":3908},{"parentcategoryid":3201,"edit":0,"undeployed":0,"deployed":0,"completed":0,"categoryName":"附件遷移測試","categoryid":4501},{"parentcategoryid":3201,"edit":6,"undeployed":0,"deployed":2,"completed":1,"categoryName":"模板測試","categoryid":4601},{"parentcategoryid":3201,"edit":0,"undeployed":0,"deployed":0,"completed":0,"categoryName":"11","categoryid":4702},{"parentcategoryid":3201,"edit":0,"undeployed":1,"deployed":0,"completed":0,"categoryName":"測試1","categoryid":4802},{"parentcategoryid":3403,"edit":0,"undeployed":0,"deployed":0,"completed":0,"categoryName":"11111","categoryid":3708},{"parentcategoryid":3403,"edit":0,"undeployed":0,"deployed":0,"completed":0,"categoryName":"11113","categoryid":3711},{"parentcategoryid":3403,"edit":0,"undeployed":0,"deployed":0,"completed":0,"categoryName":"test2","categoryid":3721},{"parentcategoryid":3403,"edit":0,"undeployed":0,"deployed":0,"completed":0,"categoryName":"test2","categoryid":3732},{"parentcategoryid":3403,"edit":0,"undeployed":0,"deployed":0,"completed":0,"categoryName":"test2","categoryid":3733},{"parentcategoryid":3403,"edit":0,"undeployed":0,"deployed":0,"completed":0,"categoryName":"test2","categoryid":3734},{"parentcategoryid":3403,"edit":0,"undeployed":0,"deployed":0,"completed":0,"categoryName":"test2","categoryid":3735},{"parentcategoryid":3403,"edit":0,"undeployed":0,"deployed":0,"completed":0,"categoryName":"1","categoryid":3743},{"parentcategoryid":3403,"edit":0,"undeployed":0,"deployed":0,"completed":0,"categoryName":"test99","categoryid":3747},{"parentcategoryid":3403,"edit":0,"undeployed":0,"deployed":0,"completed":0,"categoryName":"test98","categoryid":3748},{"parentcategoryid":3403,"edit":0,"undeployed":0,"deployed":0,"completed":0,"categoryName":"test97","categoryid":3749},{"parentcategoryid":3403,"edit":0,"undeployed":0,"deployed":0,"completed":0,"categoryName":"test01","categoryid":3802},{"parentcategoryid":3403,"edit":0,"undeployed":0,"deployed":0,"completed":0,"categoryName":"88","categoryid":3909},{"parentcategoryid":3403,"edit":0,"undeployed":0,"deployed":0,"completed":0,"categoryName":"999","categoryid":4002},{"parentcategoryid":3403,"edit":0,"undeployed":0,"deployed":0,"completed":0,"categoryName":"2","categoryid":4202},{"parentcategoryid":3403,"edit":0,"undeployed":0,"deployed":0,"completed":0,"categoryName":"3","categoryid":4203},{"parentcategoryid":3403,"edit":0,"undeployed":0,"deployed":0,"completed":0,"categoryName":"上升","categoryid":4701},{"parentcategoryid":3740,"edit":0,"undeployed":0,"deployed":0,"completed":0,"categoryName":"222","categoryid":3746},{"parentcategoryid":3743,"edit":0,"undeployed":0,"deployed":0,"completed":0,"categoryName":"1","categoryid":3744},{"parentcategoryid":4201,"edit":0,"undeployed":0,"deployed":0,"completed":0,"categoryName":"77777","categoryid":4404}]