Pagination 分页
当数据量过多时,使用分页可以分解数据,便于用户查看。
基础用法
通过 v-model 绑定当前页码,total 设置数据总量。
当前页:1
显示总数
设置 show-total 显示数据总量,设置为 'range' 可显示当前范围。
共 200 条
第 1-10 条 / 共 200 条
修改每页条数
设置 show-size-changer 切换每页条数,show-total 显示总数。
共 500 条
10 条/页
▾快速跳转
设置 show-quick-jumper 可以快速跳转到某一页。
前往页
完整功能
同时使用 show-total、show-size-changer、show-quick-jumper 显示完整功能。
第 1-10 条 / 共 1000 条
10 条/页
▾前往页
迷你模式
设置 simple 使用迷你分页,适合弹窗等空间有限场景。
/10
不同尺寸
设置 size 使用不同尺寸的分页组件。
自定义页码数量
设置 pager-count 控制显示的页码按钮数量,默认为 7。
自定义前后文本
设置 prev-text / next-text 自定义前后按钮文字。
禁用状态
设置 disabled 禁用分页组件。
仅一页时隐藏
设置 hide-on-single-page,当只有一页时自动隐藏分页。
事件回调
监听 change 和 page-size-change 事件。
共 500 条
10 条/页
▾ change 事件:—
pageSizeChange 事件:—
pageSizeChange 事件:—
Props
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
modelValue | number | — | 当前页码(必填,支持 v-model) |
total | number | — | 数据总量(必填) |
pageSize | number | 10 | 每页条数 |
pageSizes | number[] | [10, 20, 50, 100] | 每页条数选项 |
pagerCount | number | 7 | 页码按钮的数量(≥5 且为奇数) |
showSizeChanger | boolean | false | 是否展示每页条数切换器 |
showQuickJumper | boolean | false | 是否显示快速跳转 |
showTotal | boolean | 'range' | false | 是否显示总数;设为 "range" 显示当前范围 |
size | 'sm' | 'md' | 'lg' | 'md' | 分页尺寸 |
simple | boolean | false | 是否使用简洁模式 |
disabled | boolean | false | 是否禁用 |
hideOnSinglePage | boolean | false | 只有一页时是否隐藏 |
prevText | string | '' | 替代上一页箭头的文字 |
nextText | string | '' | 替代下一页箭头的文字 |
Events
| 事件名 | 类型 | 说明 |
|---|---|---|
update:modelValue | (page: number) => void | 页码变化时触发 |
change | (page: number) => void | 页码改变回调 |
pageSizeChange | (size: number) => void | 每页条数变化时触发 |
Slots
| 插槽名 | 说明 |
|---|---|
prev | 自定义上一页按钮内容 |
next | 自定义下一页按钮内容 |