Element-Ui组件----Pagination 分页


完整功能分页

<el-pagination
      @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400"> </el-pagination>

 

pagination 属性:

参数 类型 说明 可选值 默认值
small 是否使用小型分页样式 Boolean false
background 是否为分页按钮添加背景色 Boolean false
page-size 每页显示条目个数 Number 10
total 总条目数 Number
page-count 总页数,total 和 page-count 设置任意一个就可以达到显示页码的功能;如果要支持 page-sizes 的更改,则需要使用 total 属性 Number
current-page 当前页数,支持 .sync 修饰符 Number 1
layout 组件布局,子组件名用逗号分隔 String sizes, prev, pager, next, jumper, ->, total, slot ‘prev, pager, next, jumper, ->, total’
page-sizes 每页显示个数选择器的选项设置 Number[] [10, 20, 30, 40, 50, 100]
popper-class 每页显示个数选择器的下拉框类名 string
prev-text 替代图标显示的上一页文字 string
next-text 替代图标显示的下一页文字 string

pagination 事件

事件名称 说明 回调参数
size-change pageSize 改变时会触发 每页条数size
current-change currentPage 改变时会触发 当前页currentPage

pagination slot

name 说明
自定义内容,需要在 layout 中列出 slot


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM