分页 Pagination
采用分页控制单页内的信息数量，也可进行页面跳转。
安装
npm install @arco-design/web-react@2.66.18
在入口引入 @arco-design/web-react/dist/css/arco.css，用 ConfigProvider 设置语言。React 19 项目还需在入口最先引入 @arco-design/web-react/es/_util/react-19-adapter，否则 Message、Modal 等命令式 API 无法渲染。
示例
- 基础用法：最简单的用法。
- 更多页码：页码数较大时，使用多页码的分页样式。
- 改变每页展示条目：可定义每页展示条目数量。
- 跳转：输入页码，可快速跳转到指定页。
- 尺寸：通过指定
size字段，可以使用不同尺寸的分页器。 - 简洁：在空间有限的场景下，可以将
simple设置为true，使用较为简单的文本分页方式。 - 展示总数：您可以通过设置
showTotal来显示数据总数。 - 受控的数据总数：通过改变
total的值，解决无法计算页码总数的情景。 - 全部展示：展示全部配置项。
- 样式定制：可以通过样式定制得到不同的视觉风格。
- 上一步和下一步：设置
itemRender，可以自由定制分页按钮。 - 省略页码时展示长度：通过
bufferSize可以设置current页与...之间的页码个数。 一个...至少代表省略2页。
示例来自 Arco Design 官方仓库（MIT），固定在 npm 2.66.18 对应的提交；部分示例使用在线图片或上传地址，预览中网络请求被禁用。
API
Pagination
| 参数名 | 描述 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| disabled | 是否禁用 | boolean | - | - |
| hideOnSinglePage | 是否在只有一页的情况下隐藏 | boolean | - | 2.6.0 |
| pageSizeChangeResetCurrent | pageSize 改变的时候重置当前页码为 1 | boolean | true | - |
| showJumper | 是否显示快速跳转到某页，在 simple 模式下默认为 true | boolean | - | - |
| showMore | 是否显示更多页码提示（当尚无法计算数据总数时可以使用） | boolean | - | - |
| simple | 是否应用精简分页模式 | boolean | - | - |
| sizeCanChange | 是否可以改变每页条数 | boolean | - | - |
| bufferSize | current 页与 ... 之间的页码个数 | number | 2 | 2.32.0 |
| current | 当前页 | number | - | - |
| defaultCurrent | 当前页默认值 | number | - | - |
| defaultPageSize | 默认每页数据条数 | number | - | - |
| pageSize | 每页数据条数 | number | - | - |
| total | 数据总数 | number | - | - |
| itemRender | 定制分页按钮的结构 | (page: number,type: 'page' | 'more' | 'prev' | 'next',originElement: ReactNode) => ReactNode | - | - |
| size | 分页器尺寸 | 'mini' | 'small' | 'default' | 'large' | - | - |
| activePageItemStyle | 被选中的分页按钮样式 | CSSProperties | - | - |
| className | 节点类名 | string | string[] | - | - |
| icons | 设置分页器的图标 | {prev?: ReactNode;next?: ReactNode;more?: ReactNode;} | - | - |
| pageItemStyle | 分页按钮样式 | CSSProperties | - | - |
| selectProps | 用于配置弹出框的属性 | Partial<SelectProps> | - | - |
| sizeOptions | 每页可以显示数据条数 | number[] | - | - |
| style | 节点样式 | CSSProperties | - | - |
| onChange | 变化时的回调 | (pageNumber: number, pageSize: number) => void | - | - |
| onPageSizeChange | pageSize 变化时的回调 | (size: number, current: number) => void | - | - |
| showTotal | 是否显示数据总数 | boolean | ((total: number, range: number[]) => ReactNode) | - | - |