Question

我正在尝试创建一个p-table并将行分组，但是我无法正确应用虚拟滚动功能。

p-table是PrimeNg框架的一部分。

问题是滚动并进行延迟加载（实际上只是在追加一些行）时，表格显示的是前几行而不是新行。但是，如果我加载所有数据并从头到尾滚动，则所有行都将正确显示。我认为这是在延迟加载后刷新表期间出现的问题。

为了更好地理解此问题，我将其重载为https://stackblitz.com/edit/angular6-primeng-8mtvwc

谢谢您的帮助。

Answer 1

1）使用分组，您设置的totalRecords不正确。我们必须对标题行进行计数，并将其也添加到totalRecords中：

this.totalRecords = this.filteredInvoices.length + Object.keys(this.rowGroupMetadata).length;

2）始终从一开始就切片对我来说并不合理。我们应该只将新行推到表中。所以代替：

  loadChunk(init?: boolean) {
   ...
      data = [...this.filteredInvoices]
    } else {
      data = this.filteredInvoices.slice(0, endIndex); // <===
    }
    ..
  }

您可以执行以下操作：

  loadChunk(init?: boolean) {
    ...
    const startAt = this.displayedInvoices ? this.displayedInvoices.length : 0;
    let endAt = startAt + this.MAX_ROWS;

    if (endAt >= this.filteredInvoices.length) {
      endAt = this.filteredInvoices.length;
    }

    const newInvoices = this.filteredInvoices.slice(startAt, endAt);

    this.displayedInvoices.push(...newInvoices);
  }

更新了您的暴雪，希望对您有帮助：https://stackblitz.com/edit/angular6-primeng-psbm78?file=src/app/home-encoding/home-encoding.component.ts

给克里斯加油

Answer 2

我认为问题在于，PrimeNg内部使用行高进行虚拟滚动，例如，当行的高度不同时，这总是会引起问题。由于您的行已分组，因此您可能会有一个组标题行，这也可以使计算工作变得井井有条。

使用行分组时，priming p表虚拟滚动显示前几行

2 个答案: