仅桌面端保证样式
Pagination 分页
移动端：页码器换为「加载更多」，参见 移动端 · 页面导航。
数据分页控件：layout 自由组合 total / sizes / prev / pager / next / jumper 六个部分，页码超长时自动折叠省略；兼容对象 v-model { page, size }、数字 v-model 与 v-model:current-page / v-model:page-size 多种受控写法。
基础用法
v-model 绑定 { page, size } 对象（也接受纯页码数字），翻页与修改每页条数都会同步回对象。
共 120 条
20
- 1
- 2
- 3
- 4
- 5
- 6
page: 2 / size: 20
每页条数与总数
sizes 部分渲染条数下拉，page-sizes 自定义候选值，page-size 指定初始每页条数；total 驱动总条数文案与页数计算。
共 480 条
10
- 1
- 2
- 3
- 4
- 5
- 6
- 48
页码跳转
layout 加入 jumper 渲染「去第 X 页」输入框，回车或失焦跳转；页码超出范围自动收敛到有效页。
- 1
- 2
- 3
- 4
- 5
- 6
受控页码与事件
v-model:current-page / v-model:page-size 分别受控页码与每页条数；change 事件统一回传 { current, pageSize }，另有 current-change / size-change / prev-click / next-click 细分事件。
共 316 条
10
- 1
- 2
- 3
- 4
- 5
- 6
- 32
最近 change：操作分页试试
尺寸与背景
size 支持 large / default / small（small 属性等价 size='small'）；background 为 false 时页码按钮去掉底色；disabled 整体禁用。
共 45 条
10
- 1
- 2
- 3
- 4
- 5
共 45 条
10
- 1
- 2
- 3
- 4
- 5
单页隐藏
hide-on-single-page 开启后，总页数不超过 1 时整个组件不渲染（下方 total 仅够一页，组件已隐藏）。
共 8 条
20
- 1
API
Pagination Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| v-model / model-value | 对象 { page, size } 或页码数字 | object | number | null |
| current-page | 当前页码，配合 v-model:current-page 受控 | number | — |
| current | current-page 别名（v-model:current） | number | — |
| page-size | 每页条数，配合 v-model:page-size 受控 | number | — |
| total | 总条数 | number | 0 |
| layout | 组件布局，子组件名逗号分隔 | string | total, sizes, prev, pager, next, jumper |
| page-sizes | 每页条数候选值 | number[] | [10, 20, 50, 100] |
| size | 尺寸 | large | default | small | default |
| small | 等价 size 为 small 的兼容写法 | boolean | false |
| background | 页码按钮显示底色 | boolean | true |
| disabled | 禁用全部交互 | boolean | false |
| pager-count | 页码按钮数（含首末，奇数，超出折叠省略） | number | 7 |
| hide-on-single-page | 只有一页时隐藏整体 | boolean | false |
Pagination Events
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| update:model-value | 页码或每页条数变化时同步 v-model | (value: object | number) => void | — |
| update:current-page / update:current | 页码变化受控更新 | (page: number) => void | — |
| update:page-size | 每页条数变化受控更新 | (size: number) => void | — |
| current-change | 当前页变化 | (page: number) => void | — |
| size-change | 每页条数变化（自动修正越界页码） | (size: number) => void | — |
| change | 页码或条数变化（统一回传） | ({ current, pageSize }) => void | — |
| prev-click / next-click | 点击上一页 / 下一页按钮 | (page: number) => void | — |
Pagination Methods
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| currentPage | 当前页码（ref，已按总页数收敛） | ComputedRef<number> | — |
| pageSize | 当前每页条数（ref） | ComputedRef<number> | — |