如何在MUI分页组件中添加每页显示行数下拉按钮

你可以用MUI的Select组件配合现有Pagination组件实现这个功能，核心是维护一个每页条数的状态，切换时同步更新分页总页数和当前页码（避免页码超出新的页数范围）。

完整实现代码 #

import { useState } from 'react';
import { Pagination, Select, MenuItem, FormControl, InputLabel, Box } from '@mui/material';

// 初始每页条数，替换你原来的TABLE_LIMIT
const INITIAL_PAGE_SIZE = 10;

function YourTablePagination({ totalCount, currentPage, onPageUpdate }) {
  const [pageSize, setPageSize] = useState(INITIAL_PAGE_SIZE);

  // 处理每页条数切换
  const handlePageSizeChange = (e) => {
    const newSize = e.target.value;
    setPageSize(newSize);
    // 切换页大小时重置到第一页，防止当前页码超出新的总页数
    onPageUpdate(1, newSize);
  };

  return (
    <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, marginTop: 2, justifyContent: 'flex-end' }}>
      {/* 每页行数下拉框 */}
      <FormControl size="small" sx={{ minWidth: 120 }}>
        <InputLabel>每页行数</InputLabel>
        <Select
          value={pageSize}
          label="每页行数"
          onChange={handlePageSizeChange}
        >
          <MenuItem value={10}>10条</MenuItem>
          <MenuItem value={20}>20条</MenuItem>
          <MenuItem value={50}>50条</MenuItem>
          <MenuItem value={100}>100条</MenuItem>
        </Select>
      </FormControl>

      {/* 原分页组件改造 */}
      <Pagination
        style={{
          marginLeft: "auto",
          display: "inline-block",
        }}
        count={Math.ceil(totalCount / pageSize)}
        boundaryCount={1}
        page={Number(currentPage)}
        variant="outlined"
        shape="rounded"
        onChange={(e, newPage) => onPageUpdate(newPage, pageSize)}
      />
    </Box>
  );
}

关键细节说明 #

• 状态维护：用useState保存当前选中的每页条数，默认值设为你原来的TABLE_LIMIT
• 页切换逻辑：切换页大小时必须重置页码到1，否则原页码可能超过新的总页数，导致分页组件异常
• 参数同步：总页数计算要替换为Math.ceil(totalCount / pageSize)，分页切换时要把当前页码和页大小一起传给父组件的回调
• 布局优化：用Box的flex布局让下拉框和分页组件横向对齐，调整间距保证界面美观

你可以根据需求修改下拉选项的条数，或者调整样式匹配项目风格。

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