如何为Angular mat-table的表头添加colspan属性

要实现单个表头对应多个数据列的效果，核心是新增独立的跨列表头行，通过[attr.colspan]绑定跨列数值即可，具体实现如下：

实现思路 #

1. 拆分表头为两层：上层为跨列的分组表头，下层为对应单个数据列的子表头
2. 单独定义分组表头的列配置，标注每个分组表头的跨列数
3. 分别渲染两层表头行，为分组表头绑定colspan属性

代码示例 #

TS 文件配置 #

首先定义两组列：一组是对应实际数据的子表头列，一组是上层跨列的分组表头配置

import { Component } from '@angular/core';

export interface PeriodicElement {
  position: number;
  name: string;
  weight1: number;
  weight2: number;
  symbol: string;
}

const ELEMENT_DATA: PeriodicElement[] = [
  {position: 1, name: 'Hydrogen', weight1: 1.0079, weight2: 1.008, symbol: 'H'},
  {position: 2, name: 'Helium', weight1: 4.0026, weight2: 4.003, symbol: 'He'},
];

@Component({
  selector: 'table-basic-example',
  styleUrls: ['table-basic-example.css'],
  templateUrl: 'table-basic-example.html',
})
export class TableBasicExample {
  // 子表头列：对应实际数据字段
  displayedColumns: string[] = ['position', 'name', 'weight1', 'weight2', 'symbol'];
  // 分组表头配置：id为唯一标识，label为显示文本，colspan为跨列数
  groupHeaders = [
    { id: 'positionGroup', label: '序号', colspan: 1 },
    { id: 'nameGroup', label: '元素名', colspan: 1 },
    { id: 'weightGroup', label: '重量参数', colspan: 2 },
    { id: 'symbolGroup', label: '元素符号', colspan: 1 }
  ];
  dataSource = ELEMENT_DATA;
}

模板文件配置 #

分别渲染分组表头行和子表头行，给分组表头绑定colspan属性

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <!-- 分组表头定义 -->
  <ng-container *ngFor="let group of groupHeaders" [matColumnDef]="group.id">
    <mat-header-cell *matHeaderCellDef [attr.colspan]="group.colspan">
      {{ group.label }}
    </mat-header-cell>
  </ng-container>
  <!-- 分组表头行 -->
  <mat-header-row *matHeaderRowDef="groupHeaders.map(g => g.id)"></mat-header-row>

  <!-- 子表头+数据单元格定义 -->
  <ng-container matColumnDef="position">
    <mat-header-cell *matHeaderCellDef> 序号 </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="name">
    <mat-header-cell *matHeaderCellDef> 元素名 </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="weight1">
    <mat-header-cell *matHeaderCellDef> 净重 </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.weight1}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="weight2">
    <mat-header-cell *matHeaderCellDef> 毛重 </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.weight2}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="symbol">
    <mat-header-cell *matHeaderCellDef> 元素符号 </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell>
  </ng-container>

  <!-- 子表头行、数据行 -->
  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</table>

样式调整（可选） #

如果需要表头内容居中，可以添加以下样式

mat-header-cell, mat-cell {
  justify-content: center;
  text-align: center;
}

核心注意点 #

• 绑定colspan时必须加attr.前缀，这是Angular绑定HTML原生属性的固定写法，不加不会生效
• 分组表头的id不能和子表头的列id重复，避免渲染冲突
• 两层表头是独立的mat-header-row，不要合并定义

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