<nz-table #nzTable [nzDataSource]="tableList"
[nzPageSize]="10"
[nzIsPagination]="false"
[nzLoading]="_isSpinning"
[nzCustomNoResult]="true">
<tr nz-tbody-tr *ngFor="let item of nzTable?.data;index as i">
<!-- 分页 -->
<div class="page-pagination">
<nz-pagination [nzPageSize]="tableLimit"
[nzPageIndex]="tableOffset"
[nzTotal]="tableTotal"
nzShowTotal
nzShowQuickJumper
[nzShowSizeChanger]="true"
(nzPageIndexChange)="pageIndexChange($event)"
(nzPageSizeChange)="pageSizeChange($event)">
</nz-pagination>
</div>
pageIndexChange(e){
this.tableOffset=e;
this.search();
}
pageSizeChange(e){
this.tableLimit=e;
this.search();
}
public _isSpinning = false; // loading 状态标记
public tableList = []; // 表格数据
tableOffset=1;
tableLimit=10;
tableTotal=0;
// search函数
search(flag = false) {
if (flag) {
this.tableOffset = 1;
}
let params = {
'page': this.tableOffset, //第几页
'size': this.tableLimit, //每页条数
};
this._isSpinning = true;
// 接口:
this.adminHomePageService.operatorDetail(params).then(res => {
console.log("容器配置价目表列表的res:", res);
this._isSpinning = false;
// 错误信息
if (!!res && !!res.error_msg) {
this.nzMessageService.create('error', res.error_msg);
return;
}
this.tableList = res || [];
this.tableTotal = res.total; // 总条数
// 当删除后,分页有问题的时候,重新调用一下search函数!
if (this.tableList.length == 0 && this.tableOffset != 1) {
this.tableOffset = this.tableOffset - 1;
this.search();
}
}
当table使用:[nzCustomNoResult]="true"
的时候,<span noResult>我是没有数据哦</span>
可以自定义没有数据时候的内容。参考:[nz-table-footer]
:表脚(需要在table中:[nzShowFooter]="true"
)。
增加loading动画和no-data的:
注:no-data在nz-table里面。
loading动画,在外面。
注:分页完全不用分页组件,直接把配置都放在table上,是等效的。
分页下拉自定义:
// 属性 // desc // 默认值
nzPageSizeSelectorValues pagination中每页显示条目数下拉框值 Array [10, 20, 30, 40, 50]
低版本中页码数比较大的时候,不居中
table的分页,w32,h32,但是在页数比较多时,eg:1332,不居中了;所以,w32修改为:min-width:32px;
高本版不存在这样的问题。
table行高的问题
如果行中有操作列中的span或者其他标签,那么该行高会高出2px;如果没有,那么是正常的设置高度;
怎么处理这种问题???
固定表头的问题
// 需要给th都加上nzWidth属性,然后:x横向滚动条;y:竖向滚动条,会固定表头;
[nzScroll]="{x:'800px',y: '320px' }"