基于element-plus2.5.10 table组件实现分类table

谁践踏了优雅 2024-04-01 11:50 56阅读 0赞

#### 实现效果 ####

![在这里插入图片描述][b096cb00f4524e1e880c77b22d8b0b7d.png]

<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>

[b096cb00f4524e1e880c77b22d8b0b7d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/504b643b02e3447c904de0d85eec43dd.png