React中Material Table懒加载实现咨询：能否同时支持滚动加载与按钮分页？

首先肯定地说，在Material Table中实现滚动懒加载完全可行，而且也可以同时保留按钮分页功能，满足不同用户的操作习惯。下面结合你的现有代码给出具体实现方案：

一、实现滚动加载（懒加载） #

Material Table本身没有内置滚动加载，但我们可以通过监听表格容器的滚动事件来实现，步骤如下：

1. 添加滚动监听逻辑
   先在组件内创建一个ref用于获取表格容器，再通过useEffect绑定滚动监听：

   const tableContainerRef = useRef(null);
   
   useEffect(() => {
     const container = tableContainerRef.current;
     if (!container) return;
   
     const handleScroll = () => {
       // 判断是否滚动到容器底部附近（20px的阈值可按需调整）
       const isAtBottom = container.scrollTop + container.clientHeight >= container.scrollHeight - 20;
       // 未处于加载状态时，触发下一页请求
       if (isAtBottom && !props.isLoading) {
         const nextPage = props.pageCount.current + 1;
         // 校验是否还有下一页
         if (nextPage <= Math.ceil(props.pageCount.total / props.pageCount.limit)) {
           handlePageChange(null, nextPage);
         }
       }
     };
   
     container.addEventListener('scroll', handleScroll);
     // 组件卸载时移除监听
     return () => container.removeEventListener('scroll', handleScroll);
   }, [props.pageCount.current, props.pageCount.total, props.pageCount.limit, props.isLoading]);
   

2. 修改容器组件配置
   给你的自定义Container组件绑定ref，并设置滚动样式，让容器可滚动：

   Container: props => <Paper ref={tableContainerRef} {...props} elevation={0} style={{ overflowY: 'auto', maxHeight: '80vh' }} />
   

   这里的maxHeight可以根据你的页面布局调整，确保表格内容超出后会出现滚动条。

3. 完善分页加载逻辑
   确保handlePageChange函数能正确加载对应页码的数据，并且在请求过程中设置isLoading状态，避免重复触发加载。

二、同时保留按钮分页和滚动加载 #

要同时支持两种分页方式，只需要在现有自定义Pagination组件的基础上，保留上面的滚动监听逻辑即可，额外注意两点：

• 当用户通过按钮切换页码时，重置滚动条到容器顶部，避免滚动状态混乱：

  const handlePageChange = (e, newPageNumber, MTprops) => {
    // 你的现有分页请求逻辑
    // ...
    // 滚动到容器顶部
    if (tableContainerRef.current) {
      tableContainerRef.current.scrollTop = 0;
    }
  };
  

• 严格控制isLoading状态，不管是滚动触发还是按钮触发，加载中都不允许再次发起请求。

三、整合后的代码示例 #

结合你提供的现有代码，整合后的关键部分如下：

import { useRef, useEffect } from 'react';
import MaterialTable from 'material-table';
import { Paper, TablePagination, TablePaginationActions, TableCell as MTableCell } from '@mui/material';

// 组件内部逻辑
const tableContainerRef = useRef(null);

useEffect(() => {
  const container = tableContainerRef.current;
  if (!container) return;

  const handleScroll = () => {
    const isAtBottom = container.scrollTop + container.clientHeight >= container.scrollHeight - 20;
    if (isAtBottom && !props.isLoading) {
      const nextPage = props.pageCount.current + 1;
      if (nextPage <= Math.ceil(props.pageCount.total / props.pageCount.limit)) {
        handlePageChange(null, nextPage);
      }
    }
  };

  container.addEventListener('scroll', handleScroll);
  return () => container.removeEventListener('scroll', handleScroll);
}, [props.pageCount.current, props.pageCount.total, props.pageCount.limit, props.isLoading]);

const handlePageChange = (e, newPageNumber, MTprops) => {
  // 你的现有分页处理逻辑
  // ...
  // 切换页码后滚动到顶部
  if (tableContainerRef.current) {
    tableContainerRef.current.scrollTop = 0;
  }
};

// 渲染MaterialTable
<MaterialTable
  // 其他配置props...
  components={{ 
    Cell: props => ( 
      <MTableCell 
        onDragStart={e => e.preventDefault()} 
        onContextMenu={e => { handleEvent(e, props.rowData.tableData.id, props.rowData); }} 
        {...props} 
      /> 
    ), 
    Pagination: MTprops => ( 
      <TablePagination 
        {...MTprops} 
        count={props.pageCount.total} 
        page={props.pageCount.current} 
        rowsPerPage={props.pageCount.limit} 
        onChangePage={(e, newPageNumber) => handlePageChange(e, newPageNumber, MTprops)} 
        onChangeRowsPerPage={(e) => {handleRowsPerPageChange(e, MTprops); }} 
        ActionsComponent={TablePaginationActions} 
      /> 
    ), 
    Container: props => <Paper ref={tableContainerRef} {...props} elevation={0} style={{ overflowY: 'auto', maxHeight: '80vh' }} /> 
  }}
/>

注意事项 #

• 滚动触发的阈值（代码中的20）可以根据需求调整，让用户在接近底部时提前触发加载，提升体验。
• 如果表格存在动态高度变化（比如展开行、动态内容），需要在高度变化时重新校验滚动状态，避免误触发加载。
• 务必处理加载失败的情况，防止因请求失败导致无法继续加载下一页。

内容的提问来源于stack exchange，提问作者Mister Fredy