vue2 + element ui el-table树形结构表格 改造为 树懒加载

最近遇到一个需求，树形结构数据，需要在界面有限的区域展示多个字段内容，且允许调整每个字段内容的宽度大小，刚开始是直接用el-tree，将字段拼接展示，但效果不佳，后面试着用el-table的树形结构表格改造，以下是我的实现方法，可参考

以下代码是基于vue2 编写

<template>
  <div>
           <el-table
            v-if="taskCode"
            ref="refLeftTable"
            :data="leftTableData"
            :load="leftTableLoad"
            lazy
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
            :row-class-name="leftTableRowClassName"
            :expand-row-keys="defaultExpandedKeysIdList"
            row-key="id"
            height="100%"
            border
            highlight-current-row
            style="width: 100%"
            class="leftTable"
            @expand-change="handleLeftExpandChange"
          >
            <el-table-column
              v-for="(item, index) in viewColumns"
              :key="index"
              :fixed="item.fixed"
              :prop="item.prop"
              :align="item.align"
              :label="item.label"
              :min-width="item.width"
              show-overflow-tooltip
            />
          </el-table>
    </div>
</template> 
<script>
export default {
  components: { },
  data(){
      return{
          leftTableData: []
          defaultExpandedKeysIdList: ['root'],
          viewColumns: [
              { prop: 'name', width: '120', align: 'left', label: '字段1', fixed: false },
              { prop: 'aa', width: '120', align: 'left', label: '字段2', fixed: false },
              { prop: 'bb', width: '50', align: 'left', label: '字段3', fixed: false },
              { prop: 'cc', width: '50', align: 'left', label: '字段4', fixed: false },
              { prop: 'dd', width: '50', align: 'left', label: '字段5', fixed: false }
            ],
          currentParentId: '',
          tableTreeRefreshTool:
                
      }        
  },
  created:{
      this.leftTableData = [{ pid: '0', id: 'root', name:‘一级节点’, children: [], hasChildren: true, level: 1 }]
      this.leftTableCurrentRow = this.leftTableData[0]
  },
  mounted:{
    this.$refs.refLeftTable.store.loadOrToggle(this.leftTableData[0])// 展开根节点
    this.$refs.refLeftTable.setCurrentRow(this.leftTableData[0]) // 设置根节点选中
  },
  methods:{
    // 左侧树懒加载 load事件
    async leftTableLoad(tree, treeNode, resolve) {

      this.currentParentId = tree.id

      this.tableTreeRefreshTool[tree.id] = {}

      this.tableTreeRefreshTool[tree.id].resolve = resolve

      this.tableTreeRefreshTool[tree.id].expandCount = 0

      resolve(await 获取数据())
    },

    // 左侧表格收缩展开事件
    async handleLeftExpandChange(row, expanded) {
      const number = this.defaultExpandedKeysIdList.indexOf(row.id)
      if (expanded) {
        this.defaultExpandedKeysIdList.indexOf(row.id) === -1 ? this.defaultExpandedKeysIdList.push(row.id) : ''
      } else {
        this.defaultExpandedKeysIdList.splice(number, 1)
      }

      // 获取到之前保存的全局变量
      const curr = this.tableTreeRefreshTool[row.id]
      // 展开次数 +1
      curr.expandCount++
      // 如果是展开状态，且展开次数大于1，且上一次的状态为折叠，则请求api数据，更新子菜单
      if (expanded && curr.expandCount > 1 && !curr.prevStatus) {
        if (row.level === 1) {
          curr.resolve(await  数据（）)
        }
        if (row.level === 2) {
          curr.resolve(await 数据（）)
        }
      }
      // 保存本次的展开或折叠状态，用于下次判断
      curr.prevStatus = expanded
    },  
    // 左侧树刷新节点
    async leftRefreshTableData(row) {
      const curr = this.tableTreeRefreshTool[row.id]
      if (curr) {
        curr.resolve(await 获取数据())
      }
    }
  }
}
</script>   
<style>
::v-deep .leftTable td.el-table__cell {
  border-bottom: none;
  border-right: none;
}
::v-deep .leftTable .el-table__body .el-table__cell {
  padding: 2px 0px;
}
</style>  
 

由于表格有单元格 需要改造成树的样式 找到单元格的border样式 设置为none

<style>
::v-deep .leftTable td.el-table__cell {
  border-bottom: none;
  border-right: none;
}
::v-deep .leftTable .el-table__body .el-table__cell {
  padding: 2px 0px;
}
</style> 

由于树形结构表格的懒加载需要展开节点时才会触发，初始无法自动触发懒加载方法，翻看源码node_modules\element-ui\packages\table\src\store\tree.js 中

node_modules\element-ui\packages\table\src\config.js

于是我就直接在onmounted中手动调用了store.loadOrToggle这个方法。

 mounted:{
    this.$refs.refLeftTable.store.loadOrToggle(this.leftTableData[0])
    this.$refs.refLeftTable.setCurrentRow(this.leftTableData[0])
  },