如何解决mat table分页将分组行计入总条目数的问题

问题背景 #

当前使用mat table实现带行分组的数据展示，行分组功能运行正常，但添加分页功能后出现统计异常。

问题表现 #

• 10条实际数据分为2组、每组5条数据的场景下，分页组件显示总条目数为12，2个分组行被计入了总条目数
• 实际结果：每页展示的条目数统计错误
• 预期结果：仅统计实际展示的数据条目数，不要将分组行当作数据条目进行统计

解决方案 #

核心思路 #

mat-table的分页默认统计dataSource中所有数组项的数量，这类行分组实现的通用逻辑是把分组行和普通数据行都塞到了同一个数据源数组里，所以分页会把分组行也统计进去。只需要重写分页的总条目数绑定逻辑，同时修改分页切分数据的逻辑即可。

具体实现步骤 #

1. 单独维护原始业务数据数组，不要和拼接了分组行的渲染数据源混用
   示例变量声明：

   // 原始业务数据，仅包含实际业务条目，不包含分组行
   rawBusinessData: any[] = [];
   // 渲染用的数据源，包含分组行+对应业务数据
   renderDataSource = new MatTableDataSource<any>([]);
   

2. 给mat-paginator的length属性单独绑定原始业务数据的总长度，不要使用默认的数据源长度
   模板修改示例：

   <mat-paginator 
     [length]="rawBusinessData.length"
     [pageSize]="pageSize"
     [pageIndex]="pageIndex"
     (page)="handlePageChange($event)"
   >
   </mat-paginator>
   

3. 重写分页切换逻辑，分页时先对原始业务数据做切分，再给切分后的当前页业务数据生成分组行，最后拼接成渲染用的数据源
   逻辑实现示例：

   handlePageChange(event: PageEvent) {
     this.pageIndex = event.pageIndex;
     this.pageSize = event.pageSize;
     // 先切分原始业务数据，拿到当前页的业务条目
     const startIndex = this.pageIndex * this.pageSize;
     const currentPageRawData = this.rawBusinessData.slice(startIndex, startIndex + this.pageSize);
     // 给当前页的原始数据生成分组行，拼接成渲染数据源
     this.renderDataSource.data = this.buildGroupedData(currentPageRawData);
   }
   
   // 原有生成分组数据的逻辑，入参替换为当前页的原始数据即可
   buildGroupedData(rawData: any[]) {
     // 原有分组逻辑实现
   }
   

适配全局分组场景 #

如果是跨页的全局分组需求，需要先对全量原始数据做分组聚合，再把分组后的业务条目按分页大小切分，生成分组行时仅保留当前页存在的分组对应的分组头即可，避免重复计算分组行。

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