element-ui 分页器的使用

1. ui组件

1.在element-ui找到Paginaion分页器 打开代码拷贝第四个组件

2. 在vue template里写

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

以下为详细注释：

// @size-change=“handleSizeChange” 绑定的是 pagesize 改变的事件
// @current-change=“handleCurrentChange” 绑定的是 页码值 改变的事件
//:current-page=“queryinfo.pagenum” 代表当前显示第几页 这里动态的获取 data 里的 条数
//:page-size=“queryinfo.pagesize” 代表当前每页显示多少条数据 这里动态的获取 data 里的 页数
//:page-sizes="[1, 2, 5, 10]" 这里的数组 提供 pageSize 的切换
//layout=“total, sizes, prev, pager, next ,jumper” 每个值代表页面上展示的功能组件 布局结构
// :total=“total” 总共显示的数据 动态获取到data的总条数

3.data方法里写

   // 总条数
   total: 0,
   //参数
   queryInfo: {	
     			 query: '',
       			 // 当前页数
        		 pagenum: 1,
       			 // 显示一页多少条数据
       			 pagesize: 1
        	  }

4.methods方法里写

//监听 pagesize 改变的事件
handleSizeChange(newsize){
//这里conso 选中第几页 最新的值
console.log(newsize)
//最新的条数（newsize）赋值给 动态的 pagesie
this.queryInfo.pagesize = newsize
//获取到最新一页显示的数据  重新发送axios请求 这里是封装好的请求方法
this.userlistinfo()
},


 // 监听 页码值 改变的事件
 handleCurrentChange(newPage) {
 console.log(newPage)
 //把最新的页码（newPage）赋值给 动态的 pagenum 
 this.queryInfo.pagenum = newPage
 //获取到最新显示的页码值  重新发送axios请求 这里是封装好的请求方法
 this.userlistinfo()
}

5.最后的效果图奉上