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

Question

PrimeNG DataTable 提供了 [scrollable] 属性来定义垂直 and/or 水平滚动。这必须与一组 scrollHeight and/or scrollWidth.

组合使用

我怎样才能拥有一个 table 来适应 window 的任何 height/width 并保持可滚动的特性？

这是我试过的代码：

<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>

但它只是解决了响应宽度的问题。在屏幕截图上，您可以看到可水平滚动的 table：

由于 p-dataTable 的 height 属性在百分比值的情况下是相对于父级的，因此我尝试通过添加 [= 使父级 div 适合内容19=] 给父 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 文件进行了以下更改以使其正常工作（在 Whosebug 上的其他一些问题中发现了这一点）：

html, body {
  height: 100%;
}

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

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

Answer 1

我不知道这是否完全符合您的情况，但我通过将 scrollHeight 数据表属性设置为：

解决了我的问题

scrollHeight="50vh"

vh指的是：

vh 相对于 viewport

高度的 1%

视口 = 浏览器window大小。如果视口为50cm宽，则1vw = 0.5cm.

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

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

Answer 2

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

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

Answer 3

ScrollHeight 需要为 100%。

Answer 4

你可以在ts文件中获取内部高度和内部宽度，如

setInnerWidthHeightParameters()
  {
    this.innerWidth = window.innerWidth;
    this.innerHeight = window.innerHeight * 0.70;
  }

并将其用作

[scrollHeight]="innerHeight +'px'"

动态设置，对我有用。

Answer 5

其他搜索类似问题的，我是这样解决的：

在模板中用（例如）#leftSidebar
标记 PARENT div
在组件中使用子视图：

@ViewChild('leftSidebar', { static: true }) leftSidebar: ElementRef;
您可以像这样访问它并获取位置和大小：

让 rect: any = this.leftSidebar.nativeElement.getBoundingClientRect(); 让 x: 数字 = rect.x; 让 y: 数字 = rect.y; 让宽度：数字=rect.width；让身高：数字= rect.height;
你可以像上面描述的亚瑟那样做并设置：

[scrollHeight]="高度+'px'"

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

Primeng make scrollable datatable height responsive

css

angular

primeng

primeng-datatable