实现分页效果

在表格<el-table>后增加一个分页组件

@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-table>
 <!--分页区域-->
      <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>

methods中添加每页显示数据条数变化的函数和页码值变化的函数

 methods: {
      //初始化这个组件会调用getUserList，从而发起一次axios请求，返回一个promise对象，为了简化promise操作
      //我们可以使用async和await来优化这次异步请求，紧接着我们会得到一个数据对象，从这个数据对象里我们可以解构赋值出一个data属性
      //将其重命名为res
      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
        console.log(this.userList)
      },
      /*监听 pagesize 改变的事件*/
      handleSizeChange(newSize) {
        // console.log(newSize)
        this.queryInfo.pagesize = newSize
        // 更改每页显示数据后重新获取数据
        this.getUserList()
      },
      // 监听 页码值 改变的事件
      handleCurrentChange(newPage){
        // console.log(newPage)
        this.queryInfo.pagenum = newPage
        this.getUserList()
      }
    }

太贴近表格了，在globe.css中加入

.el-pagination{
  margin-top: 15px;
}

效果：