PrimeNG 表延迟加载在先设置属性时无法正常工作

Question

我们将PrimeNG <p-table>组件与virtualScroll = true&lazy = true一起使用。但它在以下情况下不起作用。

假设总共有 100 条记录，限制为 10。用户滚动并看到偏移量为 50 的项目，他单击该项目并转到该项目的详细信息页面。现在，当用户单击浏览器后退按钮时，我需要将他带回他在<p-table>中查找的同一页面，为此，我将属性设置为[first] = 50并且它显示正确的页面，但是当我滚动时，发出的事件包含偏移量 10 而不是 60， 为什么？

Answer 1

当您使用[first]="50"时，您将从前 50 个元素中删除数据。我建议改为跟踪表scrollTop偏移量并将其存储在例如本地存储或其他服务中。然后，当您返回表视图时，只需将scrollTop还原到表滚动正文即可。

这是一些如何做到这一点的丑陋示例(滚动到一些偏移量并触发页面重新加载(

ngAfterViewInit() {
  const scrollableBody = this.table.containerViewChild.nativeElement.getElementsByClassName('ui-table-scrollable-body')[0];
  // listen for scrollTop changes
  scrollableBody.onscroll = (x) => {
    localStorage.setItem('scrollTop', scrollableBody.scrollTop);
  }
}
loadItemsLazy(event: any) {
  // immitated lazy data load
  setTimeout(() => {
    if (this.datasource) {
      this.items = this.datasource.slice(event.first, (event.first + event.rows));
    }
    // we need change scrollableBody.scrollTop
    // check some condition for doing it after returning from edit or something
    if (this.restoreOffset) {
      setTimeout(() => {
        const scrollableBody = this.table.containerViewChild.nativeElement.getElementsByClassName('ui-table-scrollable-body')[0];
        // restore last known offset
        scrollableBody.scrollTop = Number.parseInt(localStorage.getItem('scrollTop')) || 0;
      });
    }
  }, 2000); // some random data load time
}