Pagination 分页

当数据量过大时，使用分页分解数据。

基础用法

带有背景色的分页

设置 background 属性可以为分页按钮添加背景色。

调整每页显示条数

设置 layout 包含 sizes。

小型分页

在空间有限的情况下，可以使用小型分页。

✨ 霓虹风格 (Unique)

赛博朋克风格的霓虹发光效果，适合深色背景或现代感强的应用。

设置 type 为 neon 且 background 为 true。

✨ 流体动画 (Unique)

平滑的缩放和位移动画，带来更灵动的交互体验。

设置 type 为 fluid。

✨ 极简模式 (Unique)

仅显示上一页、下一页和快速跳转，隐藏页码列表，适合页数极多且不需要精确导航的场景。

设置 type 为 simple。

API

Attributes

属性名	说明	类型	默认值
total	总条目数	number	-
page-size / v-model:page-size	每页显示条目个数	number	10
current-page / v-model:current-page	当前页数	number	1
layout	组件布局，子组件名用逗号分隔	string	'prev, pager, next'
pager-count	页码按钮的数量，当总页数超过该值时会折叠	number	7
background	是否为分页按钮添加背景色	boolean	false
small	是否使用小型分页样式	boolean	false
disabled	是否禁用	boolean	false
type	风格类型	'default' / 'neon' / 'fluid' / 'simple'	'default'
page-sizes	每页显示个数选择器的选项设置	number[]	[10, 20, 30, 40, 50, 100]
prev-text	替代图标显示的上一页文字	string	-
next-text	替代图标显示的下一页文字	string	-

Events

事件名	说明	参数
size-change	pageSize 改变时触发	(val: number)
current-change	currentPage 改变时触发	(val: number)
prev-click	用户点击上一页按钮改变当前页时触发	(val: number)
next-click	用户点击下一页按钮改变当前页时触发	(val: number)