Question

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>

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

由于height的{{1}}属性在百分比值的情况下相对于父级，我尝试通过添加{{1}来使父p-dataTable符合内容}到父div。这是更新的代码：

style="height: 100%"

我还对我的div文件应用了以下更改以使其正常工作（在stackoverflow上的其他一些问题中找到了这一点）：

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

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

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

Answer 1

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

解决了我的问题

scrollHeight="50vh"

vh 指的是：

vh 相对于视口的高度的1％

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

您可以测试 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;
您可以访问它并获取位置和大小，如下所示：

let rect：any = this.leftSidebar.nativeElement.getBoundingClientRect（）; 令x：数字= rect.x; 令y：数字=矩形y; let width：数字=矩形宽度； let height：number = rect.height;
您可以像上面描述的Arthur一样进行设置：

[scrollHeight] =“ height +'px'”

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

5 个答案: