可以使用虚拟滚动来解决这个问题。虚拟滚动只渲染当前可见区域内的行,而不是整个表格,因此能够大大提高性能。
以下是一个示例:
CdkVirtualScrollViewport
。import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
// ...
@ViewChild(CdkVirtualScrollViewport)
viewport: CdkVirtualScrollViewport;
viewport.renderedRangeStream
以更新当前可见区域的数据。dataSource.connect().subscribe(data => {
this.viewport.checkViewportSize();
this.viewport.renderedRangeStream.subscribe(range => {
const start = range.start;
const end = range.end;
// Slice the data source to the current visible items.
const currentItems = data.slice(start, end);
// Update the data source with the current items.
this.currentDataSource = new MatTableDataSource(currentItems);
});
});
这样就可以显著提高表格的性能。