如何使用MatSort排序时排除Angular Material表格最后4行？

要实现点击列头排序时最后4行保持固定位置，核心思路是将数据源拆分为可排序数据和固定数据两部分，仅对可排序部分执行排序操作，最后再将固定数据拼接回结果。以下是具体实现步骤：

1. 拆分数据源 #

在组件类中，将原始的dataSourceMD数组拆分为两部分：

• 可排序数据：数组中除最后4行以外的所有元素
• 固定数据：数组的最后4行

// 组件类中定义变量
sortableData: any[] = [];
fixedData: any[] = [];

// 初始化或数据更新时拆分数据源
splitDataSource() {
  const totalRows = this.dataSourceMD.length;
  if (totalRows > 4) {
    this.sortableData = this.dataSourceMD.slice(0, totalRows - 4);
    this.fixedData = this.dataSourceMD.slice(totalRows - 4);
  } else {
    // 如果数据不足4行，全部作为可排序数据
    this.sortableData = [...this.dataSourceMD];
    this.fixedData = [];
  }
}

2. 修改排序事件处理逻辑 #

在getRowMaximoTable方法中，仅对sortableData执行排序，然后将排序后的结果与fixedData拼接，更新回dataSourceMD：

getRowMaximoTable(dataSourceKey: string, indexKey: string) {
  // 获取当前排序状态
  const sort = this.sortMD;
  const active = sort.active;
  const direction = sort.direction;

  if (!active || !direction) {
    // 无排序规则时，重置为原始拆分状态
    this.dataSourceMD = [...this.sortableData, ...this.fixedData];
    return;
  }

  // 对可排序数据执行排序
  const sortedSortableData = [...this.sortableData].sort((a, b) => {
    const valueA = a[active];
    const valueB = b[active];

    // 根据数据类型处理排序逻辑（示例为字符串/数字通用逻辑）
    if (typeof valueA === 'string' && typeof valueB === 'string') {
      return direction === 'asc' ? valueA.localeCompare(valueB) : valueB.localeCompare(valueA);
    } else {
      return direction === 'asc' ? (valueA - valueB) : (valueB - valueA);
    }
  });

  // 拼接排序后的可排序数据和固定数据，更新数据源
  this.dataSourceMD = [...sortedSortableData, ...this.fixedData];

  // 原方法中的其他逻辑（如更新indexMaximoMD）保持不变
  // ...
}

3. 初始化与数据更新时调用拆分方法 #

在组件初始化（如ngOnInit）或数据源更新时，调用splitDataSource方法拆分数据：

ngOnInit() {
  // 假设原始数据已赋值给dataSourceMD
  this.splitDataSource();
  // 初始时拼接完整数据源
  this.dataSourceMD = [...this.sortableData, ...this.fixedData];
}

// 如果有数据更新的方法，也要同步调用拆分
updateDataSource(newData: any[]) {
  this.dataSourceMD = newData;
  this.splitDataSource();
  this.dataSourceMD = [...this.sortableData, ...this.fixedData];
}

4. 模板部分无需修改 #

你当前的模板代码无需调整，因为排序触发的matSortChange事件已经绑定到getRowMaximoTable方法，我们只需要在该方法内修改排序逻辑即可。

注意事项 #

• 如果你的数据对象中用于排序的字段不是直接的字符串/数字，需要根据实际数据类型调整排序逻辑（比如日期类型需转换为时间戳比较）。
• 若表格同时使用了过滤功能，需要确保过滤逻辑也只针对可排序数据，过滤后再拼接固定数据，避免固定行被过滤掉。

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