antd-table

<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' }"
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值