Element-UI分页组件

前端组件

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

<script>
export default {
  data () {
    return {
      files: [],
      pageInfo: {
        pageNum: 1,
        pageSize: 5
      },
      total: 0
    }
  },
  methods: {
    getFiles () {
      FileApi.getFiles(this.pageInfo).then(res => {
        if (res.code !== 10000) return this.$message.error('获取用户列表失败！')
        this.files = res.data.files
        this.total = res.data.total
      })
    },
  	// 监听pageSize改变的事件
    handleSizeChange (newSize) {
      this.pageInfo.pageSize = newSize
      this.getFiles()
    },
    // 监听页码值发生改变的事件
    handleCurrentChange (newPage) {
      this.pageInfo.pageNum = newPage
      this.getFiles()
    },
  }
</script>

后台接口

@ApiOperation(value = "分页查询文件信息")
@ApiImplicitParams({
    @ApiImplicitParam(name = "pageNum", value = "当前页面", required = true, paramType = "query", dataType = "int"),
    @ApiImplicitParam(name = "pageSize", value = "当前页面大小", required = true, paramType = "query", dataType = "int")
})
@GetMapping("/get/all")
public R getAllFiles(@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);
}