灌注使可滚动的数据表高度响应

Question

PrimeNG DataTable提供了[scrollable]定义垂直和/或水平滚动的属性。必须与set 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>

但这仅解决了响应宽度问题。在屏幕截图中，您可以查看可水平滚动的表：

由于在百分比值的情况下的height属性p-dataTable是相对于父级的，因此我尝试div通过添加style="height: 100%"到父级使父级适合内容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%;
}

但这对我也不起作用： 在屏幕截图上，高度似乎是正确的，但事实并非如此。当我向下滚动时，首先，它会按预期进行，但是在接近表格末尾时，滚动条从视图中移出，因此我仍然可以滚动时看不到它。因此，似乎数据表比应该的要高一点。

那么我该如何解决呢？任何帮助，将不胜感激！

Answer 1

我在使用它p-table（不确定是否可以使用p-datatable）。

[scrollHeight]="'calc(100vh - 204px)'"

Answer 2

Prime NG 表引入了用于视口高度调整的 Flex 模式

scrollHeight="flex"

它将占据父元素的完整高度。

Answer 3

我不知道这是否完全适合您的情况，但是我通过将scrollHeight datatable属性设置为以下方式解决了我的问题：

scrollHeight="50vh"

vh是指：

vh 相对于视口高度的1％

视口 =浏览器窗口大小。如果视口为50厘米宽，则1vw = 0.5厘米。

您可以测试vh的不同值，然后看哪个更合适。

更多信息：https : //www.w3schools.com/cssref/css_units.asp