Pagination 分页

数据分页导航，支持页码省略、前后翻页、自定义相邻页码数、总数展示、每页条数切换与快速跳转。

基础用法

基础用法

示例代码

页码省略

多页省略

示例代码

相邻页码数

siblings 控制

siblings="1"（默认）siblings="2"

示例代码

总条数

show-total 显示总条数

show-total 显示「共 X 条」不设置则隐藏

示例代码

每页条数切换

page-sizes 每页条数下拉

每页 10 条，当前第 1 页

示例代码

切换每页条数后回到第 1 页并派发 oas-change，detail: { page: 1, pageSize }。

快速跳转

show-jumper 跳至指定页

当前第 3 页

示例代码

输入页码后回车跳转（越界自动夹取到合法范围），派发 oas-change，detail: { page, pageSize }。

组合用法

总数 + 每页条数 + 快速跳转

每页 20 条，当前第 1 页

示例代码

翻页事件

oas-change 事件

当前第 1 页

示例代码

边界场景

单页 / 首尾禁用

单页数据（翻页按钮均禁用）首页（‹ 禁用）末页（› 禁用）

示例代码

API

属性

属性	说明	类型	默认值
current	当前页（受控，翻页会更新该属性）	string	1
page-size	每页条数	string	10
page-sizes	每页条数下拉选项（JSON 数组），如 [10,20,50]；切换后回到第 1 页	string	—
show-jumper	显示「跳至 __ 页」快速跳转输入框（回车跳转，越界夹取）	boolean	—
show-total	显示总条数文案「共 X 条」	boolean	—
siblings	当前页前后各显示的页码数	string	1
total	总条数	string	0

事件

事件	说明
oas-change	翻页 { page }；切换每页条数 { page: 1, pageSize }；快速跳转 { page, pageSize }

页码超出范围时自动省略，首尾翻页按钮在边界自动禁用。