Angular 10+中Material Paginator底层机制及固定表格顶行需求咨询

• MatPaginator本身是纯UI交互组件，仅维护分页核心状态（当前页码pageIndex、每页条数pageSize、总数据量length），对外暴露page事件通知参数变更，本身不直接操作数据源。
• 当和MatTableDataSource绑定时，数据源会自动订阅page事件，所有数据处理的固定执行顺序为：原始数据 → 应用筛选规则 → 应用排序规则 → 按照分页参数截取对应长度的数组片段 → 输出为renderedData供表格渲染。
• 分页计算的起始索引固定为 pageIndex * pageSize，截取长度为pageSize，所有筛选、排序的结果都会作为分页的前置输入。

该需求可以实现，无需修改Material组件底层逻辑，仅需自定义数据源的拼接规则即可，核心实现逻辑如下：

• 拆分数据源：将数据分为两个独立数组，fixedTopRows存需要固定展示的4条汇总数据，normalRows存参与筛选、排序、分页的普通业务数据，所有数据处理逻辑仅作用于normalRows。
• 重写数据更新逻辑：监听排序、分页、筛选的变更事件，按以下顺序处理：
  1. 对normalRows应用筛选规则，得到筛选后的结果集
  2. 对筛选后的结果集应用排序规则，得到排序后的结果集
  3. 按照当前分页参数，对排序后的结果集做截取，得到当前页需要展示的普通数据片段
  4. 将fixedTopRows和当前页普通数据片段拼接后，赋值给表格的渲染数据源
  5. 同步分页器的length属性为筛选后的normalRows总长度，保证分页页码计算准确
• 特殊场景适配：如果需要固定行也参与筛选匹配，仅需要调整筛选逻辑，匹配到固定行内容时直接返回全量fixedTopRows即可，不需要修改拼接逻辑。

核心代码示例 #

import { MatTableDataSource } from '@angular/material/table';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { merge, startWith } from 'rxjs';

@Component({
  // 组件基础配置
})
export class YourComponent implements AfterViewInit {
  // 固定顶部4条汇总数据，可按需动态更新
  fixedTopRows: any[] = [/* 你的汇总数据 */];
  // 原始普通业务数据
  rawNormalData: any[] = [/* 你的业务数据 */];
  // 表格渲染数据源
  dataSource = new MatTableDataSource<any>();
  
  @ViewChild(MatPaginator) paginator!: MatPaginator;
  @ViewChild(MatSort) sort!: MatSort;

  ngAfterViewInit(): void {
    // 监听所有会触发数据更新的事件
    merge(this.sort.sortChange, this.paginator.page, this.dataSource.filterChange)
      .pipe(startWith(null))
      .subscribe(() => this.updateRenderData());
  }

  // 自定义数据更新逻辑
  private updateRenderData(): void {
    // 1. 应用筛选规则到普通数据
    let processedNormal = this.rawNormalData.filter(item => {
      const filterStr = this.dataSource.filter.trim().toLowerCase();
      if (!filterStr) return true;
      return Object.values(item).some(val => 
        val?.toString().toLowerCase().includes(filterStr)
      );
    });

    // 2. 应用排序规则到普通数据
    if (this.sort.active && this.sort.direction) {
      processedNormal = processedNormal.sort((a, b) => {
        const isAsc = this.sort.direction === 'asc';
        if (a[this.sort.active] < b[this.sort.active]) return isAsc ? -1 : 1;
        if (a[this.sort.active] > b[this.sort.active]) return isAsc ? 1 : -1;
        return 0;
      });
    }

    // 3. 应用分页截取
    const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
    const pagedNormal = processedNormal.slice(startIndex, startIndex + this.paginator.pageSize);

    // 4. 拼接固定行和当前页数据，赋值给渲染数据源
    this.dataSource.data = [...this.fixedTopRows, ...pagedNormal];

    // 5. 同步分页器总条数
    this.paginator.length = processedNormal.length;
  }
}

如果需要固定行样式独立，可以在表格的行模板中给前4行添加自定义class，设置position: sticky等样式即可。

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