700字范文 > ant design vue table 高度自适应_[Angular 组件库 NG-ZORRO 基础入门] - Table：远程加载

ant design vue table 高度自适应_[Angular 组件库 NG-ZORRO 基础入门] - Table：远程加载

时间：2020-09-07 01:53:01

前言回顾

昨天我们介绍了如何将nz-table和Material CDK结合使用，实现拖拽排序和虚拟滚动的功能，今天我们继续介绍第一阶段中Table组件最后一个例子：远程加载数据。

开始

起步

我们在之前的例子里，都是采用本地变量来作为数据输入，我们看 nz-table 官方文档看到如下属性

[nzFrontPagination]是否在前端对数据进行分页，如果在服务器分页数据或者需要在前端显示全部数据时传入 false，默认 true

说明如果不涉及异步加载，默认是前端分页模式，可配合nzPageSize来决定每页显示数量。

对于异步加载的数据来说，我们当然不希望前端分页，而是向后端请求数据并渲染，对于常规的后端 API 设计来说，一个查询数据接口必然可接受分页、过滤等参数，返回数据总量 / 总页码、数据结果等。

基于此，我们来看看哪些属性是异步加载数据必备的：

| 参数 | 说明 | 类型 | 默认值 |

| --- | --- | --- | --- |

|[nzData]| 数据数组 |any[]| - |

准备接口

通过 randomuser.me 网站接口，我们能够得到一系列随机生成的用户数据格式，我们精简一下，让该接口可接受分页、排序参数。

export class RandomUserService {randomUserUrl = 'https://api.randomuser.me/';getUsers(pageIndex: number = 1,pageSize: number = 10,sortField: string,sortOrder: string): Observable<{}> {const params = new HttpParams().append('page', `${pageIndex}`).append('results', `${pageSize}`).append('sortField', sortField).append('sortOrder', sortOrder);return this.http.get(`${this.randomUserUrl}`, {params});}constructor(private http: HttpClient) {}}

查询接口我们可以这样使用：

export class NzDemoTableAjaxComponent implements OnInit {searchData(reset: boolean = false): void {// 每页数目变化时强制刷新if (reset) {this.pageIndex = 1;}this.randomUserService.getUsers(this.pageIndex, this.pageSize, this.sortKey, this.sortValue).subscribe((data: any) => {this.loading = false;this.total = 200;this.listOfData = data.results;this.cdr.markForCheck();});}constructor(private randomUserService: RandomUserService,private cdr: ChangeDetectorRef) {}ngOnInit() {this.searchData();}}

构建 table

angular-ec7vph-pbqnt1 - StackBlitz

我们从接口出发，了解里我们的需求，那么table组件至少要支持分页和排序功能，先来看分页功能如何配置：

<nz-table#ajaxTable[nzFrontPagination]="false"[nzData]="listOfData"[nzTotal]="total"[(nzPageIndex)]="pageIndex"(nzPageIndexChange)="searchData()">...</nz-table>

可以看到，我们监听了pageIndex变化事件，然后触发重新查询事件，当然我们也可以开启每页数目变更功能，自定义每页要显示的数目：

<nz-table#ajaxTablenzShowSizeChanger[nzFrontPagination]="false"[nzData]="listOfData"[nzTotal]="total"[(nzPageIndex)]="pageIndex"[(nzPageSize)]="pageSize"(nzPageIndexChange)="searchData()"(nzPageSizeChange)="searchData(true)">...</nz-table>

每次页码切换都会触发searchData方法去重新请求 API 数据，请求成功后赋值给listOfData重新渲染。是不是挺简单的，这样你已经可以将其对接到自己的后端 API 上了（本例子中为了方便，我们直接将service写在了component中，项目开发过程中最好对services放在独立文件夹模块下维护）。