使用情况:表格高度是固定的,当表格内容长度超过表格高度,内容自动开始滚动

方法一:固定表格高度,不考虑浏览器窗口的自适应

<nz-table
   [nzData]="list"
   [nzShowPagination]="false"
   [nzFrontPagination]="false"
   nzTableLayout="fixed"
   [nzScroll]="{ y: '600px' }"
   [nzTotal]="list?.length"
>
...
</nz-table>

方法二:表格高度根据浏览器窗口的大小进行自适应

Html

表格头配置:

1)为表格外的 div 容器添加 #tableContainer,用于在 ts 中获取div的长度。

2)nzScroll 配置表格的滚动属性,当 y 的值超过 tableHeight 时,表格内容自动开始滚动显示

<div class="table-container Fill" #tableContainer>
          <nz-table
            [nzData]="list"
            [nzShowPagination]="false"
            [nzFrontPagination]="false"
            [nzTotal]="list?.length + 10"
            nzTableLayout="fixed"
            [nzScroll]="{ x: '660px', y: tableHeight + 'px' }"
          >
         ...
         </nz-table>
</div>

TS 

1)tableH 为表格外 div 容器的高度

2)tableHeight 为表格高度的最大值,初始值设为400,实际显示根据 div 容器的高度进行计算

3)添加监听事件,当浏览器窗口大小发生改变后,表格的高度随之进行更新

@ViewChild('tableContainer', { static: false }) tableH: ElementRef;
tableHeight = 400;

ngOnInit () {
    this.getTableHeight();
    // 添加监听事件,当窗口长宽变化后,更新表格的长度
    window.addEventListener('resize', () => this.getTableHeight(), false);
  }

  // 获取表格的长度:表格外DIV的长度 - (表头和表格下 "+" 按钮的长度)
  getTableHeight(): void {
    this.tableHeight = this.tableH.nativeElement.offsetHeight - 110;
  }

  // 取消监听事件
  ngDestroy() {
    window.removeEventListener('resize', () => {}, false);
  }

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐