利用sequelize和 element-ui 进行分页查询

router.get('/getProblemList', async ctx => {
    let { currentPage = 1 } = ctx.request.query
    let offset = (currentPage - 1) * 10;
    let userList = await Problem.findAndCountAll({
        //offet去掉前多少个数据
        offset,
        //limit每页数据数量
        limit: 10
    }).then(res => {
        let result = {};
        result.data = res.rows;
        result.total = res.count;
        return result;
    });
    ctx.body = userList;
})

返回数据如图,通过改变 currentPage 来进行当前页查询.

image.png

页面代码:

     <el-pagination
          @current-change="handleCurrentChange"
          :current-page="pages.currentPage"
          :page-size="pages.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pages.total"
        ></el-pagination>

data() {
  return:{
   pages: {
          limit: 10,
          currentPage: 1,
          total: 0
        },
   }
},
mothods:{
 async handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      let pro = await fetch(
        "http://localhost:8088/api/getProblemList/?currentPage=" + val
      );
      let problems = await pro.json();
      this.problems = problems.data;
    }
}

效果如下:

image.png