Pagination 分页
Pagination 现在同时支持两类用法:展示基础的静态组合模式,以及更贴近业务组件习惯的 的数据驱动模式。 视觉仍基于 Rue 当前的 join 与 btn 体系,但提供了页码计算、受控/非受控、简单模式、页容量切换、快捷跳转和自定义渲染。
何时使用
- 需要使用 Rue 当前 join + btn 分页视觉,但希望组件自己计算页码与跳转逻辑。
- 需要受控/非受控分页、简单模式、页容量切换、快捷跳页等更完整的交互能力。
- 需要在静态拼装和数据驱动两种模式间切换,并逐步重组用法。
静态组合模式
适合完全自定义节点结构的场景。以下示例展示基础 compound 用法,只补充说明与可复制代码。
# Basic pagination
最基础的静态拼装方式,适合完全由业务侧决定按钮内容和顺序。
# Vertical pagination
使用 `direction='vertical'`,适合侧栏步骤、目录或分段导航。
# Data driven basic
传入 `total` 后由组件自动计算页码;这里改成受控形态,便于在设计页直接切换和观察当前页变化。
# Controlled pagination
通过 `current` 与 `pageSize` 接管状态,适合和表格、请求参数或 URL 查询同步。
# Simple mode
简洁模式只保持上一页、页码输入和下一页,适合空间紧张的工具栏。
# Page size and quick jumper
页容量切换与快捷跳页现在默认更紧凑,页数较少时输入框不会显得过宽。
# Custom item render
通过 `itemRender` 重写上一页、下一页或跳转项文本,保持默认交互逻辑。
API
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
current / defaultCurrent | 受控或非受控的当前页码。 | number | 1 |
total | 数据总条数;传入后自动计算页码按钮。 | number | 0 |
pageSize / defaultPageSize | 每页条数,配合 total 共同决定总页数。 | number | 10 |
simple | 切换为简洁模式;可传 { readOnly: true } 关闭中间输入。 | boolean | { readOnly?: boolean } | false |
showSizeChanger / pageSizeOptions | 展示每页条数切换,并自定义可选项。 | boolean / Array<number | string> | false / [10, 20, 50, 100] |
showQuickJumper | 展示快速跳页输入框;可传 { goButton } 自定义确认按钮。 | boolean | { goButton?: any } | false |
showTotal | 自定义总数与区间文案。 | (total: number, range: [number, number]) => any | - |
itemRender | 自定义页码、上一页、下一页、跳转项的渲染内容。 | (page: number, type: 'page' | 'prev' | 'next' | 'jump-prev' | 'jump-next', original: any) => any | - |
align / size / disabled | 控制对齐、尺寸和禁用态。 | 'start' | 'center' | 'end' / 'xs' | 'sm' | 'md' | 'lg' | 'xl' / boolean | 'start' / 'md' / false |
showLessItems / hideOnSinglePage | 控制页码折叠密度,以及单页时是否隐藏。 | boolean | false |
onChange / onShowSizeChange | 页码变化、每页条数变化时的回调。 | (page: number, pageSize: number) => void | - |
FAQ
什么时候用静态组合,什么时候用数据驱动?
当按钮结构、文案和链接完全由业务自定义时,用 `Pagination.Item` 静态组合更直接;只要你已经有 `total`、`current`、`pageSize` 这些分页信息,优先使用数据驱动模式,省去页码计算与边界处理。
`simple` 适合什么场景?
`simple` 适合工具栏、卡片头部、移动端等横向空间有限的区域;如果只想展示当前页而不允许直接输入, 可以传 `simple=[object Object]`。
切换每页条数时会触发哪些回调?
`onShowSizeChange` 专门用于处理页容量变更;为了保持外部状态同步,`onChange` 也会收到新的页码和 `pageSize`,所以受控场景通常同时支持这两个回调。
如何把上一页、下一页改成业务文案?
轻量替换可以用 `itemRender` 改写 `prev`、`next`、`jump-prev`、`jump-next` 的内容;如果还要替换 aria/title 文案,可以传 `locale`。