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

一、前端内容

1.定义分页组件

<!--分页组件
            size-change:页面显示条数改变时触发的事件
            current-change:页码改变时触发的事件
            current-page:当前页面
            page-sizes:接收一个整型数组，数组元素为展示的选择每页显示个数的选项
            page-size:每页显示的条数
            total:总条数
            -->
<el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
</el-pagination>

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;
    }