Question

使用带有p-checkbox的p-table时，我遇到一些性能问题。表格大约有1000行15列，其中10列仅包含复选框。

因此，在最后一个表中包含10000个复选框。当我从表中删除复选框时，该表需要生成的时间大约等于5s。当复选框可见时，时间会增加到20秒左右！

该表仅包含1000行，当然包括排序，过滤，但是正如我之前写的那样，当我删除复选框时，生成表的时间大约为5s。

那么问题出在哪里呢？即使当我完全清空复选框声明时，也是如此：

        <p-checkbox binary="true">
        </p-checkbox>

时间仍然很大。这是我的表的结构：

<p-table
  [value]="data">
  <ng-template pTemplate="caption">
  </ng-template>

  <ng-template pTemplate="header">
    <tr>
      <th class="toggle-column"></th>
      <!-- LAST NAME COLUMN -->
      <th class="lastname-column" [pSortableColumn]="'lastName'">
      </th>
  </ng-template>

  // BODY DEFINITION - CHECKBOXES
  <ng-template pTemplate="body" let-row let-expanded="expanded" 
   let-rowIndex="rowIndex">
    <tr>
      <td class="toggle-column"></td>
      <td *ngFor="let col of columns" class="{{col.styleClass}}">
        <span class="ui-column-title">{{col.header}}</span>
        <p-checkbox
          binary="true"
          [disabled]="!isEditable"
          [(ngModel)]="row[col.field]"
          (onChange)="toggle($event, col.field, rowIndex)">
        </p-checkbox>
      </td>
    </tr>
  </ng-template>

  <ng-template let-row pTemplate="rowexpansion">
    <tr>
      <td>
        <table class="expanded-table">
          <tr *ngFor="let user of row.userGroup.members" class="expanded-row">
            ...
          </tr>
        </table>
      </td>
    </tr>
  </ng-template>

  <ng-template pTemplate="emptymessage">
    <tr>
      <td [attr.colspan]="tableConfig.colspan">
        {{'ui.noRecordsFound'}}
      </td>
    </tr>
  </ng-template>
</p-table>

分页和滚动上的延迟加载是不可能的-我的客户不希望这样做。他想立即看到孔表。

我还考虑过使用ChangeDetectionStrategy.OnPush，但是每次添加新的复选框ngOnChanges和ngDoCheck（我将主体模板分为3个组件来测试这种孔变化检测的东西-例如，您在上面看到的所有内容都在一个组件中）。

我想我可以使用本机复选框，我已经检查过了，时间也很不错，大约8秒。但是我使用primeNg框架是有原因的，对吧！

主要问题是p-checkbox组件，它运行非常慢，我知道问题不在于渲染，因为我检查了探查器-“引擎盖后面”发生的事情需要大量时间-我认为问题出在变化检测上，而不是渲染本身。

那么您是否知道我该如何改善餐桌？

如何提高包含复选框的primeNg表的性能

0 个答案: