Question

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

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

Answer 1

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

Here is some ugly example of how to do it（滚动到一些偏移量并触发页面重新加载）

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
}

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

1 个答案: