如何在Angular Mat Table中实现行单元格合并？

要实现类似你提到的记录5、6、7的跨行合并效果，核心思路是预处理数据标记合并行数，再配合模板条件渲染完成，具体步骤如下：

1. 预处理数据，标记合并行数 #

给表格数据新增一个rowspan属性，用来标记当前单元格需要跨的行数。遍历数据时，统计连续相同值的行数，只给每组的第一个数据项设置有效rowspan值，其余项留空或设为0。

示例TypeScript代码：

// 定义数据接口，新增rowspan字段
interface TableItem {
  id: number;
  groupName: string; // 需要合并的目标字段
  detail: string;
  rowspan?: number;
}

// 数据预处理函数
processMergeData(rawItems: TableItem[]): TableItem[] {
  const processed = [...rawItems];
  // 从后往前遍历，统计连续同组的行数
  for (let i = processed.length - 1; i >= 0; i--) {
    let mergeCount = 1;
    // 往前匹配同组连续行
    while (i > 0 && processed[i].groupName === processed[i - 1].groupName) {
      mergeCount++;
      i--;
    }
    processed[i].rowspan = mergeCount;
  }
  return processed;
}

// 组件内调用，比如在ngOnInit中
ngOnInit(): void {
  this.tableData = this.processMergeData(this.rawTableData);
}

2. 修改Mat Table模板，实现条件渲染 #

在需要合并的列模板中，通过*ngIf控制只渲染带有有效rowspan的单元格，同时设置[attr.rowspan]属性实现跨行效果。

示例模板代码：

<table mat-table [dataSource]="tableData" class="mat-elevation-z8">
  <!-- 需要合并的分组列 -->
  <ng-container matColumnDef="groupName">
    <th mat-header-cell *matHeaderCellDef> 分组名称 </th>
    <td mat-cell *matCellDef="let item"
        [attr.rowspan]="item.rowspan"
        *ngIf="item.rowspan">
      {{item.groupName}}
    </td>
  </ng-container>

  <!-- 正常显示的详情列 -->
  <ng-container matColumnDef="detail">
    <th mat-header-cell *matHeaderCellDef> 详情内容 </th>
    <td mat-cell *matCellDef="let item"> {{item.detail}} </td>
  </ng-container>

  <!-- 行定义 -->
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

3. 样式优化（可选） #

合并后的单元格可能出现边框重复、垂直对齐问题，添加CSS调整：

/* 合并单元格内容垂直居中 */
.mat-cell[rowspan] {
  vertical-align: middle;
}

/* 隐藏被合并单元格的顶部边框，避免视觉重复 */
.mat-cell:not([rowspan]) {
  border-top: none;
}

注意事项 #

• 若数据动态更新（比如分页、筛选后），需重新调用预处理函数更新rowspan标记，必要时用ChangeDetectorRef.detectChanges()触发组件变更检测。
• 确保需要合并的字段是连续相同的，若数据无序，先排序再处理。

内容的提问来源于stack exchange，提问作者Ajinkya More