Angular Material 8实现列内多表头展示及指定表头点击排序

嘿，我正好折腾过类似的需求，给你一步步拆解怎么实现这个单列多表头+对应属性排序的功能，完全不用重复数据，就靠一个列搞定！

核心思路 #

我们要在单个mat-header-cell里嵌套多个可点击的表头元素，每个元素绑定不同的排序属性，通过手动控制MatSort的状态来触发对应属性的排序，同时让表格数据源正确响应这些排序指令。

1. HTML模板部分 #

首先确保表格带有matSort指令，然后在目标列的表头单元格里，放置多个可点击的表头项，每个绑定点击事件切换排序，同时显示对应的排序图标：

<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
  <!-- 这里可以放其他常规列 -->
  <ng-container matColumnDef="otherColumn">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>其他列</th>
    <td mat-cell *matCellDef="let element">{{element.otherProp}}</td>
  </ng-container>

  <!-- 重点：多表头排序列 -->
  <ng-container matColumnDef="multiProperty">
    <th mat-header-cell *matHeaderCellDef>
      <div class="multi-header-group">
        <!-- 编号表头项 -->
        <span (click)="triggerSort('id')" class="header-item">
          编号
          <mat-icon *ngIf="sort.active === 'id'">
            {{sort.direction === 'asc' ? 'arrow_upward' : 'arrow_downward'}}
          </mat-icon>
        </span>
        <!-- 名称表头项 -->
        <span (click)="triggerSort('name')" class="header-item">
          名称
          <mat-icon *ngIf="sort.active === 'name'">
            {{sort.direction === 'asc' ? 'arrow_upward' : 'arrow_downward'}}
          </mat-icon>
        </span>
      </div>
    </th>
    <td mat-cell *matCellDef="let element">
      <div class="cell-content-group">
        <span>{{element.id}}</span>
        <span>{{element.name}}</span>
      </div>
    </td>
  </ng-container>

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

2. TypeScript组件逻辑 #

需要注入MatSort，初始化数据源，然后写一个方法来手动切换排序的属性和方向：

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

// 定义你的数据模型
interface TableItem {
  id: number;
  name: string;
  otherProp: string; // 其他属性示例
}

@Component({
  selector: 'app-multi-header-sort-table',
  templateUrl: './multi-header-sort-table.component.html',
  styleUrls: ['./multi-header-sort-table.component.css']
})
export class MultiHeaderSortTableComponent implements AfterViewInit {
  displayedColumns: string[] = ['multiProperty', 'otherColumn'];
  dataSource = new MatTableDataSource<TableItem>();
  @ViewChild(MatSort) sort!: MatSort;

  // 模拟业务数据
  private tableData: TableItem[] = [
    { id: 2, name: '产品B', otherProp: '描述B' },
    { id: 1, name: '产品A', otherProp: '描述A' },
    { id: 3, name: '产品C', otherProp: '描述C' }
  ];

  constructor() {
    this.dataSource.data = this.tableData;
  }

  ngAfterViewInit() {
    this.dataSource.sort = this.sort;
    
    // 可选：自定义排序逻辑，比如名称忽略大小写
    this.dataSource.sortingDataAccessor = (item, property) => {
      switch (property) {
        case 'name': return item.name.toLowerCase();
        default: return item[property];
      }
    };
  }

  // 触发指定属性的排序
  triggerSort(property: string) {
    const isCurrentActive = this.sort.active === property;
    // 如果当前已经是该属性排序，切换方向；否则默认升序
    const targetDirection = isCurrentActive 
      ? (this.sort.direction === 'asc' ? 'desc' : 'asc') 
      : 'asc';
    
    // 手动设置排序状态
    this.sort.sort({ 
      id: property, 
      start: targetDirection, 
      disableClear: false 
    });
  }
}

3. CSS样式调整 #

让表头和单元格的内容排版更整齐，和需求示例的布局匹配：

/* 多表头容器 */
.multi-header-group {
  display: flex;
  flex-direction: column; /* 垂直排列，根据你的需求也可以改成row水平排列 */
  gap: 6px;
}

/* 可点击的表头项 */
.header-item {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
}

/* 单元格内容容器 */
.cell-content-group {
  display: flex;
  flex-direction: column; /* 和表头布局对应 */
  gap: 4px;
}

关键说明 #

• 这里没有用默认的mat-sort-header直接绑定，而是手动调用sort.sort()来切换排序属性，这样就能在同一个列里支持多个排序字段。
• 排序图标是根据当前MatSort的active和direction状态来显示的，用户能直观看到当前是按哪个属性排序、排序方向是什么。
• 如果需要更复杂的排序逻辑，比如对象嵌套属性排序，直接在sortingDataAccessor里处理就行。

内容的提问来源于stack exchange，提问作者S.H