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

属性

属性名 说明 类型 默认值
small deprecated 是否使用小型分页样式 boolean false
size 2.7.6 分页大小 enum 'default'
background 是否为分页按钮添加背景色 boolean false
page-size / v-model:page-size 每页显示条目个数 number
default-page-size 每页默认的条目个数,不设置时默认为10 number
total 总条目数 number
page-count 总页数, totalpage-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 下拉框挂载到哪个 DOM 元素 string
popper-class 每页显示个数选择器的下拉框类名 string ''
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 是否将下拉菜单teleport至 body boolean true
hide-on-single-page 只有一页时是否隐藏 boolean false

WARNING

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

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

事件

名称 说明 类型
size-change page-size 改变时触发 Function
current-change current-page 改变时触发 Function
change 2.4.4 current-pagepage-size 更改时触发 Function
prev-click 用户点击上一页按钮改变当前页时触发 Function
next-click 用户点击下一页按钮改变当前页时触发 Function

WARNING

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

插槽

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

源代码

组件 样式 文档

贡献者