angular 表格内容滚动

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

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

<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);
  }