分页

当数据量过多时，使用分页分解数据。

基础用法

页码按钮的数量

带背景色的按钮

小型分页

在空间有限的情况下使用小型分页。

当只有一页时隐藏分页

当只有一页时，通过设置 hide-on-single-page 属性来隐藏分页。

API

属性

名称	描述	类型	默认值
size 2.7.6	分页尺寸	`枚举`	'default'
background	是否为按钮添加背景色	`boolean`	false
page-size / v-model:page-size	每页显示条目个数	`number`	—
default-page-size	默认的初始每页显示条目个数，不设置默认为 10	`number`	—
total	总条目数	`number`	—
page-count	总页数，`total` 和 `page-count` 设置任意一个就可以达到显示页码的功能；如果要支持 `page-sizes` 的更改，则需要提供 `total`	`number`	—
pager-count	页码按钮的数量，当总页数超过该值时会折叠	`number`	7
current-page / v-model:current-page	当前页数	`number`	—
default-current-page	默认的初始当前页数，不设置默认为 1	`number`	—
layout	分页组件布局，子组件用逗号分隔	`string`	prev, pager, next, jumper, ->, total
page-sizes	每页显示个数选择器的选项设置	`object`	[10, 20, 30, 40, 50, 100]
append-size-to 2.8.4	尺寸下拉框被附加到的元素	`string`	—
popper-class	每页显示个数选择器下拉框的自定义类名	`string`	''
popper-style 2.11.5	每页显示个数选择器下拉框的自定义样式	`string` / `object`	—
prev-text	替代图标显示的上一页文字	`string`	''
prev-icon	上一页的图标，优先级低于 `prev-text`	`string` / `Component`	ArrowLeft
next-text	替代图标显示的下一页文字	`string`	''
next-icon	下一页的图标，优先级低于 `next-text`	`string` / `Component`	ArrowRight
disabled	是否禁用分页	`boolean`	false
teleported 2.3.13	是否将分页选择器下拉框插入到 body 元素中	`boolean`	true
hide-on-single-page	只有一页时是否隐藏	`boolean`	false
small 已废弃	是否使用小型分页	`boolean`	false

警告

我们检测到了一些已废弃的用法，如果你的分页组件未出现或未按预期工作，请检查以下规则

您必须定义 total 和 page-count 中的一个，否则我们无法确定总页数。当两者都定义时，page-count 优先。
如果定义了 current-page，您必须监听 current-page 的变化，同时定义 @update:current-page，否则分页将无法工作。
如果在显示页面大小选择器（`layout` 中包含 `sizes`）的同时定义了 page-size，您也必须监听 page-size 的变化，通过定义 @update:page-size，否则页面大小的更改将无法工作。

事件

名称	描述	类型
size-change	当 `page-size` 改变时触发	`Function`
current-change	当 `current-page` 改变时触发	`Function`
change 2.4.4	当 `current-page` 或 `page-size` 改变时触发	`Function`
prev-click	当用户点击上一页按钮改变当前页时触发	`Function`
next-click	当用户点击下一页按钮改变当前页时触发	`Function`