---
url: /components/pagination.md
---
# Pagination 分页

> 移动端：页码器换为「加载更多」，参见 [移动端 · 页面导航](/mobile/navigation)。

数据分页控件：`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 }` 对象（也接受纯页码数字），翻页与修改每页条数都会同步回对象。

## 每页条数与总数

`sizes` 部分渲染条数下拉，`page-sizes` 自定义候选值，`page-size` 指定初始每页条数；`total` 驱动总条数文案与页数计算。

## 页码跳转

layout 加入 `jumper` 渲染「去第 X 页」输入框，回车或失焦跳转；页码超出范围自动收敛到有效页。

## 受控页码与事件

`v-model:current-page` / `v-model:page-size` 分别受控页码与每页条数；`change` 事件统一回传 `{ current, pageSize }`，另有 `current-change` / `size-change` / `prev-click` / `next-click` 细分事件。

## 尺寸与背景

`size` 支持 large / default / small（`small` 属性等价 size='small'）；`background` 为 false 时页码按钮去掉底色；`disabled` 整体禁用。

## 单页隐藏

`hide-on-single-page` 开启后，总页数不超过 1 时整个组件不渲染（下方 total 仅够一页，组件已隐藏）。

## API