PrimeNG Turbo Table懒加载滚动事件获取问题求助

我来帮你搞定这个滚动事件不触发的问题，先从几个关键的点排查起：

1. 先修正最明显的方法名不匹配问题 #

看你的模板代码里绑定的是(onLazyLoad)="loadDataOnScroll($event)"，但组件里的方法名是loadDataOnScroll1——这两个名字不一致，肯定不会触发事件！先把模板里的方法名改成和组件里一致的，比如改成(onLazyLoad)="loadDataOnScroll1($event)"，这是最基础的错误，先解决这个。

2. 确认Virtual Scroll与Lazy Load的配合逻辑 #

当你开启[virtualScroll]="true"时，PrimeNG的Turbo Table不会在每次滚动都触发onLazyLoad，而是会在滚动到需要加载新数据的位置（比如接近底部）时才触发。所以首先要确保：

• totalRecords的数值必须大于rows（你设置的是25），如果总数据量小于等于25，自然不会触发滚动加载
• scrollHeight设置正确（你设了500px，这个没问题），确保表格有足够的滚动空间

3. 添加Virtual Row Height配置（如果行高不固定） #

如果你的表格行高不是固定的，PrimeNG可能无法准确计算滚动位置来触发懒加载。可以手动添加[virtualRowHeight]="你的行高数值"属性，比如：

<p-table #dt dataKey="id" [columns]="columns" [value]="gridData" [scrollable]="true" sortMode="single" scrollHeight="500px" *ngIf="isDataLoading" (onLazyLoad)="loadDataOnScroll1($event)" [lazy]="true" [rows]="25" [totalRecords]="recordTotal" [(selection)]="selectedRows" (onRowSelect)="onRowUnselect($event)" (onHeaderCheckboxToggle)="onHeaderCheckboxToggle($event)" selectionMode="multiple" [virtualScroll]="true" [virtualRowHeight]="35" > </p-table>

数值根据你实际的行高调整，比如35px左右，这样组件能更精准地判断何时加载新数据。

4. 手动监听滚动容器排查问题 #

如果上面的配置都没问题，你可以在组件里手动监听表格的滚动容器，确认滚动事件本身是否能被捕获：

import { ViewChild, AfterViewInit } from '@angular/core';
import { Table } from 'primeng/table';

// ...

@ViewChild('dt') dt!: Table;

ngAfterViewInit() {
  // 获取表格的滚动容器
  const scrollBody = this.dt.el.nativeElement.querySelector('.p-table-scrollable-body');
  if (scrollBody) {
    scrollBody.addEventListener('scroll', (e: Event) => {
      console.log('滚动事件已触发！', e);
      // 手动判断是否到达底部，模拟懒加载触发
      const container = e.target as HTMLElement;
      if (container.scrollTop + container.clientHeight >= container.scrollHeight - 10) {
        console.log('已滚动至底部，应该触发懒加载');
        // 这里可以构造LazyLoadEvent对象调用你的方法
        // 比如：this.loadDataOnScroll1({ first: this.currentPage * 25, rows: 25 } as LazyLoadEvent);
      }
    });
  }
}

如果这个手动监听能打印日志，说明滚动事件本身是正常的，问题出在PrimeNG的懒加载配置上；如果没打印，那可能是表格的滚动容器被其他样式覆盖，导致滚动事件无法传递。

5. 检查LazyLoadEvent参数 #

当滚动触发懒加载时，LazyLoadEvent里的first和rows会对应当前要加载的起始索引和数量。你可以在loadDataOnScroll1方法里直接打印这两个值：

loadDataOnScroll1(event: LazyLoadEvent) {
  console.log('当前加载起始索引：', event.first);
  console.log('每页加载数量：', event.rows);
  // 其他逻辑...
}

如果这两个值正确变化，说明懒加载已经正常触发，只是你之前的条件判断没覆盖到滚动的情况——比如滚动触发时，event.sortField和event.globalFilter都是undefined，应该会进入最后的else分支，你可以在else分支里直接打印日志确认。

按照上面的步骤排查，应该就能解决滚动不触发懒加载的问题了！

内容的提问来源于stack exchange，提问作者Ranveer Singh Rajpurohit