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 事件:—

Props

参数类型默认值说明
modelValuenumber当前页码(必填,支持 v-model)
totalnumber数据总量(必填)
pageSizenumber10每页条数
pageSizesnumber[][10, 20, 50, 100]每页条数选项
pagerCountnumber7页码按钮的数量(≥5 且为奇数)
showSizeChangerbooleanfalse是否展示每页条数切换器
showQuickJumperbooleanfalse是否显示快速跳转
showTotalboolean | 'range'false是否显示总数;设为 "range" 显示当前范围
size'sm' | 'md' | 'lg''md'分页尺寸
simplebooleanfalse是否使用简洁模式
disabledbooleanfalse是否禁用
hideOnSinglePagebooleanfalse只有一页时是否隐藏
prevTextstring''替代上一页箭头的文字
nextTextstring''替代下一页箭头的文字

Events

事件名类型说明
update:modelValue(page: number) => void页码变化时触发
change(page: number) => void页码改变回调
pageSizeChange(size: number) => void每页条数变化时触发

Slots

插槽名说明
prev自定义上一页按钮内容
next自定义下一页按钮内容