nz-table常用属性方法:
nzBordered 表格是否有边框 dataSet 数据源
[nzFrontPagination] 是否在前端分页,默认true
[nzLoading] 是否显示加载中 [nzTotal]数据总条数
[nzPageIndex] 当前页码,可双向绑定
[nzPageSize] 每页展示多少数据,可双向绑定
[nzShowQuickJumper] 是否可以快速跳转至某页 默认false
[nzShowSizeChanger] 是否可以改变 nzPageSize 默认false
[nzPageSize] 每页展示多少数据,可双向绑定
(nzPageIndexChange) 当前页码改版时的回调函数
(nzPageSizeChange) 页数改变时的回调函数
<nz-table #rowSelectionTable
nzBordered
[nzFrontPagination]="false"
[nzData]="dataSet"
[nzLoading]="loading"
[nzTotal]="total"
[(nzPageIndex)]="pageIndex"
[(nzPageSize)]="pageSize"
[nzShowQuickJumper]="true"
[nzShowSizeChanger]="true"
(nzPageIndexChange)="changePageIndex($event)"
(nzPageSizeChange)="changePageSize($event)">
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>总数</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of rowSelectionTable.data">
<td>{{data.id}}</td>
<td>{{data.name}}</td>
<td>{{data.count}}</td>
</tr>
</tbody>
</nz-table>
import { Component, OnInit } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ViserModule } from 'viser-ng';
import {TableDataService } from './table-data.service';
@Component({
selector: 'table-data',
templateUrl: './table-data.component.html'
})
export class TableDataComponent implements OnInit {
dataSet = [];
pageIndex = 1;
pageSize = 10;
total = 1;
loading = true;
constructor(private tableDataService : TableDataService) {}
ngOnInit(): void {
this.getData();
}
getData(): void {
this.loading = true;
this.tableDataService.getData(this.pageIndex, this.pageSize ).subscribe((result: any) => {
this.loading = false;
this.total = result.data.length;
this.dataSet = result.data;
});
});
}
changePageIndex(pageIndex ) {
this.pageIndex = pageIndex;
this.getData();
}
changePageSize(pageSize) {
this.pageSize = pageSize;
this.getData();
}
}