Question

我在Angular应用程序中使用ngx-datatable。我想知道是否可以同时使用垂直滚动和自动行高。这意味着，如果文本插入到表格的单元格中而变大，则行的长度将扩大。如果设置属性[rowHeight] =“'auto'”，则此方法非常理想。但是，当使用[scrollbarV] =“ true”时，由于使用了虚拟滚动机制，因此行高必须为数字。有人对此有解决方法吗？

<ngx-datatable
    style="height: 700px;"
    class="material"
    [columnMode]="'flex'"
    [headerHeight]="50"
    [footerHeight]="40"
    [rowHeight]="'auto'"
    [scrollbarH]="true"
    [scrollbarV]="true"
    [rows]="data">
    <ngx-datatable-column name="test" [flexGrow]="1" [minWidth]="120" [maxWidth]= "120">
      <ng-template let-row="row" ngx-datatable-cell-template>
        {{row}}
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column name="test" [flexGrow]="1" [minWidth]="80">
      <ng-template let-row="row" ngx-datatable-cell-template>
        {{row}}
      </ng-template>
    </ngx-datatable-column>
  </ngx-datatable>

github上有一个未解决的问题，但是建议的解决方案没有用。 https://github.com/swimlane/ngx-datatable/issues/1292

Answer 1

对于未来的求职者：

<ngx-datatable
    class='bootstrap material'
    style="height: 600px; overflow-y:visible"
    [columnMode]="'force'"
    [headerHeight]="50"
    [footerHeight]="50"
    [rowHeight]="'auto'"
    [limit]="20" >

Answer 2

对我来说，以下方法也有效：

ngx-datatable {
  max-height: 70vh;
  overflow-y: scroll;
}

Answer 3

上面的答案使滚动时列标题滚动出视图。将滚动应用于表主体：

<ngx-datatable
    class="bootstrap material"
    columnMode="force"
    headerHeight="50"
    rowHeight="auto"
    >

::ng-deep .ngx-datatable .datatable-body {
    max-height: 300px !important;
    overflow: hidden auto;
}

ngx datatable垂直滚动，并将rowheight设置为auto

3 个答案: