Pagination 分页

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

基础用法

设置layout,表示需要显示的内容,用逗号分隔,布局元素会依次显示。 分页元素如下: prev (上一页按钮), next (下一页按钮), pager (分页列表), jumper (跳转), total (总计), sizes (每页条数选择) 和 -> (every element after this symbol will be pulled to the right).

When you have few pages
  • 1
  • 2
  • 3
  • 4
  • 5
When you have more than 7 pages
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 100

设置最大页码按钮数

默认情况下,当总页数超过 7 页时,Pagination 会折叠多余的页码按钮。 通过 pager-count 属性可以设置最大页码按钮数。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 50

带有背景色的分页

设置background属性可以为分页按钮添加背景色。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 100

小型分页

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

通过size更改大小 这是个 small的例子

  • 1
  • 2
  • 3
  • 4
  • 5
  • 1
  • 2
  • 3
  • 4
  • 5

当只有一页时隐藏分页

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


  • 1

附加功能

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

此示例是一个完整的用例。 使用了 size-changecurrent-change 事件来处理页码大小和当前页变动时候触发的事件。 page-sizes接受一个整数类型的数组,数组元素为展示的选择每页显示个数的选项,[100, 200, 300, 400] 表示四个选项,每页显示 100 个,200 个,300 个或者 400 个。

background:
disabled:

Total item count
Total 1000
  • 1
  • 3
  • 4
  • 5
  • 6
  • 7
  • 10
Change page size
  • 1
  • 3
  • 4
  • 5
  • 6
  • 7
  • 10
Jump to
  • 1
  • 3
  • 4
  • 5
  • 6
  • 7
  • 10
Go to
All combined
Total 400
  • 1
  • 2
  • 3
  • 4
Go to

API

属性

属性名说明类型默认值
size 2.7.6分页大小enum'default'
background是否为分页按钮添加背景色booleanfalse
page-size / v-model:page-size每页显示条目个数number
default-page-size每页默认的条目个数,不设置时默认为10number
total总条目数number
page-count总页数, totalpage-count 设置任意一个就可以达到显示页码的功能;如果要支持 page-sizes 的更改,则需要使用 total 属性number
pager-count设置最大页码按钮数。 页码按钮的数量,当总页数超过该值时会折叠number7
current-page / v-model:current-page当前页数number
default-current-page当前页数的默认初始值,不设置时默认为 1number
layout组件布局,子组件名用逗号分隔stringprev, pager, next, jumper, ->, total
page-sizes每页显示个数选择器的选项设置object[10, 20, 30, 40, 50, 100]
append-size-to 2.8.4下拉框挂载到哪个 DOM 元素string
popper-class每页显示个数选择器的下拉框类名string''
prev-text替代图标显示的上一页文字string''
prev-icon上一页的图标, 比 prev-text 优先级更高string / ComponentArrowLeft
next-text替代图标显示的下一页文字string''
next-icon下一页的图标, 比 next-text 优先级更低string / ComponentArrowRight
disabled是否禁用分页booleanfalse
teleported 2.3.13是否将下拉菜单teleport至 bodybooleantrue
hide-on-single-page只有一页时是否隐藏booleanfalse
small deprecated是否使用小型分页样式booleanfalse

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 改变时触发Function
current-changecurrent-page 改变时触发Function
change 2.4.4current-pagepage-size 更改时触发Function
prev-click用户点击上一页按钮改变当前页时触发Function
next-click用户点击下一页按钮改变当前页时触发Function

WARNING

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

插槽

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

源代码

组件样式文档

贡献者