Antd Table分页showSizeChanger移动端不显示问题求助

问题场景 #

从Antd 4.x升级到最新版本后，Table组件配置pagination={{ position: ['topRight', 'bottomRight'], showSizeChanger: true }}时，分页的size changer仅在桌面端显示，移动端自动隐藏，且全新项目中能稳定复现该问题。

解决方案 #

方法一：自定义分页组件，完全控制显示逻辑 #

通过自定义分页组件替换Antd默认的分页实现，绕过其响应式隐藏逻辑：

import { Table, Pagination } from 'antd';

// 自定义分页组件，强制显示size changer
const CustomTablePagination = (props) => {
  return (
    <Pagination
      {...props}
      showSizeChanger={true}
      // 自定义布局样式，适配移动端
      style={{ 
        display: 'flex', 
        justifyContent: 'flex-end', 
        alignItems: 'center', 
        flexWrap: 'wrap',
        gap: '8px'
      }}
    />
  );
};

// 在Table中使用自定义分页
const YourTable = () => {
  return (
    <Table
      columns={yourColumns}
      dataSource={yourDataSource}
      pagination={{
        position: ['topRight', 'bottomRight'],
        // 传入自定义分页组件
        component: (paginationProps) => <CustomTablePagination {...paginationProps} />
      }}
    />
  );
};

方法二：覆盖Antd默认CSS，强制显示size changer #

Antd通过媒体查询在移动端隐藏了size changer，可通过自定义CSS强制显示并优化布局：

/* 强制所有尺寸下显示size changer */
.ant-pagination .ant-pagination-options-size-changer {
  display: flex !important;
  visibility: visible !important;
}

/* 移动端适配：调整分页元素布局，避免拥挤 */
@media (max-width: 576px) {
  .ant-pagination-options {
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 8px;
  }
  .ant-pagination-options-size-changer {
    margin-right: 0;
  }
}

方法三：修改分页的renderItem（精准替换size changer项） #

如果只需要修改size changer的显示逻辑，可通过renderItem单独处理该项：

<Table
  columns={yourColumns}
  dataSource={yourDataSource}
  pagination={{
    position: ['topRight', 'bottomRight'],
    showSizeChanger: true,
    renderItem: (props, item) => {
      // 定位到size changer项，强制显示
      if (item.type === 'sizeChanger') {
        return (
          <div style={{ display: 'flex', visibility: 'visible' }}>
            {item.element}
          </div>
        );
      }
      return item;
    }
  }}
/>

注意事项 #

• 使用自定义组件时，需确保继承原有分页的所有props，避免丢失页码跳转、总数显示等核心功能。
• CSS覆盖时，注意选择器的优先级，若使用了Antd的定制主题，需确保自定义样式加载顺序在主题样式之后。

内容的提问来源于stack exchange，提问作者Muhammad Sheharyar Butt