跳转到内容

分页 Pagination

展示全部配置项。

分页的基本用法,total 属性为必填项。

可以通过插槽自定义分页按钮内容

当页码较大时,会使用更多页码的分页样式。

通过设置 show-jumper,显示页码跳转输入框。

通过设置 show-page-size, 展示每页条数选择器。

通过设置 simple 属性开启简洁模式。

分页分为 minismallmediumlarge 四种尺寸。

通过设置 show-total 属性显示数据总数。

参数名描述类型默认值版本
total (必填)数据总数number-
current (v-model)当前的页数number-
default-current默认的页数(非受控状态)number1
page-size (v-model)每页展示的数据条数number-
default-page-size默认每页展示的数据条数(非受控状态)number10
disabled是否禁用booleanfalse
hide-on-single-page单页时是否隐藏分页booleanfalse
simple是否为简单模式booleanfalse
show-total是否显示数据总数booleanfalse
show-more是否显示更多按钮booleanfalse
show-jumper是否显示跳转booleanfalse
show-page-size是否显示数据条数选择器booleanfalse
page-size-options数据条数选择器的选项列表number[][10, 20, 30, 40, 50]
page-size-props数据条数选择器的PropsSelectProps-
size分页选择器的大小'mini' | 'small' | 'medium' | 'large''medium'
page-item-style分页按钮的样式CSSProperties-
active-page-item-style当前分页按钮的样式CSSProperties-
base-size计算显示省略的基础个数。显示省略的个数为 baseSize + 2 * bufferSizenumber6
buffer-size显示省略号时,当前页码左右显示的页码个数number2
auto-adjust是否在改变数据条数时调整页码booleantrue2.34.0
事件名描述参数
change页码改变时触发current: number
page-size-change数据条数改变时触发pageSize: number
插槽名描述参数版本
total总数total: number2.9.0
page-item-ellipsis分页按钮(省略)-2.9.0
page-item-step分页按钮(步)type: 'previous'|'next'The type of page item step2.9.0
page-item分页按钮page: numberThe page number of the paging button2.9.0