vue后端接口分页怎么写

两分钟搞定,快来试试吧,很简单

data

 // 后端必填参数  这个根据文档的参数去填,不能乱填否则可能会参数错误
      obj: {
        // 当前页
        pagenum: 1,
        // 页容量
        pagesize: 10,
      },

html

     <!-- 分页 -->
      <div class="block">
        <el-pagination
          :page-sizes="[3, 5, 10]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>

js

methods: {
//这个是请求后端数据,我是经过封装构api的,使用的时候可以直接用axios去请求数据,
    list() {
      getUserList(this.obj).then((res) => {
        console.log(res);
        // 将请求的数据赋值给变量
        this.tableData = res.users;
        // 总条数
        this.total = res.total;
      });
    },
    // 当前页事件, 有默认参数val, 赋值给默认定义的数据(当前页),这样点击分页,页数就会跟着变
    handleCurrentChange(val) {
      // console.log(val);
      // 将val赋值当前页,页数改变重新请求
      this.obj.pagenum = val;
      this.list();
    },
    // 页数改变,将val 赋值 给 pagesize
    handleSizeChange(val) {
      // console.log(val);
      this.obj.pagesize = val;
      this.list();
    },
  },

完!