html - ngx 数据表垂直滚动，行高设置为自动

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 上有一个 Unresolved 问题，但建议的解决方案不起作用。 https://github.com/swimlane/ngx-datatable/issues/1292

Answer 1

当您滚动时，上面的答案会使列标题滚出 View 。改为将滚动应用到表体:

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

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