vue的分页配置过程

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

@size-change="handleSizeChange" ：监测每页显示条数的改变

@current-change="handleCurrentChange"： 监测当前页的改变

:current-page：当前页

page-sizes：每页显示条数

layout："total, sizes, prev, pager, next, jumper" 表示这几个组件的布局，如果删除其中一项则该属性不显示。

:total：总数

2.在methods中设置相关事件

// 监听pagesize改变的事件，其中pagesize变量为vue自动获取的改变的每页显示条数
handleSizeChange(newSize){
  this.queryInfo.pagesize = newSize
  // 再次调用getUserList方法发起请求，由于请求的参数是queryInfo，其中的pagenum已经改变所以获取的数据发生改变
  this.getUserList()
},
// 监听页码值改变的事件，其中newPage变量为vue自动获取的改变的当前页码值
handleCurrentChange(newPage){
  // 将改变的值赋值给当前页码，则queryInfo的pagenum也随之变化。
  this.queryInfo.pagenum = newPage
  // 再次调用getUserList方法发起请求，由于请求的参数是queryInfo，其中的pagenum已经改变所以获取的数据发生改变
  this.getUserList()
},

其中所用的getUserList方法如下

async getUserList(){
  const {data:res} =await this.$http.get('users',{params:this.queryInfo})
  console.log(res)
  if (res.meta.status !== 200) return this.$message.error('获取用户列表失败')
  this.userlist = res.data.users
  this.total = res.data.total
 },

3.定义数据

data(){
  return{
    // 获取列表的参数对象
    queryInfo:{
      //查询参数
      query: '',
      // 当前页码
      pagenum: 1,
      // 每页显示条数
      pagesize: 2
    },
    userlist: [],
    total: 0
  }