本文共 1326 字，大约阅读时间需要 4 分钟。

自己想的一个分页的逻辑，分享给大家。

Vue部分

使用ElementUI做了一个表格。

• <el-table-column>标签就是每一列的信息。
• <el-pagination>标签就是页码。
• @current-change该事件在切换页码时触发。对应的函数page中参数currentPage不需传参，它表示切换的页码，即点击page2，它的值就是2。
• 在created时，默认请求第一页的数据，这里是用axios发送请求，附带两个参数，即页码数pageNum和每一页要几条数据pageSize。这里的axios还要请求数据的总条数，以ElementUI生成页码。
• const _this = this是考虑到axios的回调函数中this指向的不确定性。

Springboot部分

这里只关注Controller部分和Mapper.xml部分。

@ResponseBody    @RequestMapping("/userList")    public Map
   
     userList(Integer pageSize, Integer pageNum) {
           Map
    
      map = new HashMap<>();        List
     
       userList = userService.findUserList(pageSize, pageNum * pageSize);        Integer TotalNum = userService.userTotalNum();        map.put("userList", userList);        map.put("TotalNum", TotalNum);        return map;    }
     
    
   

很简单的逻辑，userService.findUserList(pageSize, pageNum * pageSize)这里的两个参数，就是sql中limit语法中开始索引，索引条数。

       SELECT * FROM `user`       WHERE DelMark = 1           LIMIT #{pageNum},#{pageSize}               SELECT COUNT(delMark = 1) FROM `user`    

完成！

转载地址：http://rhozi.baihongyu.com/