Angular Material Table集成CDK Virtual Scroll失效问题求助

核心问题分析 #

你直接将整个mat-table包裹在cdk-virtual-scroll-viewport中的写法不符合虚拟滚动的工作逻辑——虚拟滚动需要精准控制渲染的行元素，而非整个表格。同时你大概率忽略了cdk-virtual-scroll-viewport必须设置固定高度，否则虚拟滚动无法触发。

正确实现步骤 #

1. 导入必要模块

确保你的模块已导入ScrollingModule：

import { ScrollingModule } from '@angular/cdk/scrolling';

@NgModule({
  imports: [
    // ...其他依赖模块（如MatTableModule、MatPaginatorModule等）
    ScrollingModule
  ]
})
export class YourModule { }

2. 调整模板结构

拆分表头与表体，表头固定显示，表体根据分页选项切换普通渲染或虚拟滚动模式：

<!-- 固定表头 -->
<table mat-table 
       [dataSource]="dataSource" 
       matSort 
       (matSortChange)="sortData($event)" 
       #sort="matSort" 
       matSortStart="desc"
       fixedLayout>
  <ng-container *ngFor="let column of columns;" [matColumnDef]="column.columnDef">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{column.header}} </th>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
</table>

<!-- 虚拟滚动表体（仅选择1000或最大页数时显示） -->
<cdk-virtual-scroll-viewport 
  *ngIf="isVirtualScrollMode" 
  itemSize="50" 
  class="virtual-viewport">
  <table mat-table [dataSource]="dataSource" fixedLayout>
    <ng-container *ngFor="let column of columns;" [matColumnDef]="column.columnDef">
      <td mat-cell *matCellDef="let element">
        {{element[column.columnDef]}}
      </td>
    </ng-container>
    <!-- 用cdkVirtualFor渲染行，配合trackBy优化性能 -->
    <tr mat-row 
        *matRowDef="let row; columns: displayedColumns;" 
        *cdkVirtualFor="let row of dataSource.data; trackBy: trackByFn">
    </tr>
    <tr class="mat-row" *matNoDataRow>
      <td class="mat-cell" colspan="4">No records found.</td>
    </tr>
  </table>
</cdk-virtual-scroll-viewport>

<!-- 普通分页表体（选择小页数时显示） -->
<table mat-table 
       *ngIf="!isVirtualScrollMode" 
       [dataSource]="dataSource" 
       multiTemplateDataRows 
       fixedLayout>
  <ng-container *ngFor="let column of columns;" [matColumnDef]="column.columnDef">
    <td mat-cell *matCellDef="let element">
      {{element[column.columnDef]}}
    </td>
  </ng-container>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  <tr class="mat-row" *matNoDataRow>
    <td class="mat-cell" colspan="4">No records found.</td>
  </tr>
</table>

<!-- 分页组件 -->
<mat-paginator #paginator="matPaginator" 
               [pageSizeOptions]="pageSizeOptions"
               showFirstLastButtons 
               (page)="onPaginateChange($event)">
</mat-paginator>

3. 添加CSS样式

为虚拟滚动容器设置固定高度：

.virtual-viewport {
  height: 600px; /* 根据页面需求调整高度 */
  width: 100%;
}

4. 组件逻辑处理

添加模式切换逻辑与性能优化函数：

isVirtualScrollMode = false;
pageSizeOptions = [10,25,50,100,500,1000,'max'];

onPaginateChange(event: PageEvent) {
  // 根据选择的分页大小切换模式
  this.isVirtualScrollMode = event.pageSize === 1000 || event.pageSize === 'max';
  
  if (!this.isVirtualScrollMode) {
    // 普通分页模式绑定分页器
    this.dataSource.paginator = this.paginator;
  } else {
    // 虚拟滚动模式解绑分页器
    this.dataSource.paginator = null;
  }
}

// trackBy函数减少不必要的DOM重渲染
trackByFn(index: number, item: any) {
  return item.id; // 替换为你的数据唯一标识字段
}

关键注意事项 #

• cdk-virtual-scroll-viewport必须设置固定高度，否则虚拟滚动逻辑无法触发。
• 虚拟滚动与分页不能同时生效，需根据用户选择的分页大小切换模式。
• 使用trackBy函数可大幅降低滚动时的DOM更新频率，提升流畅度。
• 开启fixedLayout属性固定表格列宽，避免滚动时的布局抖动。

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