如何在Angular Material Mat-Table中实现双部分列头设计？

完全可以实现这种分组式的双部分列头设计，核心思路是通过在<thead>中嵌套两层表头行，结合colspan属性实现分组表头与具体列的对应，以下是具体实现步骤：

1. 定义表头分组与列配置 #

在组件类中定义表格的显示列，以及分组表头的结构，示例如下：

import { Component, ViewChild } from '@angular/core';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';

interface Transaction {
  amount: number;
  debit: number;
  credit: number;
  balance: number;
}

@Component({
  selector: 'app-double-header-table',
  templateUrl: './double-header-table.component.html',
  styleUrls: ['./double-header-table.component.css']
})
export class DoubleHeaderTableComponent {
  displayedColumns: string[] = ['amount', 'debit', 'credit', 'balance'];
  // 定义分组表头：key是分组名称，value是该分组包含的列
  headerGroups = [
    { name: '金额', columns: ['amount'] },
    { name: '交易明细', columns: ['debit', 'credit'] },
    { name: '账户余额', columns: ['balance'] }
  ];
  dataSource = new MatTableDataSource<Transaction>([
    { amount: 100, debit: 50, credit: 0, balance: 50 },
    { amount: 200, debit: 0, credit: 200, balance: 250 }
  ]);

  @ViewChild(MatSort) sort!: MatSort;

  ngAfterViewInit() {
    this.dataSource.sort = this.sort;
  }
}

2. 编写模板结构 #

在模板中，<thead>部分添加两层<tr>：第一层是分组表头，通过colspan合并对应数量的单元格；第二层是具体列的表头，支持排序等交互：

<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
  <!-- 上层分组表头 -->
  <thead>
    <tr>
      <th *ngFor="let group of headerGroups" [attr.colspan]="group.columns.length">
        {{ group.name }}
      </th>
    </tr>
    <!-- 下层具体列表头 -->
    <tr>
      <th mat-header-cell *matHeaderCellDef *ngFor="let col of displayedColumns" mat-sort-header>
        {{ col | titlecase }}
      </th>
    </tr>
  </thead>

  <!-- 表格内容行 -->
  <tbody>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </tbody>
</table>

3. 样式优化（可选） #

添加CSS样式区分两层表头，提升视觉层次：

.mat-table thead tr:first-child th {
  background-color: #f0f0f0;
  font-weight: 700;
  text-align: center;
  border-bottom: 2px solid #ddd;
}

.mat-table thead tr:last-child th {
  border-bottom: 1px solid #ddd;
}

关键说明 #

• 分组表头的colspan值必须与对应分组包含的列数量一致，确保表头与列对齐；
• 如果需要筛选、分页等其他Mat-Table功能，可按常规方式集成，不影响双表头结构；
• 若列宽度需要自定义，可通过matColumnDef的width属性或CSS单独设置。

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