Element-UI分页组件

前端组件

<template>
    <!--分页-->
    <div class="block">
      <el-pagination
        :current-page="pageInfo.pageNum"
        :page-sizes="[3, 5, 7, 10]"
        :page-size="pageInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="margin-top:25px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
</template>

<script>
export default {
  data () {
    return {
      list: [],
      pageInfo: {
        pageNum: 1,
        pageSize: 5
      },
      total: 0
    }
  },
  methods: {
    getList() {
      BlogApi.list(this.pageInfo).then(res => {
        this.list= res.data.list
        this.total = res.data.total
        this.listLoading = false
      })
    },
  	// 监听pageSize改变的事件
    handleSizeChange (size) {
      this.pageInfo.pageSize = size
      this.getList()
    },
    // 监听页码值发生改变的事件
    handleCurrentChange (num) {
      this.pageInfo.pageNum = num
      this.getList()
    },  
  }
</script>

后台接口

@ApiOperation(value = "分页查询文件信息")
@ApiImplicitParams({
    @ApiImplicitParam(name = "pageNum", value = "当前页面", required = true, paramType = "query", dataType = "long"),
    @ApiImplicitParam(name = "pageSize", value = "当前页面大小", required = true, paramType = "query", dataType = "long")
})
@GetMapping("/get/all")
public R getAll(@RequestParam("pageNum") int pageNum,
                @RequestParam("pageSize") int pageSize) {
    List<CustomFile> customFiles = fileService.pagingQueryFiles(pageNum, pageSize);
    Map<String, Object> resMap = new HashMap<>();
    if (!customFiles.isEmpty()){
        resMap.put("total", fileService.count());
        resMap.put("files", customFiles);
        return R.ok(resMap).setCode(10000);
    }
    return R.failed("分页查询失败！").setCode(50000);
}