You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

PrimeNG表格高度适配求助:完美填充ng-content方案

PrimeNG表格自适应ng-content容器高度问题

我需要实现一个支持50行滚动的PrimeNG表格,要求完美适配ng-content容器,但调整表格高度的尝试均未成功。目前仅能设置固定高度(如800px),但会导致页面底部出现留白。已尝试设置[scrollHeight]="'flex'"和[scrollHeight]="calcHeight()",均无效果。

表格组件代码

<p-panel header="აქტიური სია" @myInsertRemoveTrigger>
  <div #tableDiv class="">
    <p-table
      [columns]="activeListTableColumns"
      [value]="tableData.data"
      dataKey="id"
      [paginator]="true"
      [rows]="20"
      [scrollable]="true"
      [scrollHeight]="'800px'"
      [lazy]="true"
      (onLazyLoad)="lazyLoad($event)"
      [totalRecords]="tableData.total"
      [tableStyle]="{ 'min-width': '150rem' }">
      <ng-template pTemplate="header" let-columns>
        <tr>
          @for(column of columns; track $index) {
            <th>{{ column.header }}</th>
          }
        </tr>
      </ng-template>
      <ng-template pTemplate="body" let-rowData let-columns="columns">
        <tr>
          @for(column of columns; track $index) {
            <td>{{ rowData[column.field] }}</td>
          }
        </tr>
      </ng-template>
    </p-table>
  </div>
</p-panel>

布局组件代码

<main class="flex flex-column gap-1 h-full">
  <p-menubar class="fadein animation-duration-2000 animation-ease-in-out" [model]="menuItems">
    <ng-template pTemplate="start">
      <div class="flex flex-row justify-content-between align-items-center gap-1">
        <img ngSrc="assets/svg/tbc.svg" height="40" class="mr-2" alt="tbc" width="40"/>
        <span class="font-bold">Risk Check Engine</span>
      </div>
    </ng-template>
    <ng-template pTemplate="end">
        <p-chip styleClass="pl-0 pr-3">
          <span class="bg-primary border-circle w-2rem h-2rem flex align-items-center justify-content-center">{{authService.getUser().fullName[0]}}</span>
          <span class="ml-2 font-medium">{{authService.getUser().fullName}}</span>
        </p-chip>
        <p-button icon="pi pi-sign-out" [rounded]="true" severity="danger" [outlined]="true" (click)="logout()"></p-button>
    </ng-template>
  </p-menubar>

  <div class="fadein animation-duration-2000 animation-ease-in-out h-full">
    <ng-content></ng-content>
  </div>
</main>

请问是否有其他开发者遇到过此类问题,或有可行的解决方案?


内容的提问来源于stack exchange,提问作者David Khvedelidze

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.25 09:02:16