如何在mat-table动态表格中为指定列动态设置colspan属性

你当前实现失效有两个核心原因：

• 模板中[attr.colspan]硬编码为固定值1，没有和表头点击后的展开状态做绑定，自然不会动态更新
• mat-table基于原生table布局，给某个单元格设置colspan跨N列后，必须同步隐藏同一行内被跨占的N-1个后续单元格，否则表格会出现布局错位，看起来就像属性只在第一列生效

1. 组件侧维护展开状态与计算逻辑 #

在组件类中添加状态变量和单元格配置计算方法，示例代码如下：

// 记录当前处于展开状态的列，默认无展开
expandedColumn: string | null = null;

// 表头点击处理
headerEvent(clickedCol: string): void {
  // 点击已展开列则收起，否则切换为展开当前点击列
  this.expandedColumn = this.expandedColumn === clickedCol ? null : clickedCol;
}

/**
 * 计算指定列对应单元格的渲染配置
 * @param currentCol 当前渲染的列名
 * @returns colspan值、是否显示当前单元格
 */
getCellConfig(currentCol: string): { colspan: number; visible: boolean } {
  // 无展开列时所有列正常渲染，跨列数为1
  if (!this.expandedColumn) {
    return { colspan: 1, visible: true };
  }

  const expandedColIndex = this.displayedColumns.indexOf(this.expandedColumn);
  const currentColIndex = this.displayedColumns.indexOf(currentCol);

  // 当前列是展开列，设置跨列数（示例为跨2列，可根据业务需求调整数值）
  if (currentCol === this.expandedColumn) {
    return { colspan: 2, visible: true };
  }

  // 当前列是被展开列跨占的紧邻列，隐藏不渲染
  if (currentColIndex === expandedColIndex + 1) {
    return { colspan: 1, visible: false };
  }

  // 其余列正常渲染
  return { colspan: 1, visible: true };
}

如果需要跨3列及以上，只要把展开列的colspan值改为对应数值，同时把expandedColIndex +1、expandedColIndex +2...对应位置的列设置为visible: false即可。

2. 修改模板绑定逻辑 #

调整动态列的td配置，绑定动态colspan值，同时通过*ngIf控制被跨列的单元格隐藏：

<ng-container
  matColumnDef="{{ column }}"
  *ngFor="let column of displayedColumns">
  <th mat-header-cell *matHeaderCellDef (click)="headerEvent(column)">{{ column }}</th>
  <td mat-cell *matCellDef="let element"
    [attr.colspan]="getCellConfig(column).colspan"
    *ngIf="getCellConfig(column).visible"
  >{{ element[column] }}</td>
</ng-container>

• 跨列数必须和被隐藏的单元格数量匹配：给单元格设置colspan=N时，必须隐藏同一行内紧随当前单元格的N-1个单元格，否则原生table布局会出现错位
• 如果需要表头同步实现跨列效果，给th标签添加和td完全一致的[attr.colspan]、*ngIf绑定逻辑即可
• 若不同列展开时的跨列数不一致，可维护独立的列配置对象存储每列对应的跨列值，无需在逻辑中硬编码固定数值

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