如何使用MUI Table Pagination限制页面首次加载的表格数据量

核心问题原因：TablePagination仅作为分页UI控件，不会自动截断原始表格数据源，你当前代码直接全量遍历userList渲染表格行，因此仅修改分页组件属性不会生效。

修改步骤 #

1. 声明分页状态，初始值按需求设置首次加载10条
   注意：MUI分页的页码page默认从0开始，你之前写的page={1}属于错误配置，会导致首页数据为空

import { useState } from 'react';

// 组件内部声明状态
const [page, setPage] = useState(0);
const [rowsPerPage, setRowsPerPage] = useState(10);

2. 实现分页切换事件处理函数

const handleChangePage = (event, newPage) => {
  setPage(newPage);
};

const handleChangeRowsPerPage = (event) => {
  setRowsPerPage(+event.target.value);
  setPage(0); // 切换每页条数时自动回到第一页
};

3. 对渲染的数据源做分页切片，不要直接遍历全量userList

// 计算当前页需要渲染的分段数据
const paginatedUserList = userList?.slice(
  page * rowsPerPage,
  page * rowsPerPage + rowsPerPage
) || [];

4. 替换表格渲染逻辑和分页组件配置

<TableContainer sx={{ maxHeight: 440, mt:4 }}>
  <Table>
    <TableHead sx={{backgroundColor:'#F9F9F9'}}>
      <TableRow>
      {columns.map((column) => (
        <TableCell
          key={column.id}
          align={column.align}
          style={{ top: 57, minWidth: column.minWidth, fontWeight:'bold' }}
        >
        {column.label}
        </TableCell>
      ))}
      </TableRow>
    </TableHead>
    <TableBody>
      {/* 替换原userList为切片后的paginatedUserList */}
      {paginatedUserList.map((row) => (
        <TableRow key={row.id}>
          <TableCell>{row.name}</TableCell>
          <TableCell>{row.email}</TableCell>
          <TableCell>{row.role != '' && null ? row.role : '-'}</TableCell>
          <TableCell>{row.status}</TableCell>
          <TableCell >
            <Visibility onClick={handleOpenEditUser} style={{color:'#3167E9'}}/>
            <Delete style={{color:'#F53C56'}}/>
          </TableCell>
        </TableRow>
      ))}
    </TableBody>
  </Table>
</TableContainer>

<TablePagination
  rowsPerPageOptions={[5, 10, 25]}
  component="div"
  count={userList?.length || 0} // count属性赋值为总数据条数
  rowsPerPage={rowsPerPage} // 绑定状态
  page={page} // 绑定状态
  onChangePage={handleChangePage}
  onChangeRowsPerPage={handleChangeRowsPerPage}
/>

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