Pagination 分页


当表格的数据量过多时,可以使用分页组件,每次只加载一页数据

基础分页

当页数小于 8 页时

Pagination分页 - 图1

  1. <at-pagination :total="60"></at-pagination>

更多的分页

当页数大于 8 页时,会显示更多可点击项

Pagination分页 - 图2

  1. <at-pagination :total="100"></at-pagination>

显示总数

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

Pagination分页 - 图3

  1. <at-pagination :total="80" show-total></at-pagination>

快速跳转

设置属性 show-quickjump 显示 快速跳转 操作框

Pagination分页 - 图4

  1. <at-pagination :total="100" show-quickjump></at-pagination>

改变每页显示的数量

设置属性 show-sizer 显示 改变每页显示数 操作框

Pagination分页 - 图5

  1. <at-pagination :total="100" show-sizer></at-pagination>

完整功能的分页

一个完整功能的分页组件

Pagination分页 - 图6

  1. <at-pagination :total="100" show-total show-sizer show-quickjump></at-pagination>

小型分页

设置属性 size 更改分页组件的尺寸,仅支持传入 small

Pagination分页 - 图7

  1. <at-pagination size="small" :total="100" show-total show-sizer show-quickjump></at-pagination>

极简风格的分页

设置属性 simple 使用极简风格的分页组件,功能比较简单,适用于某些特殊场景

Pagination分页 - 图8

  1. <at-pagination :total="100" simple></at-pagination>
  2. <at-pagination :total="100" size="small" simple></at-pagination>

Pagination 参数

参数说明类型可选值默认值
current当前页码Number-1
total总的数据条目数Number-0
page-size每页最多展示的条目数Number-10
page-size-opts改变每页显示数量的 select 选择框配置项Array-[10, 20, 30, 40]
show-total是否显示总条目数Boolean-false
show-sizer是否显示每页展示数量的 select 选择框Boolean-false
show-quickjump是否显示快速跳转Boolean-false
size分页组件的大小Stringsmall-
simple是否为极简风格Boolean-false

Pagination 事件

事件名称说明返回值
page-change页码改变时触发的回调页码
pagesize-change切换每页显示的条数时触发的回调每页的条目数