先上代码~
<el-pagination
@size-change="handleSizeChange" //每页的条数改变时候触发
@current-change="handleCurrentChange" // 当前页码改变时候会触发
:current-page="currentPage" //当前页
:page-sizes="[50, 100, 500]"// 每页显示个数选择器的选项设置
:page-size="PageSize" // 每页显示的条数
layout="total, sizes, prev, pager, njumper"
:total="totalCount"
>
</el-pagination>
- page-size 每页显示条目个数,支持 .sync 修饰符
- total 总条目数
- page-count 总页数,total 和 page-count 设置任意一个就可以达到显示页码的功能;如果要支持 page-sizes 的更改,则需要使用 total 属性
- pager-count 页码按钮的数量,当总页数超过该值时会折叠
- current-page 当前页数,支持 .sync 修饰符
- layout 组件布局,子组件名用逗号分隔
- page-sizes 每页显示个数选择器的选项设置
- popper-class 每页显示个数选择器的下拉框类名
- prev-text 替代图标显示的上一页文字
- next-text 替代图标显示的下一页文字
- disabled 是否禁用
- hide-on-single-page 只有一页时是否隐藏
Events
- size-change pageSize 改变时会触发
- current-change currentPage 改变时会触发