Pagination 分页

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

基础用法

设置最大页码按钮数

带有背景色的分页

小型分页

在空间有限的情况下,可以使用简单的小型分页。

当只有一页时隐藏分页

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

附加功能

根据场景需要,可以添加其他功能模块。

属性

属性名说明类型可选值默认值
small是否使用小型分页样式booleanfalse
background是否为分页按钮添加背景色booleanfalse
page-size每页显示条目个数,支持 v-model 双向绑定number10
default-page-size每页显示条目数的初始值number--
total总条目数number
page-count总页数, totalpage-count 设置任意一个就可以达到显示页码的功能;如果要支持 page-sizes 的更改,则需要使用 total 属性number
pager-count设置最大页码按钮数。 页码按钮的数量,当总页数超过该值时会折叠number(介于 5 和 21 之间的奇数)7
current-page当前页数,支持 v-model 双向绑定number1
default-current-page当前页数的初始值number--
layout组件布局,子组件名用逗号分隔stringsizes / prev / pager / next / jumper / -> / total / slot'prev, pager, next, jumper, ->, total'
page-sizes每页显示个数选择器的选项设置number[][10, 20, 30, 40, 50, 100]
popper-class每页显示个数选择器的下拉框类名string
prev-text替代图标显示的上一页文字string
prev-icon上一页的图标, 比 prev-text 优先级更高string | ComponentArrowLeft
next-text替代图标显示的下一页文字string
next-icon下一页的图标, 比 next-text 优先级更高string | ComponentArrowRight
disabled是否禁用分页booleanfalse
hide-on-single-page只有一页时是否隐藏boolean-

WARNING

我们现在会检查一些不合理的用法,如果发现分页器未显示,可以核对是否违反以下情形:

  • totalpage-count 必须传一个,不然组件无法判断总页数;优先使用 page-count;
  • 如果传入了 current-page,必须监听 current-page 变更的事件(@update:current-page),否则分页切换不起作用;
  • 如果传入了 page-size,且布局包含 page-size 选择器(即 layout 包含 sizes),必须监听 page-size 变更的事件(@update:page-size),否则分页大小的变化将不起作用。

事件

事件名说明参数
size-changepage-size 改变时触发新每页条数
current-changecurrent-page 改变时触发新当前页
prev-click用户点击上一页按钮改变当前页时触发新当前页
next-click用户点击下一页按钮改变当前页时触发新当前页

WARNING

以上事件不推荐使用(但由于兼容的原因仍然支持,在以后的版本中将会被删除);如果要监听 current-page 和 page-size 的改变,使用 v-model 双向绑定是个更好的选择。

插槽

名称说明
自定义内容 设置文案,需要在 layout 中列出 slot

源代码

组件文档

贡献者