rc-pagination组件页面尺寸选择项不显示问题求助

你遇到的问题是开启了showSizeChanger但页面尺寸选择器没显示，主要有两个常见原因，对应解决方法如下：

1. 未配置可选的页面尺寸选项 #

rc-pagination默认不会自动生成页面尺寸选项，必须通过pageSizeOptions指定可选的每页条数，否则即使开了showSizeChanger也没有内容显示。

修改你的组件代码，添加pageSizeOptions属性：

import React from 'react';
import Pagination from 'rc-pagination';
import 'rc-pagination/assets/index.css';

const MyPaginationComponent = () => {
  const onPageChange = (page, pageSize) => {
    console.log('Page:', page, 'Page Size:', pageSize);
  };

  return (
    <Pagination
      total={100}
      current={1}
      pageSize={10}
      showSizeChanger
      // 指定可选的每页条数
      pageSizeOptions={['10', '20', '50', '100']}
      // 可选：自定义选择器的提示文本
      sizeChangerText="每页条数"
      onChange={onPageChange}
    />
  );
};

export default MyPaginationComponent;

2. 检查CSS样式是否正确引入 #

如果配置了选项还是没显示，确认rc-pagination的CSS文件路径是否正确。部分新版本的rc-pagination可能将CSS文件放在dist目录下，你可以尝试替换引入路径：

import 'rc-pagination/dist/rc-pagination.css';

额外注意 #

如果使用的是较旧版本的rc-pagination，可能还需要确保total数值大于当前pageSize，否则选择器可能会被自动隐藏（比如total=10、pageSize=10时，没有分页必要，选择器会隐藏）。

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