如何让PrimeNG TurboTable适配容器元素尺寸？

我太懂这种痛点了——PrimeNG的scrollHeight属性确实没法直接帮我们自动计算容器内的可用高度（也就是容器总高减去页眉、页脚这些元素的高度），只能写固定值或者靠CSS hack来绕。先说说你目前用::ng-deep的临时方案怎么优化，再聊聊更“合规”的替代思路：

一、优化现有SCSS方案（缩小::ng-deep的影响范围） #

虽然::ng-deep已经被标记为废弃，但在Angular没给出完美替代前，我们可以尽量缩小它的作用范围，避免全局样式污染：

// 给你的表格组件加一个自定义类，比如app-table-auto-height
:host(.app-table-auto-height) ::ng-deep {
  .ui-table {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .ui-table-scrollable-wrapper {
    flex: 1;
    overflow: hidden;
  }

  .ui-table-scrollable-body {
    max-height: none !important;
    flex: 1;
    overflow-y: auto;
  }
}

然后在表格组件标签上加上这个类：<p-table class="app-table-auto-height"></p-table>，这样::ng-deep只会影响这个特定的表格，不会乱改全局样式。

二、用Angular组件类动态计算高度（彻底替代::ng-deep） #

如果不想依赖::ng-deep，可以通过组件类实时计算可用高度，再赋值给scrollHeight，这种方法还能适配页眉页脚高度变化的场景：

1. 先给容器、页眉、页脚加模板引用变量：

<div #tableContainer class="table-container">
  <div #tableHeader>表格页眉内容</div>
  <p-table [scrollHeight]="calculatedScrollHeight"></p-table>
  <div #tableFooter>表格页脚内容</div>
</div>

2. 在组件类里获取元素、计算高度：

import { Component, ViewChild, ElementRef, OnInit, AfterViewChecked, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-your-table',
  templateUrl: './your-table.component.html',
  styleUrls: ['./your-table.component.scss']
})
export class YourTableComponent implements OnInit, AfterViewChecked, OnDestroy {
  @ViewChild('tableContainer') tableContainer!: ElementRef;
  @ViewChild('tableHeader') tableHeader!: ElementRef;
  @ViewChild('tableFooter') tableFooter!: ElementRef;
  calculatedScrollHeight = '0px';
  private resizeListener!: () => void;

  ngOnInit() {
    this.resizeListener = () => this.updateScrollHeight();
    window.addEventListener('resize', this.resizeListener);
    this.updateScrollHeight();
  }

  ngAfterViewChecked() {
    // 防止数据加载后页眉/页脚高度变化导致计算不准
    this.updateScrollHeight();
  }

  ngOnDestroy() {
    window.removeEventListener('resize', this.resizeListener);
  }

  private updateScrollHeight() {
    if (this.tableContainer && this.tableHeader && this.tableFooter) {
      const containerHeight = this.tableContainer.nativeElement.offsetHeight;
      const headerHeight = this.tableHeader.nativeElement.offsetHeight;
      const footerHeight = this.tableFooter.nativeElement.offsetHeight;
      // 留16px边距避免滚动条和元素重叠，可根据需求调整
      this.calculatedScrollHeight = `${containerHeight - headerHeight - footerHeight - 16}px`;
    }
  }
}

这种方法完全不需要依赖::ng-deep，还能动态适配视图变化，比纯CSS方案更灵活。

三、关于PrimeNG原生支持的说明 #

目前PrimeNG表格还没有原生支持自动计算scrollHeight的属性，不过你可以关注他们的GitHub Issues或者官方文档，说不定后续版本会加入类似scrollHeight="auto"的选项。在那之前，上面两种方法应该能解决你的问题。

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