springboot + elementui 实现分页功能

后端

//	num为当前页 size为每页个数
    public Page<codesection> pageAll(int num, int size) {
    //第一部分 实现分页查询
        Pageable pageable = PageRequest.of(num,size);
        Page<codesection> codesections = codesectionDao.findAll(pageable);
        //第二部分 将page 转成list 添加数据
        List<codesection> codesectionslist = codesections.getContent();
        for (int i = 0; i < codesectionslist.size(); i++) {
            codesectionslist.get(i).setFactoryname(factoryinfoDao.findByFactoryid(codesectionslist.get(i).getFactoryid()).getFactoryname());
            codesectionslist.get(i).setLinename(lineinfoDao.findByLineid(codesectionslist.get(i).getLineid()).getLinename());
        }
        //第三部分将 list 转成 page 并返回
        // 当前页第一条数据在List中的位置
        int start = 0;
        // 当前页最后一条数据在List中的位置
        int end = codesectionslist.size();
        // 配置分页数据
        Page<codesection> klassPage = new PageImpl<codesection>(codesectionslist.subList(start, end), pageable, codesections.getTotalElements());
        return klassPage;
    }

前端

<div class="pagination">
  <el-pagination
    background
    layout="total, prev, pager, next"
    :current-page="query.pageIndex"
    :page-size="query.pageSize"
    :total="pageTotal"
    @current-change="handleCurrentChange"
    style="position: fixed;bottom: 20px;"
  ></el-pagination>
</div>

data() {
   return {
     query:{
       pageIndex:0,
       pageSize:9,
     },
     pageTotal: 0,
   }
 },
created() {
  this.getData(this.query.pageIndex,this.query.pageSize)
},
getData(currentPage,pageSize){
  this.axios({
    method:'GET',
    url:'/page/'+currentPage+'/'+pageSize,
  })
    .then(res =>{
      console.log(res)
      this.codes = res.data.content;
      this.pageTotal = res.data.totalElements;
    })
},
handleCurrentChange(value){
  this.query.pageIndex = value;//获得当前页码
  this.getData(this.query.pageIndex-1,this.query.pageSize);
}