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
相关产品推荐
相关产品推荐

