Pagination 分页 elemtemUI

 

 <!-- 分页 -->
       <el-pagination
       background
      @size-change="handleSizeChange"  
      @current-change="handleCurrentChange"
      :current-page="pagenum"
      :page-sizes="[1, 2, 5, 10]"
      :page-size="pagesize"
      layout="total, sizes, pager, next, jumper"     
      :total="total">
    </el-pagination>

 

参数	说明	类型	可选值	默认值
background	是否为分页按钮添加背景色	boolean	—	false
page-size	每页显示条目个数，支持 .sync 修饰符	number	—	10
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]

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

  // 回调函数 监听 页面 pageSize 每页显示条数改变时会触发 
    handleSizeChange(newPageSize){
      // console.log('每页显示条数',newPageSize)
      this.pagesize=newPageSize  //分页数据改变时赋值给 data 中的数据 
       this.getUserList()        //再重新发送一次请求
    },
    //回调函数 监听 currentPage 当前页改变时会触发 
    handleCurrentChange(newCurrentPage){
      console.log('当前页码',newCurrentPage)
      this.pagenum=newCurrentPage  //当前页发生改变时赋值给 data 中的数据  
      this.getUserList()        //再重新发送一次请求
    },