Angular Material Table实现表的虚拟滚动

Angular Material Table实现表的虚拟滚动
插件名称 ng-table-virtual-scroll
发布时间 2020年4月11日
插件作者 diprokon

一个Angular指令,可在Angular Material Table组件上实现虚拟滚动体验。

使用

1.安装并导入指令。

# NPM
$ npm install ng-table-virtual-scroll --save
import {TableVirtualScrollModule} from 'ng-table-virtual-scroll';
import { TableVirtualScrollDataSource } from 'ng-table-virtual-scroll';

2.在HTML中:

<cdk-virtual-scroll-viewport tvsItemSize class="wrapper mat-elevation-z2">
  <table mat-table [dataSource]="dataSource">
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef>No.</th>
      <td mat-cell *matCellDef="let element">{{element.id}}</td>
    </ng-container>
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef>Name</th>
      <td mat-cell *matCellDef="let element">{{element.name}}</td>
    </ng-container>
  </table>
</cdk-virtual-scroll-viewport>

3. JavaScript:

const DATA = getData(1000);
@Component({
  selector: 'app-base-example',
  templateUrl: './base-example.component.html',
  styleUrls: ['./base-example.component.css']
})
export class BaseExampleComponent {
  displayedColumns = ['id', 'name'];
  dataSource = new TableVirtualScrollDataSource(DATA);
}