Element UI+vue+Springboot实现分页数据加载

前言

分页功能在web应用中属于最为常见的功能，特别是在用表格展示大量数据的场景下。

前端实现

首先选择Element UI的两个组件 el-pagination和el-table组件
这两个组件没有必然的联系，el-table只需绑定数据源即可

  <el-table :data="emps" border stripe>
        <el-table-column prop="name" label="姓名" align="left" fixed width="120"></el-table-column>
        <el-table-column prop="workID" label="工号" align="left" width="120"></el-table-column>
        <el-table-column prop="email" label="邮箱" align="left" width="180"></el-table-column>
  </el-table>

el-pagination关联的三个变量分别是 数据总量 ；每页显示条目个数； 当前页数

      total:0,
      currentPage:1,
      currentSize:10,

el-pagination里面绑定total，@size-change表示pageSize 改变时会触发， @current-change表示currentPage 改变时会触发

 <el-pagination
            background
            @size-change="sizeChange"
            @current-change="currentChange"
            layout="sizes, prev, pager, next, jumper, ->, total, slot"
            :total="total">
</el-pagination>

看到这里，我们发现这两个组件之间确实没有直接的关系，那么如何建立联系呢？换句话说当我的pageSize或者currentPage 发生改变时，表格中的数据源emps也会展示对应的数据。
思考：emps是后端传给我们的，后端是从mysql数据库中获取的，mysql是支持分页获取的。
所以前端发送http请求传入pageSize、currentPage，每次获取第currentPage页后的pageSize条数据。

this.getRequest("/emps/?page="+this.currentPage+"&size="+this.currentSize).then(resp=>{
        if(resp){
          this.emps = resp.data;
          this.total = resp.total;
        }
      })

后端实现

@GetMapping("/emps")
    public ResultInfo getAllEmps(@RequestParam(defaultValue = "1") Integer page,
                                             @RequestParam(defaultValue = "10") Integer size){
        //计算从第几条数据开始获取，注意数据有第0页的
        if(page != null && size != null){
            page = (page-1) * size;
        }
        //查询对应的list数据
        List<Emps> all = empsMapper.getAlEmps(page,size);
        //获取对应的total
        Long total = empsMapper.getTotal();
        RespPageBean respPageBean = new RespPageBean();
        respPageBean.setData(all);
        respPageBean.setTotal(total);
        return ResultUtil.success(respPageBean);
    }

注意：前端有时候会出现数据重复的情况，每次获取时最好是对数据进行一个排序，排序的字段最好是索引字段。

总结

如有疑问或错误，请评论指正谢谢。