【el-table】树形结构——合并单元格 / 子级禁用 / 复选框 / 加载子级 / 子级数据更新

<template>
  <div>
    <el-table
      ref="tableRef"
      :data="tableData"
      :load="loadChildren"
      :span-method="arraySpanMethod"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      border
      disabled
      lazy
      row-key="id"
      size="small"
      width="100%"
      @selection-change="handleSelectionChange">
      <el-table-column :selectable="selectable" type="selection" width="55"></el-table-column>
      <el-table-column label="下单时间" prop="orderTime" width="190" />
      <el-table-column label="包含食堂" prop="canteenName" />
      <el-table-column label="订单编号" prop="serialNumber" />
      <el-table-column label="供应商名称" prop="supplierName" />
      <el-table-column label="供应商联系方式" prop="supplierMobile" />
      <el-table-column label="下单人员" prop="orderTaker" />
      <el-table-column fixed="right" label="操作" width="130">
        <template v-if="scope.row.level == 1" slot-scope="scope">
          <el-button
            class="primary"
            size="small"
            type="text"
            @click="handelApprove(scope.row)">
            审核
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="pageData.current"
      :page-size="pageData.size"
      :page-sizes="[10, 20, 50, 100]"
      :total="pageData.total"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [],
      pageData: {
        total: 0,
        size: 10,
        current: 1
      },
      mapstableTree: new Map(),
    }
  },
  methods: {
    // 合并单元格
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (row.level === 1) {
        if (columnIndex === 3) {
          return [1, 4]
        } else if (
          columnIndex !== 0 &&
          columnIndex !== 1 &&
          columnIndex !== 2 &&
          columnIndex !== 7 &&
          columnIndex !== 8
        ) {
          return [0, 0]
        }
      }
    },
    // 子级禁用
    selectable(row, index) {
      if (row.level === 1) {
        return true
      } else {
        return false
      }
    },
    // 复选框
    handleSelectionChange(val) {
      // this.batchApproval = val.map((res) => res.id)
    },
    // 列表数据
    getTabelData() {
      this.tableData = []
      api({}).then((res) => {
        this.tableData = res.result.records
        this.tableData.map((item, index) => {
          item.hasChildren = true
          item.id = index + 1
          item.level = 1
        })
        this.pageData.total = res.result.total
        this.pageData.current = res.result.current
      })
    },
    // 加载子级
    loadChildren(tree, treeNode, resolve) {
      this.mapstableTree.set(tree.deliveryDate, { tree, treeNode, resolve })
      setTimeout(() => {
        api({
          date: tree.orderTime,
          auditStatus: tree.auditStatus,
          canteenId: tree.canteenId
        }).then((res) => {
          resolve(res.result)
        })
      }, 100)
    },
    // 二级操作改变数据状态，重新加载子数据
    handelApprove(data) {
      this.refreshLoadTree(this.$refs.tableRef.store.states.lazyTreeNodeMap, this.mapstableTree, data.parentId)
    },
    // 子级数据更新
    refreshLoadTree(lazyTreeNodeMap, maps, parentId) {
      if (maps.get(parentId)) {
        const { tree, treeNode, resolve } = maps.get(parentId)
        this.$set(lazyTreeNodeMap, parentId, [])
        if (tree) {
          // 重新执行父节点加载子级操作
          this.loadChildren(tree, treeNode, resolve)
        }
      }
    },
    // 分页条数改变事件
    handleSizeChange(val) {
      this.pageData.size = val
      this.getTabelData()
    },
    // 分页页码改变事件
    handleCurrentChange(val) {
      this.pageData.current = val
      this.getTabelData()
    }
  }
}
</script>
<style lang="scss" scoped></style>