R后悔药 Rue.js
  • 首页
    • 深度指南
    • 实战例子
    • 快速上手
    • 路由指南
    • 术语表
    • 错误代码参考
  • API
    • 合作伙伴
    • 插件
    • 组件库
    • 工具链
    • Text.js
    • 新闻简报
    • 常见问题
    • 团队
    • 版本发布
    • 社区指南
    • 行为规范
    • 隐私政策
  • 赞助
  • 合作伙伴
设置
目录统计
总条目
  • 按钮 Button
  • 排版 Typography
  • 时间选择器 TimePicker
  • 下拉菜单 Dropdown
  • 悬浮操作按钮 FAB
  • 模态框 Modal
  • 切换 Swap
  • 主题控制器 Theme Controller
  • 手风琴 Accordion
  • 头像 Avatar
  • 徽标 Badge
  • 卡片 Card
  • 轮播 Carousel
  • 聊天气泡 Chat
  • 折叠面板 Collapse
  • 倒计时 Countdown
  • 描述列表 Descriptions
  • 对比 Diff
  • 二维码 QRCode
  • 悬浮 3D 卡片 Hover 3D
  • 悬浮画廊 Hover Gallery
  • 键盘提示 Kbd
  • 列表 List
  • 统计 Stat
  • 状态 Status
  • 表格 Table
  • 文本轮播 Text Rotate
  • 时间线 Timeline
  • 锚点 Anchor
  • 固钉 Affix
  • 面包屑 Breadcrumbs
  • 底部导航 Dock
  • 链接 Link
  • 菜单 Menu
  • 导航栏 Navbar
  • 分页 Pagination
  • 步骤 Steps
  • 选项卡 Tabs
  • 提示 Alert
  • 结果页 Result
  • 空状态 Empty
  • 加载 Loading
  • 全局提示 Message
  • 进度条 Progress
  • 环形进度 Radial Progress
  • 骨架屏 Skeleton
  • 通知提醒框 Notification
  • 轻提示 Toast
  • 气泡确认框 Popconfirm
  • 气泡卡片 Popover
  • 工具提示 Tooltip
  • 日历 Calendar
  • 颜色选择器 ColorPicker
  • 复选框 Checkbox
  • 字段集 Fieldset
  • 表单 Form
  • 文件输入 File Input
  • 筛选器 Filter
  • 标签 Label
  • 单选框 Radio
  • 范围选择 Range
  • 评分 Rating
  • 分段选择 Segmented
  • 自动完成 AutoComplete
  • 选择器 Select
  • 树选择 TreeSelect
  • 树控件 Tree
  • 提及输入 Mentions
  • 穿梭框 Transfer
  • 漫游引导 Tour
  • 输入框 Input
  • 数字输入 InputNumber
  • 文本域 Textarea
  • 开关 Toggle
  • 校验器 Validator
  • 分隔线 Divider
  • 弹性布局 Flex
  • 分割面板 Splitter
  • 抽屉侧边栏 Drawer
  • 页脚 Footer
  • 栅格 Grid
  • 瀑布流 Masonry
  • 布局 Layout
  • 主视觉区 Hero
  • 指示器 Indicator
  • 组合项 Join
  • 蒙版 Mask
  • 水印 Watermark
  • 间距 Space
  • 堆叠 Stack
  • 浏览器样机 Mockup Browser
  • 代码样机 Mockup Code
  • 手机样机 Mockup Phone
  • 窗口样机 Mockup Window
目录统计
总条目
  • 按钮 Button
  • 排版 Typography
  • 时间选择器 TimePicker
  • 下拉菜单 Dropdown
  • 悬浮操作按钮 FAB
  • 模态框 Modal
  • 切换 Swap
  • 主题控制器 Theme Controller
  • 手风琴 Accordion
  • 头像 Avatar
  • 徽标 Badge
  • 卡片 Card
  • 轮播 Carousel
  • 聊天气泡 Chat
  • 折叠面板 Collapse
  • 倒计时 Countdown
  • 描述列表 Descriptions
  • 对比 Diff
  • 二维码 QRCode
  • 悬浮 3D 卡片 Hover 3D
  • 悬浮画廊 Hover Gallery
  • 键盘提示 Kbd
  • 列表 List
  • 统计 Stat
  • 状态 Status
  • 表格 Table
  • 文本轮播 Text Rotate
  • 时间线 Timeline
  • 锚点 Anchor
  • 固钉 Affix
  • 面包屑 Breadcrumbs
  • 底部导航 Dock
  • 链接 Link
  • 菜单 Menu
  • 导航栏 Navbar
  • 分页 Pagination
  • 步骤 Steps
  • 选项卡 Tabs
  • 提示 Alert
  • 结果页 Result
  • 空状态 Empty
  • 加载 Loading
  • 全局提示 Message
  • 进度条 Progress
  • 环形进度 Radial Progress
  • 骨架屏 Skeleton
  • 通知提醒框 Notification
  • 轻提示 Toast
  • 气泡确认框 Popconfirm
  • 气泡卡片 Popover
  • 工具提示 Tooltip
  • 日历 Calendar
  • 颜色选择器 ColorPicker
  • 复选框 Checkbox
  • 字段集 Fieldset
  • 表单 Form
  • 文件输入 File Input
  • 筛选器 Filter
  • 标签 Label
  • 单选框 Radio
  • 范围选择 Range
  • 评分 Rating
  • 分段选择 Segmented
  • 自动完成 AutoComplete
  • 选择器 Select
  • 树选择 TreeSelect
  • 树控件 Tree
  • 提及输入 Mentions
  • 穿梭框 Transfer
  • 漫游引导 Tour
  • 输入框 Input
  • 数字输入 InputNumber
  • 文本域 Textarea
  • 开关 Toggle
  • 校验器 Validator
  • 分隔线 Divider
  • 弹性布局 Flex
  • 分割面板 Splitter
  • 抽屉侧边栏 Drawer
  • 页脚 Footer
  • 栅格 Grid
  • 瀑布流 Masonry
  • 布局 Layout
  • 主视觉区 Hero
  • 指示器 Indicator
  • 组合项 Join
  • 蒙版 Mask
  • 水印 Watermark
  • 间距 Space
  • 堆叠 Stack
  • 浏览器样机 Mockup Browser
  • 代码样机 Mockup Code
  • 手机样机 Mockup Phone
  • 窗口样机 Mockup Window

Pagination 分页

Pagination 现在同时支持两类用法:展示基础的静态组合模式,以及更贴近业务组件习惯的 的数据驱动模式。 视觉仍基于 Rue 当前的 join 与 btn 体系,但提供了页码计算、受控/非受控、简单模式、页容量切换、快捷跳转和自定义渲染。

何时使用

  • 需要使用 Rue 当前 join + btn 分页视觉,但希望组件自己计算页码与跳转逻辑。
  • 需要受控/非受控分页、简单模式、页容量切换、快捷跳页等更完整的交互能力。
  • 需要在静态拼装和数据驱动两种模式间切换,并逐步重组用法。

静态组合模式

适合完全自定义节点结构的场景。以下示例展示基础 compound 用法,只补充说明与可复制代码。

# Basic pagination

最基础的静态拼装方式,适合完全由业务侧决定按钮内容和顺序。

# Vertical pagination

使用 `direction='vertical'`,适合侧栏步骤、目录或分段导航。

# Current and disabled items

静态模式下仍可通过 `active`、`disabled` 和 `tag='a'` 控制语义与状态。

Next

# Data driven basic

传入 `total` 后由组件自动计算页码;这里改成受控形态,便于在设计页直接切换和观察当前页变化。

11-20 / 120
当前示例页码:默认尺寸第 2 页,小尺寸第 6 页

# Controlled pagination

通过 `current` 与 `pageSize` 接管状态,适合和表格、请求参数或 URL 查询同步。

31-40 of 185 items
当前第 4 页,每页 10 条

# Simple mode

简洁模式只保持上一页、页码输入和下一页,适合空间紧张的工具栏。

/ 5
2/ 5
/ 5
当前示例页码:可输入第 2 页,只读第 2 页

# Page size and quick jumper

页容量切换与快捷跳页现在默认更紧凑,页数较少时输入框不会显得过宽。

41-60 / 120
Go to
Go to
紧凑版当前第 3 页,每页 10 条

# Custom item render

通过 `itemRender` 重写上一页、下一页或跳转项文本,保持默认交互逻辑。

自定义文案示例当前位于第 6 页

API

属性说明类型默认值
current / defaultCurrent受控或非受控的当前页码。number1
total数据总条数;传入后自动计算页码按钮。number0
pageSize / defaultPageSize每页条数,配合 total 共同决定总页数。number10
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控制页码折叠密度,以及单页时是否隐藏。booleanfalse
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`。

页内导航
页内导航
文档
  • 深度指南
  • 实战例子
  • 快速上手
  • 术语表
  • 错误码参照表
关于
  • 常见问题
  • 团队
  • 版本发布
  • 社区指南
生态
  • 插件
  • 组件库
  • 路由指南
  • Text.js
© 2024-2026 Xiangmin Liu
Rue.JS