如何在Antd Table中为大数据实现懒加载滚动

我正在开发一个项目，需要在Ant Design Table组件中实现无限滚动以展示大数据集，数据来源于Laravel后端，希望通过懒加载避免一次性获取全部数据，但目前无法在用户滚动到底部时触发数据加载。

我的配置 #

• 前端：React、Ant Design Table
• 后端：Laravel
• 表格功能：在Ant Design Table中展示数据，通过无限滚动动态获取数据。
• 已完成操作：成功使用Ant Design Table的scroll属性开启垂直滚动，但无法在用户滚动至表格底部时触发数据加载。

具体问题 #

1. 如何在用户滚动至表格底部时正确触发数据获取？
2. 为使滚动事件在Ant Design Table中正常工作，还需进行哪些配置？
3. 是否应使用window.scroll替代onScroll检测滚动事件，或有更好的Ant Design Table无限滚动实现方式？

1. 滚动到底部触发数据获取的实现方式 #

Ant Design Table的滚动容器是内部的div.ant-table-body，需给表格绑定onScroll事件监听这个容器的滚动位置：

const handleTableScroll = (e) => {
  const { scrollTop, scrollHeight, clientHeight } = e.target;
  // 设置10px的阈值，避免滚动到底部时因精度问题无法触发
  if (scrollTop + clientHeight >= scrollHeight - 10) {
    // 加状态锁，避免重复触发请求
    if (!isLoading && hasMore) {
      fetchNextPage();
    }
  }
};

// 在Table组件中绑定事件
<Table
  scroll={{ y: 600 }} // 固定滚动容器高度
  onScroll={handleTableScroll}
  dataSource={dataSource}
  columns={columns}
  // 其他配置
/>

后端Laravel需实现分页接口，接收page和per_page参数，返回对应数据及has_more标识（判断是否还有下一页），前端根据该标识控制加载逻辑。

2. 滚动事件正常工作的必要配置 #

• 必须给scroll.y设置固定数值（如600）：只有固定高度的表格才会生成滚动容器，否则表格自适应高度，无滚动条，滚动事件无法触发。
• 累积更新数据源：每次加载新数据后，需将新数据与旧数据合并，而非替换：

const fetchNextPage = async () => {
  setIsLoading(true);
  const res = await axios.get('/api/your-data', { params: { page: currentPage + 1 } });
  setDataSource(prev => [...prev, ...res.data.data]);
  setCurrentPage(prev => prev + 1);
  setHasMore(res.data.has_more);
  setIsLoading(false);
};

• 添加加载状态锁：通过isLoading状态避免滚动时频繁触发请求，确保上一次请求完成后再触发下一次。

3. 不推荐用window.scroll，优先选择Table内置方案 #

• 不建议用window.scroll：Table的滚动容器是内部独立div，与窗口滚动无关，window的滚动事件无法精准检测表格内部的滚动位置，仅当表格占满整个窗口时才可能生效，适配性极差。
• 推荐实现方式：
  • 优先使用Table自带的onScroll监听内部容器滚动，配合后端分页接口，这种方式最灵活，完全适配Ant Design Table的结构；
  • 若追求更封装的实现，可结合react-infinite-scroll-component包裹Table，但本质仍是监听内部滚动容器，复杂度略高；
  • 官方分页组件配合滚动：设置pagination={{ pageSize: 20, onChange: fetchData }}，但这是分页切换逻辑，并非滚动加载，适合需要页码导航的场景。

内容的提问来源于stack exchange，提问作者Shiba Y.