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

Posted 2023-03-06

【中文标题】Primeng 使可滚动的数据表高度响应

【英文标题】：Primeng make scrollable datatable height responsive

【发布时间】：2018-05-06 19:03:13

【问题描述】：

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 文件进行了以下更改以使其正常工作（在 *** 上的其他问题中找到了这一点）：

html, body 
  height: 100%;

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

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

【问题讨论】：

哥们，这个问题你解决了吗？在这里尝试同样的事情。

【参考方案1】：

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

scrollHeight="50vh"

vh 指：

vh 相对于视口高度的 1%

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

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

更多： https://www.w3schools.com/cs-s-ref/css_units.asp

【参考方案2】：

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

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

【讨论】：

您能解释一下为什么将 vh 值减去 204px 吗？

不起作用：```删除了百分比滚动高度计算，以支持更高性能的基于 CSS 的 flex 模式，请改用 scrollHeight="flex"。 ````

【参考方案3】：

ScrollHeight 需要为 100%。

【参考方案4】：

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

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

并将其用作

[scrollHeight]="innerHeight +'px'"

动态设置它对我有用。

【参考方案5】：

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

在模板中使用（例如）#leftSidebar 标记 PARENT div

在组件中使用视图子：

@ViewChild('leftSidebar', static: true ) leftSidebar: ElementRef;

您可以像这样访问它并获取位置和大小：

让 rect: any = this.leftSidebar.nativeElement.getBoundingClientRect(); 让 x: number = rect.x; 让 y: number = rect.y; 让宽度：数字=矩形宽度； let height: number = rect.height;

你可以像上面描述的亚瑟那样做：

[scrollHeight]="height+'px'"