Element-UI分页

  <span style="text-align: center;display:block;">
  <el-pagination
      :current-page="num"
      :total="total" 
      :page-size="size"
      @current-change="showList"
     
      layout="total, prev, pager, next, jumper"
    >
    </el-pagination>
    </span>

data

pagelist:null,
            num:1,
            size:5,
            total:0,
            pages:10,
            sysStaffVO:{
                name:'',
                phone:'',
                gmtCreate:'',
                gmtModified:''
            }, //条件

method

 methods:{
        showList(page=1){
            this.num = page
            console.log(this.num)
            listUser.show(this.num,this.size,this.sysStaffVO)
            .then(responce =>{
                //请求成功
                //注意有this
                this.pagelist = responce.data.pagelist.records
                this.num = responce.data.num;
                this.total = responce.data.pagelist.total
                console.log(this.pagelist)
            })
            .cache(error =>{
                alert("错误")
            })
        },

java controller

    //分页查询  显示
    @PostMapping("/show/{num}/{size}")
//    public R show(@RequestBody SysStaffVO sysStaffVO){
    public R show(@PathVariable("num") int num, @PathVariable("size") int size,@RequestBody SysStaffVO sysStaffVO){
        System.out.println("进入");
        R r = R.ok();
//
        if(sysStaffVO!=null){
            System.out.println(sysStaffVO.toString());
        }
        Page page = sysStaffService.pageParam(num,size,sysStaffVO);
        r.data("pagelist",page).data("num",num).data("size",size);
        System.out.println(page.getRecords());
        return r;
    }

service

@Override
    public Page<SysStaff> pageParam(int num, int size, SysStaffVO staff) {
        SysStaff sysStaff = new SysStaff();
        Page<SysStaff> page = new Page<>(num,size);
        QueryWrapper wrapper = new QueryWrapper();
        if(null!=staff){
            if(staff.getName()!=null)
                wrapper.like("sys_staff_username",staff.getName());
            //之后  //注意未表中字段名称
            if(staff.getPhone()!=null)
                wrapper.like("sys_staff_phone",staff.getPhone());
            if(staff.getGmtCreate()!=null)
                wrapper.ge("gmt_create",staff.getGmtCreate());
//            wrapper.le("gmtModified",user.getGmtModified())
            if(staff.getGmtModified()!=null){
                wrapper.le("gmt_Modified",staff.getGmtModified());
            }
        }
        wrapper.ne("sys_staff_authority",1);
        wrapper.orderByDesc("gmt_create");
        baseMapper.selectPage(page,wrapper);
        return page;
    }