PrimeNG 12升级后Table组件scrollHeight无法适配父div高度问题求解

PrimeNG 12+ 重构了可滚动表格的DOM结构，空数据状态下tbody默认不会自动填充剩余高度，需要配合父容器样式和自定义CSS覆盖默认规则实现需求，你的现有属性配置scrollable=true、autoLayout=true、scrollHeight=flex无需修改，按以下步骤调整即可：

• 第一步：给父div设置明确的高度上下文
  父容器必须具备可计算的高度值，如果你需要父容器自适应上层布局，可设置height: 100%并确保从根节点到父容器的高度链路完整（根节点html、body需设置height: 100%; margin: 0;），同时给父容器添加display: flex; flex-direction: column;属性。
• 第二步：给p-table组件添加自定义类
  给p-table标签添加自定义class，比如full-height-table，用于限制样式覆盖范围，避免污染全局组件样式。
• 第三步：添加自定义CSS覆盖默认规则
  针对PrimeNG内部DOM节点添加flex布局规则，强制空数据状态下的body区域填充剩余高度，样式可写在全局styles.css中，或在组件样式中搭配::ng-deep使用（需在前面加自定义类限制范围）。

完整代码示例 #

组件模板代码 #

<!-- 父容器，可根据需求替换为自适应高度的布局容器 -->
<div style="height: 100%; display: flex; flex-direction: column;">
  <p-table 
    class="full-height-table"
    [value]="dataList" 
    [scrollable]="true" 
    autoLayout="true"
    scrollHeight="flex"
  >
    <!-- 表头配置 -->
    <ng-template pTemplate="header">
      <tr>
        <th>字段1</th>
        <th>字段2</th>
        <th>字段3</th>
      </tr>
    </ng-template>
    <!-- 数据行配置 -->
    <ng-template pTemplate="body" let-item>
      <tr>
        <td>{{item.field1}}</td>
        <td>{{item.field2}}</td>
        <td>{{item.field3}}</td>
      </tr>
    </ng-template>
    <!-- 空状态配置 -->
    <ng-template pTemplate="emptymessage">
      <tr>
        <td colspan="3">暂无匹配数据</td>
      </tr>
    </ng-template>
    <!-- 页脚配置 -->
    <ng-template pTemplate="footer">
      <tr>
        <td colspan="3">页脚固定展示内容</td>
      </tr>
    </ng-template>
  </p-table>
</div>

样式代码（全局styles.css） #

.full-height-table .p-datatable-scrollable-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.full-height-table .p-datatable-scrollable-body {
  flex: 1;
  min-height: 0;
  /* 数据超出时自动滚动 */
  overflow-y: auto;
}

.full-height-table .p-datatable-emptymessage td {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

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