本文介绍如何在 material-ui（mui）的 pagination 组件旁集成一个“每页显示条数”下拉菜单（select），通过动态更新 `itemsperpage` 实现分页数据量的灵活控制，并同步修正总页数计算逻辑。
要在 MUI 的 <Pagination> 组件中补充“每页显示数量”功能，核心在于：解耦固定分页限制（如原 TABLE_LIMIT），改用受控状态管理每页条数，并联动更新总页数（count）与数据请求逻辑。
以下是完整实现步骤与推荐代码结构：
✅ 步骤一：引入必要组件并声明状态
import React, { useState, useCallback } from 'react';
import { Pagination, Select, MenuItem, Box } from '@mui/material';
// 假设你已有这些 props 或 state
// totalCount: 总数据条数（来自 API）
// pageNumber: 当前页码（1-based）
// onPageChange: 处理页码切换（如更新 URL 或触发 fetch）
// onItemsPerPageChange: 可选 —— 用于响应每页数量变更（例如重置页码为 1 并重新拉取数据）✅ 步骤二：定义每页条数状态与选项
const [itemsPerPage, setItemsPerPage] = useState<number>(10); const pageSizeOptions = [5, 10, 20, 50, 100];
✅ 步骤三：渲染 Pagination + Select 组合
注意关键点：
- count 必须基于 Math.ceil(totalCount / itemsPerPage) 动态计算；
- onChange 中需同时处理页码跳转与页大小变更（建议将页码重置为 1，避免越界）；
- 使用 <Box> 或 <div> 包裹实现水平对齐，提升布局可控性。
<Box display="flex" alignItems="center" gap={2} mt={2.5}>
{/* 分页控件 */}
<Pagination
count={totalCount ? Math.ceil(totalCount / itemsPerPage) : 0}
page={Number(pageNumber)}
onChange={(event, value) => {
// 页码变更时，通常应保持 itemsPerPage 不变
onPageChange(value); // 示例：setPageNumber(value)
}}
variant="outlined"
shape="rounded"
boundaryCount={1}
/>
{/* 每页显示数量选择器 */}
<Select
size="small"
value={itemsPerPage}
onChange={(e) => {
const newPageSize = Number(e.target.value);
setItemsPerPage(newPageSize);
// ⚠️ 重要：页大小变更时，建议重置当前页为第 1 页
onPageChange(1);
// 若需额外逻辑（如刷新数据），在此调用 onItemsPerPageChange(newPageSize)
}}
sx={{ minWidth: '120px' }}
>
{pageSizeOptions.map((size) => (
<MenuItem key={size} value={size}>
{size} 条/页
</MenuItem>
))}
</Select>
</Box>? 注意事项与最佳实践
- 页码越界防护：当 itemsPerPage 增大后，原 pageNumber 可能超过新总页数（如原 100 条/10 页 → 改为 50 条/2 页，但当前页仍为 5）。因此 onItemsPerPageChange 中强制 onPageChange(1) 是合理且必要的。
- 服务端分页适配：确保你的数据请求逻辑（如 fetchData(page, limit)）使用了最新的 itemsPerPage，而非硬编码的 TABLE_LIMIT。
- 无障碍支持：<Select> 默认已具备键盘导航与屏幕阅读器支持；若需进一步优化，可添加 aria-label="每页显示数量"。
- 响应式建议：在小屏幕上可考虑将 Select 移至 Pagination 上方或下方，使用 flexDirection="column" 配合 sx={{ flexDirection: { xs: 'column', sm: 'row' } }}。
通过以上改造，你不仅实现了 UI 层的“每页显示”功能，更构建了一个可扩展、可维护的分页控制体系——用户可自由切换密度，系统自动保障数据一致性与交互合理性。
