如何让Ant Design Pagination的rowsPerPage下拉框始终显示？

Ant Design的Pagination组件默认会在总数据量（total）小于等于pageSizeOptions中的最大值时，自动隐藏每页条数选择器（rowsPerPage下拉框）。要让它始终可见，可通过以下两种方式实现：

方法一：CSS强制显示 #

通过覆盖组件的默认样式，移除隐藏状态的样式规则：

/* 给目标Pagination添加自定义类名，避免影响全局组件 */
.custom-pagination .ant-pagination-options.ant-pagination-options-hidden {
  display: flex !important;
}

使用时给Pagination组件加上自定义类名：

<Pagination className="custom-pagination" ... />

这种方式简单直接，无需修改组件逻辑，适合快速满足需求。

方法二：自定义分页条数选择器 #

如果需要更灵活的交互或样式控制，可以完全自定义条数选择器的渲染逻辑，摆脱组件默认的隐藏规则：

import { Pagination } from 'antd';

const CustomPagination = ({ total, currentPage, pageSize, onPageChange }) => {
  const pageSizeOptions = ['10', '20', '50', '100'];

  const handleSizeChange = (e) => {
    const newSize = Number(e.target.value);
    onPageChange(1, newSize);
  };

  return (
    <Pagination
      total={total}
      current={currentPage}
      pageSize={pageSize}
      onChange={onPageChange}
      renderItem={(item) => {
        // 替换默认的sizeChanger为自定义组件
        if (item.type === 'sizeChanger') {
          return (
            <div className="custom-size-changer">
              <span>每页显示</span>
              <select value={pageSize} onChange={handleSizeChange}>
                {pageSizeOptions.map(size => (
                  <option key={size} value={size}>{size}条</option>
                ))}
              </select>
            </div>
          );
        }
        return item;
      }}
    />
  );
};

export default CustomPagination;

这种方式完全掌控了条数选择器的渲染逻辑，不受组件默认规则限制，适合需要定制样式或交互的场景。

内容的提问来源于stack exchange，提问作者Trọng Nghĩa Lệ Định