如何将 p-table 的高度设置为 window 高度

Question

问题：我试图在 angular 中设置素数 p 表的高度。 我已经在网上搜索并发现了很多结果，但到目前为止没有一个有效（可能是由于这个问题存在多年并且对框架的更改禁用了某些解决方案）。

我已经尝试了两种方法，第一种方法在下面的代码中。 第二个是将p-table的父div的高度设置为innerWindowHeight，并将p-table的scrollheight设置为flex（也不起作用）。

工具：新项目中的 Angular 14.2.0 和 PrimeNG 14.1.1

我在app.component.html中有以下 html 代码：

<div>
 <p-table #table
       (window:resize)="onResize()"
       [value]="data"
       [paginator]="true"
       [showCurrentPageReport]="true"
       [scrollable]="true"
       [scrollHeight]="tableScrollHeight"
       [rows]="10"
       [rowsPerPageOptions]="rowsPerPage"
       styleClass="p-datatable-gridlines p-datatable-striped p-datatable-sm"
       currentPageReportTemplate="{first} to {last} of {totalRecords} records">
  <ng-template pTemplate="header">
   <tr>
     <th>Date</th>
     <th>ID</th>
     <th>Description</th>
     <th>Value</th>
     <th>Tax</th>
   </tr>
  </ng-template>
  <ng-template pTemplate="body" let-entry>
   <tr>
     <td>{{entry.date}}</td>
     <td>{{entry.id}}</td>
     <td>{{entry.description}}</td>
     <td>{{entry.value}}</td>
     <td>{{entry.tax}}</td>
   </tr>
  </ng-template>
 </p-table>
</div>

以及以下app.component.ts ：

import {Component} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Testapp';
  data: any[];
  tableScrollHeight: string = "700px";
  rowsPerPage: number[] = [5, 10, 20, 50];

  constructor() {
    this.data = [];
    let entry: any = {};
    entry.description = "First entry";
    this.data.push(entry);
  }

  onResize() {
    this.tableScrollHeight = window.innerHeight + 'px';
  }
}

我想要实现的行为：我想要的是，即使表格为空或没有足够的条目来填充 window 并且表格是可滚动的（标题停留在顶部），Paginator 也会停留在 window 的底部只要表格行大于屏幕尺寸。

为了澄清我想要在这里完成的屏幕截图它的外观：它现在看起来如何

这是我希望它看起来的屏幕截图：它应该是什么样子

问题：是否有可能以干净的方式完成此任务？

就像评论中建议的那样，我添加了一个stackblitz ： https://angular-ivy-sfk7pw.stackblitz.io

编辑：我发现如果您使用 class p-datatable-wrapper在表格内设置一个div的 scrollHeight （从primeng生成），则会获得样式“ max-height : XXX px”，其中XXX是来自 tableScrollHeight 的值。 我可能会编写一个 CSS 选择器来将样式更改为 min-width 但这可能不是一个好主意，因为我必须从 typscript 文件访问 dom 并搜索自动生成的 div。

Answer 1

也许您可以尝试将此样式添加到您的css/scss中，但这不是最佳实践。

.p-datatable-wrapper {
  min-height: calc(100vh - 90px);
}

注意： 100vh是您的屏幕高度， 90px是您的分页高度示例。

而已。 我希望它可以帮助。