ElementUI-Table 行数列数合并

表格数据合并技巧

最新推荐文章于 2025-07-14 16:50:17 发布

原创最新推荐文章于 2025-07-14 16:50:17 发布 · 417 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #前端 #javascript

eleme 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一种高效的方法来合并表格中具有相同公司名称的行，通过使用数组来标记需要合并的行数，并提供了具体的实现步骤及代码示例。

后端返回的数据：

data:[
    {name: 'A公司', product: '喜之狗果冻'},
    {name: 'A公司', product: '喜之羊果冻'},
    {name: 'A公司', product: '喜之猫果冻'},
    {name: 'B工坊', product: '喜之鸡果冻'},
    {name: 'B工坊', product: '喜之鸭果冻'},
    {name: 'C工坊', product: '喜之牛果冻'},
    {name: 'C工坊', product: '喜之青蛙果冻'},
    {name: 'C工坊', product: '喜之蜗牛果冻'}
]

需要根据数据合并相同公司名的row，效果图如下：

在这里插入图片描述

方案

step1: 整理出当前数据需要从哪开始合并，且计算出合并多少行；

因为Table是一行一行遍历出来的，所以要给每一行一个标识，确定当前行要不要进行合并且合并多少行；
再根据Table提供的方法中的参数“rowIndex”确定当前行的标识，判断是否需要合并；
适合这种思想的标识方法是数组。因为要同时记录某条公司名重复出现的次数（要合并的行数）和在Table中是否合并（是否有合并的行数）。如：[3, 0, 0, 5, 0, 0, 0, 0]，其中“3”和“5”代表合并的行数，“0”代表不合并。
也就是说数组中：合并的行数有值，不合并的行数没有值。

      let groupNameArr = {};
      // // 先再数组里存入一个索引作为第一个出现的次数基数
      let arr: any = [];
      // // 记录arr中合并次数的位置
      let ind = 0;
      res.forEach((item, index) => {
        // 相同名合并行数  +1
        // 不同名合并行数  arr.push(1)，因为只出现过一次
        if (index !== 0 && item.groupName === res[index - 1].groupName) {
          // 合并的行数 +1
          arr[ind] += 1;
          // 推入不和并的行数
          arr.push(0);
        } else {
          // 新名从新位置开始记录
          ind = index;
          arr.push(1);
        }
      });
      this.groupNameArr = arr;

step2: 调用Table的objectSpanMethod方法，根据（rowIndex，columnIndex）确定合并那一列、合并多少行。
这里只需要判断是否大于0，大于0，则代表是每一合并行的初始

  private objectSpanMethod({ row, column, rowIndex, columnIndex }) {
    const number = this.groupNameArr[rowIndex];
    if (columnIndex === 0) {
      return {
        rowspan: number > 0 ? number : 0,
        colspan: number > 0 ? 1 : 0,
      };
    }
  }