# Page 分页

# Page 概述

当数据量较多时，使用分页可以快速进行数据切换。

# Page 代码演示

# 基本

基本的分页，页数过多时会自动折叠。

# 每页数量

可以切换每页显示的数量。

# 电梯

快速跳转到某一页。

# 总数

显示总共多少条数据，接受 slot 来自定义内容，默认显示共 total 条。

# 迷你型

设置 size 为 small 使用迷你型，迷你型拥有普通的所有功能。

# 简洁

设置 simple 属性即可使用简洁版的分页，通过输入页码回车切换，或使用鼠标点击切换页码，或使用键盘的上下键来切换。简洁分页不能使用总数、电梯和切换数量。

# Page API

# Page props

属性	说明	类型	默认值
current	当前页码，如果需要手动切换时同步，可以使用 .sync 修饰符	Number	1
total	数据总数	Number	0
page-size	每页条数	Number	10
page-size-opts	每页条数切换的配置,需配合page-size使用 `加载全部`（该选项value = -1）表示不分页，请求返回所有数据。（v1.0.60）	Array	[10, 20, 30, 40]
placement	条数切换弹窗的展开方向，可选值为 `bottom` 和 `top`	String	bottom
size	可选值为 `small`（迷你版）或不填（默认）	String	-
simple	简洁版	Boolean	false
show-total	显示总数	Boolean	false
show-elevator	显示电梯，可以快速切换到某一页	Boolean	false
show-sizer	显示分页，用来改变`page-size`	Boolean	false
is-blur	只在 show-elevator 为 true 时使用，设置后电梯触发方式在输入框失去焦点时触发，默认触发方式 enter 触发	Boolean	false
class-name	自定义 class 名称	String	-
styles	自定义 style 样式	Object	-
fastArrival	是否显示快速到达首页和尾页按钮(此属性只在v1.0.12或以上版本有效)	Boolean	false
show-custom	显示可输入框，用于自定义每页条数(此属性只在v1.0.20或以上版本有效)	Boolean	false
showSizerLabel	是否在每页条数前显示'每页显示'的label(此属性只在v1.0.25或以上版本有效)	Boolean	false
show-reload	是否在最后显示刷新按钮(此属性只在v1.0.41或以上版本有效)	Boolean	false
isLoadAll	是否在pagSizeOpts的配置的显示项中展示‘加载全部’，表示当前不分页，一次性展示全部数据，对应的值为`1`	Boolean	false
pageValidCheck	只在 show-elevator 为 true 时使用，设置后页面跳转的输入框内无法输入汉字、字母、符号，输入值为非法值（0或超出最大值或其他）时，不做跳转 (v1.8.1)	Boolean	false

# Page events

事件名	说明	返回值
on-change	页码改变的回调，返回改变后的页码	页码
on-page-size-change	切换每页条数时的回调，返回切换后的每页条数	page-size
on-reload	点击刷新按钮时触发(v1.0.41或以上版本有效)	当前页码

# Page Methods

名称	说明
clearElevator(v1.0.28)	this.$refs.xxx.clearElevator()

# Page slot

名称	说明
无	自定义显示总数的内容