[JavaScript知识库]基于element-plus2.5.10 table组件实现分类table

实现效果

<template>
  <div class="card">
    <el-table :data="tableData" style="width: 100%; margin-bottom: 20px" row-key="id" border default-expand-all :span-method="arraySpanMethod">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="序号" type="index" align="center" width="70" :index="indexMethod" />
      <el-table-column prop="date" label="date" align="center" width="180" />
      <el-table-column prop="name" label="Name" align="center" width="180" />
      <el-table-column prop="hello" label="hello" align="center" width="180" />
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          date: "2016-05-02",
          name: "wangxiaohu",
          hello: "1111",
          children: [
            {
              id: 10,
              date: "2016-05-01",
              name: "wangxiaohu",
              hello: "1111",
            },
            {
              id: 11,
              date: "2016-05-01",
              name: "wangxiaohu",
              hello: "1111",
            },
          ],
        },
        {
          id: 2,
          date: "2016-05-04",
          name: "wangxiaohu",
          hello: "1111",
        },
        {
          id: 3,
          date: "2016-05-02",
          name: "wangxiaohu",
          hello: "1111",
          children: [
            {
              id: 12,
              date: "2016-05-01",
              name: "wangxiaohu",
              hello: "1111",
            },
            {
              id: 13,
              date: "2016-05-01",
              name: "wangxiaohu",
              hello: "1111",
            },
          ],
        },
        {
          id: 4,
          date: "2016-05-02",
          name: "wangxiaohu",
          hello: "1111",
          children: [
            {
              id: 14,
              date: "2016-05-01",
              name: "wangxiaohu",
              hello: "1111",
            },
            {
              id: 15,
              date: "2016-05-01",
              name: "wangxiaohu",
              hello: "1111",
            },
          ],
        },
      ],
      treeArr: [],
    }
  },
  mounted() {
    // 树数组转扁平数组，用于indexMethod方法中自定义表格索引
    this.treeArr = this.treeToArray(this.tableData)
    // 只有没有子元素的行才有索引
    let index = 1
    for (const item of this.treeArr) {
      if (item.children && item.children.length) continue
      item.index = index
      index++
    }
    // 设置合并行的显示内容
    // 合并行显示文本为第二个key值，因为后端数据只是二级树，所以只处理了数据的第一级，想要显示的key值文本设置到第二个key值即可
    for (const item of this.tableData) {
      item.date = item.name
      // item.date = item.hello
    }
  },
  methods: {
    /** 自定义表格的索引,只有没有子元素的行才有索引 */
    indexMethod(index) {
      return this.treeArr[index].index ? this.treeArr[index].index : ""
    },
    /** 合并表格行 */
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      // 有子元素的行合并成一行
      if (row.children && row.children.length) {
        // 这个2是固定的，必须2的情况才能正常显示展开收起图标，这个是element-plus源码实现的问题，改不了
        if (columnIndex === 2) {
          // 获取一行表格的所有字段
          const keys = Object.keys(row)
          // 需要过滤掉children和id字段，列数+2，因为有选择框和序号的列数
          const columns = keys.filter(item => item !== "children" && item !== "id").length + 2
          return [1, columns]
        } else {
          return [0, 0]
        }
      }
    },
    /** 扁平数组转树结构数组，这里暂时用不上，可以用来处理后端传扁平数组的情况 */
    arrayToTree(arr) {
      const result = []
      const itemMap = {}
      for (const item of arr) {
        const ID = item.ID
        const PARENTID = item.PARENTID
        if (!itemMap[ID]) {
          itemMap[ID] = {
            children: [],
          }
        }
        itemMap[ID] = {
          ...item,
          children: itemMap[ID]["children"],
        }
        const treeItem = itemMap[ID]
        if (PARENTID === "-1") {
          result.push(treeItem)
        } else {
          if (!itemMap[PARENTID]) {
            itemMap[PARENTID] = {
              children: [],
            }
          }
          itemMap[PARENTID].children.push(treeItem)
        }
      }
      return result
    },
    /** 树结构数组转扁平数组 */
    treeToArray(tree) {
      const arr = []
      function recursiveFunction(tree) {
        for (let i = 0; i < tree.length; i++) {
          arr.push(tree[i])
          if (tree[i].children && tree[i].children.length) {
            recursiveFunction(tree[i].children)
          }
        }
      }
      recursiveFunction(tree)
      return arr
    },
  },
}
</script>
<style scoped lang="scss">
/* 设置表头背景色 */
:deep(.header) {
  background-color: #eef5f5 !important;
}
:deep(.el-table) {
  /* 解决索引不居中的问题 */
  .cell {
    @include flex;
    padding: 5px 0px;
  }

  .el-table__placeholder {
    display: none;
  }

  .is-center {
    .cell {
      justify-content: center;
    }
  }

  .is-left {
    .cell {
      padding-left: 30px;
    }
  }

  .el-table__row--level-0 {
    .cell {
      justify-content: flex-start;
      /* prettier-ignore */
      padding-left: 20PX;
    }
  }

  /* 替换默认展开收起图片 */
  .el-table__expand-icon {
    width: 16px;
    height: 16px;
    background: url("~@assets/imgs/tree/8.png") no-repeat;
    background-size: 100% 100%;

    .el-icon {
      display: none;
    }
  }
  .el-table__expand-icon--expanded {
    transform: none;
    background: url("~@assets/imgs/tree/9.png") no-repeat;
    background-size: 100% 100%;
  }
}
</style>