如何让ng-zorro表格滚动条随浏览器窗口动态调整？

核心思路 #

让表格容器的尺寸随窗口实时变化，结合ng-zorro表格的滚动配置，再通过监听窗口resize事件动态调整参数，实现滚动条的自适应。

具体实现步骤 #

1. 给表格容器绑定动态样式 #

在组件模板中，为nz-table的外层容器设置动态高度，同时配置表格的滚动参数：

<div class="table-wrap" [style.height.px]="tableAvailableHeight">
  <nz-table [nzData]="tableData" [nzScroll]="{ y: tableAvailableHeight - 60 }">
    <!-- 表格列定义 -->
    <thead>
      <tr>
        <th>序号</th>
        <th>名称</th>
        <th>详情</th>
        <!-- 更多列 -->
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let item of tableData">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.desc}}</td>
      </tr>
    </tbody>
  </nz-table>
</div>

2. 监听窗口resize事件计算高度 #

在组件类中，通过HostListener监听窗口尺寸变化，实时计算表格的可用高度：

import { Component, HostListener, OnInit } from '@angular/core';

@Component({
  selector: 'app-adaptive-table',
  templateUrl: './adaptive-table.component.html',
  styleUrls: ['./adaptive-table.component.css']
})
export class AdaptiveTableComponent implements OnInit {
  tableAvailableHeight = 0;
  tableData = [/* 你的业务数据 */];

  ngOnInit(): void {
    // 初始化时先计算一次高度
    this.calcTableHeight();
  }

  @HostListener('window:resize')
  onWindowResize(): void {
    this.calcTableHeight();
  }

  private calcTableHeight(): void {
    // 减去页面固定元素的高度（比如导航栏、页脚，这里假设总高度为120px）
    const fixedAreaHeight = 120;
    this.tableAvailableHeight = window.innerHeight - fixedAreaHeight;
  }
}

3. 横向滚动自适应（可选） #

如果需要横向滚动也适配窗口宽度，可给nzScroll添加x轴配置，同时设置容器宽度为100%：

<div class="table-wrap" [style.height.px]="tableAvailableHeight" style="width: 100%; overflow-x: auto;">
  <nz-table [nzData]="tableData" [nzScroll]="{ y: tableAvailableHeight - 60, x: '1300px' }">
    <!-- 列定义 -->
  </nz-table>
</div>

这里的x: '1300px'是表格的最小宽度，当窗口宽度小于该值时会触发横向滚动，可根据实际列宽调整数值。

4. 性能优化（可选） #

频繁触发resize事件可能影响性能，可添加防抖处理：

import { debounceTime, fromEvent } from 'rxjs';

// 替换HostListener的方式，在ngOnInit中监听
ngOnInit(): void {
  this.calcTableHeight();
  fromEvent(window, 'resize')
    .pipe(debounceTime(100))
    .subscribe(() => {
      this.calcTableHeight();
    });
}

防抖设置为100ms，确保窗口尺寸稳定后再更新表格高度，减少DOM频繁操作。

注意事项 #

• 确保表格外层容器没有固定高度，完全依赖动态计算值
• 若页面存在折叠面板、动态弹窗等元素，需在这些元素状态变化时重新调用calcTableHeight()
• 多终端测试（手机、平板、桌面），调整固定区域高度数值以适配不同布局

内容的提问来源于stack exchange，提问作者ludodev69