如何移除antd Pagination分页组件下拉框中的'/ page'文本

DevOps 小满

2026-8-27

问题

在使用antd组件库进行前端开发时，需要去除Pagination分页组件的每页条数下拉选择框内默认展示的 / page 文案，对应效果如下：
问题效果截图

解决方法

优先使用组件官方提供的配置项实现，不推荐用CSS强制隐藏DOM，避免版本升级后样式失效。

单组件局部修改
直接给Pagination组件传入locale属性覆盖默认后缀文案即可，不同版本字段名略有差异：

antd 4.x、5.x（当前主流版本）

import { Pagination } from 'antd';

export default function Demo() {
  return (
    <Pagination
      total={100}
      defaultPageSize={10}
      showSizeChanger
      // 核心配置：清空/ page后缀
      locale={{ items_per_page: '' }}
    />
  )
}

antd 3.x 旧版本

<Pagination
  total={100}
  showSizeChanger
  locale={{ item_per_page: '' }}
/>

全局统一配置
如果项目中所有分页组件都需要移除该文案，在应用根组件的ConfigProvider中统一覆写国际化配置即可，无需逐个组件传参：

import { ConfigProvider } from 'antd';
import zhCN from 'antd/locale/zh_CN';

const customZhCN = {
  ...zhCN,
  Pagination: {
    ...zhCN.Pagination,
    items_per_page: '',
  }
};

export default function App() {
  return (
    <ConfigProvider locale={customZhCN}>
      {/* 应用业务组件 */}
    </ConfigProvider>
  )
}

兜底兼容方案
如果因为项目二次封装、版本定制化等原因上述配置不生效，可以直接通过selectProps自定义下拉选项渲染逻辑，只展示每页条数的数值，从渲染层面屏蔽默认后缀：
```
<Pagination
  total={100}
  showSizeChanger
  selectProps={{
    optionRender: (option) => option.value
  }}
/>
```