如何用Angular Material Table将数据集映射为多表头表格？

完全可以实现，Angular Material Table原生支持通过嵌套表头行构建多层级表头结构，只需将结构化数据集映射到对应表头字段即可，以下是具体实现步骤：

1. 定义数据结构与表头配置 #

根据多表头需求，先定义对应的数据接口和表头分组配置：

数据接口示例 #

假设你的结构化数据集是按「区域」分组的销售数据，多表头分为一级（区域、大区分组、总销售额）和二级（月度/季度销售）：

// 核心数据接口
interface SalesData {
  region: 'east' | 'south';
  monthlySales: number;
  quarterlySales: number;
  totalSales: number;
}

// 表头分组配置（用于控制一级表头的跨度）
interface HeaderGroup {
  label: string;
  colspan: number;
}

// 组件内的数据源与表头配置
export class MultiHeaderTableComponent {
  // 你的结构化数据集
  salesData: SalesData[] = [
    { region: 'east', monthlySales: 12000, quarterlySales: 35000, totalSales: 47000 },
    { region: 'south', monthlySales: 9500, quarterlySales: 28000, totalSales: 37500 }
  ];

  // 一级表头分组（控制每个大表头的列跨度）
  headerGroups: HeaderGroup[] = [
    { label: '区域', colspan: 1 },
    { label: '华东大区', colspan: 2 },
    { label: '华南大区', colspan: 2 },
    { label: '总销售额', colspan: 1 }
  ];

  // 二级表头对应的字段映射（必须与数据列定义一一对应）
  displayedColumns: string[] = ['region', 'east-monthly', 'east-quarterly', 'south-monthly', 'south-quarterly', 'total'];
}

2. 模板中渲染多表头 #

在组件HTML中，通过嵌套<mat-header-row>分别渲染一级、二级表头，同时完成数据列的映射：

<table mat-table [dataSource]="salesData" class="mat-elevation-z8">
  <!-- 一级表头行 -->
  <tr mat-header-row>
    <th mat-header-cell *ngFor="let group of headerGroups" [attr.colspan]="group.colspan">
      {{ group.label }}
    </th>
  </tr>

  <!-- 二级表头行 -->
  <tr mat-header-row>
    <th mat-header-cell></th> <!-- 对应「区域」列的空二级表头 -->
    <th mat-header-cell>月度销售</th>
    <th mat-header-cell>季度销售</th>
    <th mat-header-cell>月度销售</th>
    <th mat-header-cell>季度销售</th>
    <th mat-header-cell>总计</th>
  </tr>

  <!-- 数据行渲染 -->
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

  <!-- 数据列定义 -->
  <ng-container matColumnDef="region">
    <td mat-cell *matCellDef="let row">{{ row.region === 'east' ? '华东' : '华南' }}</td>
  </ng-container>

  <ng-container matColumnDef="east-monthly">
    <td mat-cell *matCellDef="let row">{{ row.region === 'east' ? row.monthlySales : '-' }}</td>
  </ng-container>

  <ng-container matColumnDef="east-quarterly">
    <td mat-cell *matCellDef="let row">{{ row.region === 'east' ? row.quarterlySales : '-' }}</td>
  </ng-container>

  <ng-container matColumnDef="south-monthly">
    <td mat-cell *matCellDef="let row">{{ row.region === 'south' ? row.monthlySales : '-' }}</td>
  </ng-container>

  <ng-container matColumnDef="south-quarterly">
    <td mat-cell *matCellDef="let row">{{ row.region === 'south' ? row.quarterlySales : '-' }}</td>
  </ng-container>

  <ng-container matColumnDef="total">
    <td mat-cell *matCellDef="let row">{{ row.totalSales }}</td>
  </ng-container>
</table>

3. 样式优化（可选） #

为让多表头层级更清晰，添加自定义样式：

.mat-header-row {
  background-color: #f5f5f5;
  border-bottom: 2px solid #e0e0e0;
}

.mat-header-cell {
  font-weight: 600;
  text-align: center;
}

.mat-cell {
  text-align: center;
  border-right: 1px solid #f0f0f0;
}

关键注意事项 #

• 一级表头的colspan必须与对应二级表头的列数完全匹配，避免表格结构错乱
• 数据列的matColumnDef必须和displayedColumns数组中的字段一一对应
• 若数据集结构更复杂，可通过动态生成表头分组和列定义的方式适配，无需硬编码

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