Pagination 分页
当表格的数据量过多时,可以使用分页组件,每次只加载一页数据
基础分页
当页数小于 8 页时
<at-pagination :total="60"></at-pagination>
更多的分页
当页数大于 8 页时,会显示更多可点击项
<at-pagination :total="100"></at-pagination>
显示总数
设置属性 show-total
显示数据总数
<at-pagination :total="80" show-total></at-pagination>
快速跳转
设置属性 show-quickjump
显示 快速跳转
操作框
<at-pagination :total="100" show-quickjump></at-pagination>
改变每页显示的数量
设置属性 show-sizer
显示 改变每页显示数
操作框
<at-pagination :total="100" show-sizer></at-pagination>
完整功能的分页
一个完整功能的分页组件
<at-pagination :total="100" show-total show-sizer show-quickjump></at-pagination>
小型分页
设置属性 size
更改分页组件的尺寸,仅支持传入 small
<at-pagination size="small" :total="100" show-total show-sizer show-quickjump></at-pagination>
极简风格的分页
设置属性 simple
使用极简风格的分页组件,功能比较简单,适用于某些特殊场景
<at-pagination :total="100" simple></at-pagination>
<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 | 分页组件的大小 | String | small | - |
simple | 是否为极简风格 | Boolean | - | false |
Pagination 事件
事件名称 | 说明 | 返回值 |
---|---|---|
page-change | 页码改变时触发的回调 | 页码 |
pagesize-change | 切换每页显示的条数时触发的回调 | 每页的条目数 |