element实现分页功能

1.展示效果

2.添加组件代码

<el-pagination background layout="prev, pager, next" 
v-show="total>0" 
:total="total"
:current-page="params.pageNo" 
:page-size="params.pageSize" 
@current-change="handleCurrentChange"
id="page" />

data() {
  return {
     gallerys: [],
     total: 0,//总数据量
     params: {
        pageNo: 1,//当前页
        pageSize: 5//页面展示的数据量
     },
  }
},

mounted() {
            this.getVideo();
            this.initGallery();
        },
methods: {
			//当前页改变事件
			handleCurrentChange(val) {
				//获取当前页
                this.params.pageNo = `${val}`;
                this.initGallery();
            },
            //异步请求后台接口数
			initGallery() {
                this.axios.get("/love/api/gallery/list", { params: this.params }).then((res) => {
                    if (res.data.success) {
                        let data = res.data.result;
                        this.params.pageNo = data.current
                        this.total = data.total;
                        this.gallerys = data.records;
                        console.log(data)
                    }
                });
            }
}

3java后端接口代码

@GetMapping("/list")
    public Result getGalleryList(String type,
                                 Integer pageNo,//当前页
                                 Integer pageSize,//当前页的数据量
                                 HttpServletRequest req){
        Page<OSSFile> page = new Page<OSSFile>(pageNo, pageSize);
        QueryWrapper<OSSFile> queryWrapper=new QueryWrapper<OSSFile>();
        if (StringUtils.isNotBlank(type)){
            queryWrapper.eq("type",type);
        }
        IPage<OSSFile> pageList = ossFileService.page(page,queryWrapper);
        return Result.OK(pageList);
    }