极客观点
项目管理
HarmonyOS
PrimeNG DataTable 提供 [scrollable] 属性来定义垂直和/或水平滚动。这必须与一组 scrollHeight 和/或 scrollWidth 的组合一起使用。
我怎样才能拥有一个可以调整到窗口的高度/宽度并保持可滚动功能的表格？
这是我尝试过的代码：
<div class="ui-g-12">
<p-dataTable class="ui-g-12" [value]="rows" [hidden]="this.apiService.spinnerIsVisible"
[style]="{ height: 'fit-content', 'margin-top': '10px' }"
[resizableColumns]="false" columnResizeMode="fit" emptyMessage="No records found"
[responsive]="false"
[globalFilter]="tableSearch"
[editable]="true"
[scrollable]="true" scrollHeight="100%" scrollWidth="100%">
<p-header>
<button pButton type="button" icon="fa-refresh" (click)="refresh()" style="float:left"></button>
<label for="tableSearch">Global search: </label>
<input id="tableSearch" #tableSearch type="text" placeholder="type here">
</p-header>
<p-column
*ngFor="let col of cols" [header]="col" [field]="col"
[style]="{'width': '250px', 'min-width': '50px', 'word-wrap': 'break-word'}"
[sortable]="true"
[filter]="true" filterPlaceholder="" filterMatchMode="contains"
[editable]="true">
</p-column>
</p-dataTable>
</div>
但它只解决了响应宽度问题。在屏幕截图中，您可以设置可水平滚动的表格： 
由于 --- 的 p-dataTable height 属性在百分比值的情况下是相对于父级的，我试图通过添加 style="height: 100%" div 来使父级适应内容 --- 到父 div 。这是更新的代码：
<div class="ui-g-12" style="height: 100%">
<p-dataTable class="ui-g-12" [value]="rows" [hidden]="this.apiService.spinnerIsVisible"
[style]="{ height: 'fit-content', 'margin-top': '10px' }"
[resizableColumns]="false" columnResizeMode="fit" emptyMessage="No records found"
[responsive]="false"
[globalFilter]="tableSearch"
[editable]="true"
[scrollable]="true" scrollHeight="100%" scrollWidth="100%">
<p-header>
<button pButton type="button" icon="fa-refresh" (click)="refresh()" style="float:left"></button>
<label for="tableSearch">Global search: </label>
<input id="tableSearch" #tableSearch type="text" placeholder="type here">
</p-header>
<p-column
*ngFor="let col of cols" [header]="col" [field]="col"
[style]="{'width': '250px', 'min-width': '50px', 'word-wrap': 'break-word'}"
[sortable]="true"
[filter]="true" filterPlaceholder="" filterMatchMode="contains"
[editable]="true">
</p-column>
</p-dataTable>
</div>
我还对我的 styles.scss 文件应用了以下更改以使其工作（在stackoverflow上的其他一些问题中找到了这个）：
html, body {
height: 100%;
}
但这对我也不起作用： 
在屏幕截图上，高度似乎是正确的，但事实并非如此。当我向下滚动时，首先，它应该按原样进行，但是当接近表格的末尾时，滚动条会从视图中出来，所以当我仍然能够滚动时我看不到它。所以看起来数据表比它应该的高一点。
那么我该如何解决呢？任何帮助，将不胜感激！
原文由 Nikita Marinosyan 发布，翻译遵循 CC BY-SA 4.0 许可协议
我不知道这是否完全符合您的情况，但我通过将 scrollHeight 数据表属性设置为：
vh 是指：
vh 相对于 视口 高度的 1%
视口 = 浏览器窗口大小。如果视口宽 50 厘米，则 1vw = 0.5 厘米。
您可以测试不同的 vh 值，看看哪个更合适。
更多信息： https ://www.w3schools.com/cssref/css_units.asp