Pagination 分页

当数据量过多时，使用分页分解数据。支持多种布局配置、视觉风格和交互方式。

样式变体

通过 variant 属性控制分页组件的视觉样式，支持三种风格：default（默认带边框）、background（背景色无边框）、borderless（无背景无边框）。

布局配置 (Layout)

通过 layout 属性自定义分页组件的布局，排列顺序即展示顺序。

可用的布局部件

部件名	说明	示例
total	总条数显示	总条数 120
prev	上一页按钮	←
pager	页码列表	1 2 3 ... 10
next	下一页按钮	→
sizes	页大小选择器	10/页 ▼
jumper	跳转输入框	前往 [__] 页

自定义布局与总数文案

自定义布局顺序，并通过 total-text 自定义总数文案（支持 {total} 占位符）。

尺寸大小

通过 size 属性控制分页组件的尺寸，支持 small（小号）、default（默认）、large（大号）三种尺寸。

跳转功能

在 layout 中添加 jumper 启用快速跳转到指定页。

Props

属性名	说明	类型	可选值	默认值
total	数据总条数	number	—	—
pageCount	总页数（与 total 二选一）	number	—	—
pageSize	每页数量（支持 v-model:pageSize）	number	—	—
currentPage	当前页码（支持 v-model:currentPage）	number	—	—
layout	布局定义（排列顺序即展示顺序），示例：total, prev, pager, next, jumper	string	prev / pager / next / sizes / total / jumper	prev, pager, next, sizes, total
pagerCount	页码按钮数量（奇数）	number	—	7
pageSizes	页大小选项列表	number[]	—	[10, 20, 50, 100]
size	尺寸大小	string	small / default / large	default
small	小号样式（已废弃，请使用 size="small"）	boolean	—	false
variant	视觉样式变体	string	default / background / borderless	default
background	背景样式（已废弃，请使用 variant="background"）	boolean	—	false
borderless	无边框样式（已废弃，请使用 variant="borderless"）	boolean	—	false
disabled	禁用态	boolean	—	false
hideOnSinglePage	仅一页时隐藏	boolean	—	—
show	兼容：是否显示分页（优先级高于 total 判断）	boolean	—	—
showSizeChanger	兼容：是否显示页大小切换器（优先于 layout）	boolean	—	—
showTotal	兼容：是否显示总数文案（优先于 layout）	boolean	—	—
totalText	总数文案模板，支持 {total} 占位符	string	—	总条数
prevText	上一页按钮文案	string	—	左箭头
nextText	下一页按钮文案	string	—	右箭头

Events

事件名	说明	回调参数
update:currentPage	当前页变化（支持 v-model:currentPage）	(page: number) => void
update:pageSize	页大小变化（支持 v-model:pageSize）	(size: number) => void
current-change	当前页变化（Element Plus 风格）	(page: number) => void
size-change	页大小变化（Element Plus 风格）	(size: number) => void
change	页码或页大小变化	(page: number, size: number) => void