本文介绍如何在 material-ui 的 pagination 组件旁集成“每页显示数量”下拉菜单（select），通过 usestate 管理分页大小，并动态更新总页数，实现灵活的数据分页控制。
要在 Material-UI（v5+）中为 <Pagination> 添加“每页显示数量”功能，仅靠 Pagination 组件本身是不够的——它仅负责页码导航，不提供条目数控制。你需要配合 <Select> 和 <MenuItem> 手动构建一个独立但联动的下拉控件，并同步更新分页逻辑。
✅ 正确实现步骤
-
导入必要组件
确保引入 Pagination、Select、MenuItem 以及 React 的 useState：import { Pagination, Select, MenuItem } from '@mui/material'; import React, { useState } from 'react'; -
声明并管理 itemsPerPage 状态
使用 useState 初始化每页条目数（如默认 10 条），该值将直接影响总页数计算：const [itemsPerPage, setItemsPerPage] = useState<number>(10);
-
动态计算总页数
将原写死的 TABLE_LIMIT 替换为响应式的 itemsPerPage，确保页码总数实时更新：count={Math.ceil(totalCount / itemsPerPage)} -
渲染 Pagination + Select 组合布局
建议用 <Box> 或 <Stack> 布局提升可维护性（替代内联 style）。以下是推荐的结构化写法：<Stack direction="row" spacing={2} alignItems="center" sx={{ mt: 2.5 }}> <Pagination count={Math.ceil(totalCount / itemsPerPage)} page={Number(pageNumber)} onChange={(event, newPage) => page(event, newPage)} // 注意：若 page 是 (event, page) 形参，需保持签名一致 variant="outlined" shape="rounded" boundaryCount={1} /> <Select size="small" value={itemsPerPage} onChange={(e) => { setItemsPerPage(Number(e.target.value)); // ⚠️ 重要：切换每页数量时，通常需重置当前页为第 1 页，避免越界 if (Number(pageNumber) > 1) { page(null, 1); // 触发跳转到首页 } }} sx={{ minWidth: 120 }} > <MenuItem value={10}>10 条/页</MenuItem> <MenuItem value={20}>20 条/页</MenuItem> <MenuItem value={50}>50 条/页</MenuItem> <MenuItem value={100}>100 条/页</MenuItem> </Select> </Stack>
⚠️ 关键注意事项
- 页码重置逻辑：当用户将每页条数从 10 改为 50 时，若当前页码为第 5 页，原数据可能已不足 5 页 → 易导致空数据或请求异常。因此，强烈建议在 onChange 中主动跳转回第 1 页。
- 类型安全：Select 的 value 是字符串，务必用 Number() 转换为数字，避免 totalCount / "10" 返回 NaN。
- 服务端协同：前端修改 itemsPerPage 后，务必同步更新 API 请求参数（如 limit=20&offset=0），否则 UI 与数据不一致。
- 无障碍支持：为 <Select> 添加 label 或 aria-label（如 aria-label="每页显示数量"），提升可访问性。
✅ 最终效果
用户可在右上角同时操作页码跳转与每页容量切换，所有状态联动、响应及时，符合企业级数据表格的交互规范。此方案轻量、可复用，且完全兼容 MUI v5/v6 主题与样式系统。
