Vue+Element-ui分页组件el-pagination(前后端结合)

一、前端内容

1.定义分页组件

2.data数据层需要定义的数据

data(){
    return{
                //当前显示的页码
                currentPage:1,
                //可选的每条显示几条数据
                pageSizes:[5,10,15,20],
                //每页显示的条数
                pageSize:5,
                //总条数
                total:0
    }
}

3.methods方法层需要定义的方法

            //页码显示的条数大小改变时触发的方法
            handleSizeChange(val) {
                this.pageSize=val;
                //this.onsubmit()可以理解为刷新页面的方法没
            },
            //页面改变时触发的方法
            handleCurrentChange(val){
                this.currentPage=val;
                //this.onsubmit()
            },

4.向后端传递分页内容的方法

onsubmit(){
                this.$http.post("/role/findAll/"+this.currentPage+"/"+this.pageSize,this.RoleSearch).then(result=>{
                    console.log(result.data.data)
                    this.tableData=result.data.data.records
                    this.total=result.data.data.total;//取回后端查询到的当前页数据
                })
            },

二、后端内容

controller层接收数据

@PostMapping("/findAll/{currentPage}/{pageSize}")
    public CommonResult findAll(@PathVariable Integer currentPage, @PathVariable Integer pageSize,@RequestBody RoleVo roleVo){
        System.out.println(roleVo);
        CommonResult allRole = roleService.findAllRole(currentPage, pageSize, roleVo);
        return allRole;
    }