mirror of
https://gitee.com/ElemeFE/element.git
synced 2024-12-05 05:38:24 +08:00
2.3 KiB
2.3 KiB
基础用法
适用广泛的基础用法。
<el-pagination
layout="prev, pager, next"
:total="50">
</el-pagination>
小型分页
在空间有限的情况下,可以使用简单的小型分页。
<el-pagination
small
layout="prev, pager, next"
:total="50">
</el-pagination>
复杂分页
能够承载复杂交互的分页,显示更多页码。
<el-pagination
layout="prev, pager, next"
:total="1000">
</el-pagination>
附加功能
在复杂分页的基础上,根据场景需要,可以添加其他功能模块。
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" layout="sizes, prev, pager, next, jumper, total" :total="1000">
<el-pagination
layout="sizes, prev, pager, next, jumper, total"
:total="1000">
</el-pagination>
API
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
small | 小型分页样式 | Boolean | false | |
page-size | 每页个数 | Number | 10 | |
total | 总个数 | Number | 0 | |
current-page | 当前页数 | Number | 0 | |
layout | 组件布局,子组件名用逗号分隔。 | String | prev , pager , next , jumper , slot , -> , total |
'prev, pager, next, jumper, slot, ->, total' |
page-sizes | 切换每页显示个数的子组件值 | Number[] | [10, 20, 30, 40, 50, 100] | |
size-change | pageSize 改变时会触发的事件 | Function | ||
current-change | currentPage 改变时会触发的事件 | Function |