Material-UI TablePagination：固定行数及隐藏选择器后显示异常问题

嘿，我明白你遇到的问题了！你已经配置了rowsPerPage={10}并隐藏了行数选择器，但表格还是只显示5行，核心原因是TablePagination只是负责分页的控制逻辑和UI，它不会自动帮你切片表格数据——你需要自己根据分页状态来处理要渲染的行数据。

下面是具体的修正步骤：

1. 检查表格行的渲染逻辑 #

确保你在渲染表格行的时候，使用page和rowsPerPage对原始数据进行切片。比如：

// 假设你的原始数据是rows数组，当前页码是page，每页行数是rowsPerPage
const displayedRows = rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);

// 然后在表格里渲染displayedRows
<TableBody>
  {displayedRows.map((row) => (
    <TableRow key={row.id}>
      {/* 你的单元格内容 */}
    </TableRow>
  ))}
</TableBody>

2. 确认状态的初始值和更新逻辑 #

• 检查rowsPerPage的初始状态是否设为10，而不是默认的5：

  const [rowsPerPage, setRowsPerPage] = useState(10); // 这里要确保初始值是10
  

• 虽然你隐藏了行数选择器，但onChangeRowsPerPage函数还是需要正确更新状态（或者如果完全不需要，可以简化，但为了兼容组件逻辑，建议保留）：

  const handleChangeRowsPerPage = (event) => {
    setRowsPerPage(+event.target.value);
    setPage(0); // 切换每页行数时重置到第一页
  };
  

3. 完整的示例代码片段 #

import { useState } from 'react';
import { Table, TableBody, TableRow, TableCell, TablePagination } from '@mui/material';

function MyTable({ rows }) {
  const [page, setPage] = useState(0);
  const [rowsPerPage, setRowsPerPage] = useState(10); // 初始值设为10

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

  const handleChangeRowsPerPage = (event) => {
    setRowsPerPage(+event.target.value);
    setPage(0);
  };

  // 切片要显示的数据
  const displayedRows = rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);

  return (
    <>
      <Table>
        <TableBody>
          {displayedRows.map((row) => (
            <TableRow key={row.id}>
              <TableCell>{row.name}</TableCell>
              {/* 其他单元格 */}
            </TableRow>
          ))}
        </TableBody>
      </Table>
      <TablePagination
        rowsPerPageOptions={[]} // 隐藏行数选择器
        component="div"
        count={rows.length}
        rowsPerPage={rowsPerPage}
        page={page}
        backIconButtonProps={{ "aria-label": "Previous Page" }}
        nextIconButtonProps={{ "aria-label": "Next Page" }}
        onChangePage={handleChangePage}
        onChangeRowsPerPage={handleChangeRowsPerPage}
      />
    </>
  );
}

这样调整后，表格就会固定每页显示10行数据了。本质是要把分页状态和数据切片逻辑对应起来，TablePagination只负责传递分页状态，实际渲染哪些行还是由你控制的。

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