Skip to content

Pagination 分页

切分大列表为多页展示。

基本使用

v-model:current 双向绑定当前页码;total 提供总条数,分页器自动按 pageSize(默认 10)算页数。

显示总数

show-total 设为 true 显示"共 N 条",传函数则可自定义文案。

切换每页条数

show-size-changer 显示一个下拉用于改 pageSize,可用 page-size-options 指定可选数。

快速跳页

show-quick-jumper 在右侧显示一个数字输入框,输入后回车跳转。

简洁模式

simple 仅显示"当前/总页数 + 上一页 / 下一页",常用于移动端或紧凑场景。

小尺寸

size="small" 缩小整体高度与字号,适合放在表格 toolbar 里。

禁用 / 单页隐藏

disabled 整体禁用;hide-on-single-page 在只有一页时隐藏自身。

API

Props

参数类型默认值说明
currentnumber1当前页,支持 v-model:current
totalnumber0总条数
pageSizenumber10每页条数,支持 v-model:pageSize
pageSizeOptionsnumber[][10, 20, 50, 100]切换 pageSize 的下拉选项
showSizeChangerbooleanfalse显示每页条数切换器
showQuickJumperbooleanfalse显示快速跳页输入
showTotalboolean | (total, range) => stringfalse显示总数;传函数自定义文案
simplebooleanfalse简洁模式
disabledbooleanfalse整体禁用
hideOnSinglePagebooleanfalse只有 1 页时隐藏自身
size'default' | 'small''default'尺寸

Events

事件名回调签名说明
update:current(page: number)页码变化
update:pageSize(size: number)每页条数变化
change(page: number, pageSize: number)页码或条数变化

Released under the MIT License.