SpringBoot+MyBatis+Vue.ElementUI实现分页功能（前后台）

后台实体层名为 Floor

Service层

接口类
FloorService

    IPage<Floor> selectByPage(int currentPage, int pageSize);

实现接口类
FloorServiceImpl

    @Autowired
    private FloorMapper floorMapper;

   @Override
    public IPage<Floor> selectByPage(int currentPage, int pageSize) {
        //查询对象
        QueryWrapper<Floor> wrapper = new QueryWrapper<>();
        //分页  第一个参数为，查询第几页，第二个参数为 每页多少条记录
        Page<Floor> page = new Page<>(currentPage,pageSize);
        //
        IPage<Floor> floorIPage = floorMapper.selectPage(page,wrapper);
        return floorIPage;
    }

Mapper层

@Repository
@Mapper
public interface FloorMapper extends BaseMapper<Floor> {
}

Controller层

    //floor分页显示
    @RequestMapping("/api/getFloorPage")
    public IPage<Floor> getPage(@RequestParam("currentPage")int currentPage, @RequestParam("pageSize") int pageSize){
        return floorService.selectByPage(currentPage,pageSize);
    }

Vue页面

template

  <el-pagination
    :current-page="currentPage"
    :page-sizes="[10, 20, 40, 60]"
    :page-size="pageSize"
    layout=" total, sizes, prev, pager, next, jumper"
    :total="total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />

Script

  mounted() {
    this.show()
  },
  methods: {
handleSizeChange(pageSize) {
      this.loading = true
      this.pageSize = pageSize
      if (this.searchSelectValue.length !== 0) {
        this.$options.methods.getTableData(this)
      } else {
        this.show()
      }
    },
    handleCurrentChange(currentPage) {
      this.loading = true
      this.currentPage = currentPage
      if (this.searchSelectValue.length !== 0) {
        this.$options.methods.getTableData(this)
      } else {
        this.show()
      }
    },
          show() {
      axios({
        method: 'post',
        url: '/api/api/getFloorPage',
        params: {
          currentPage: this.currentPage,
          pageSize: this.pageSize
        }
      }).then(res => {
        if (res.status !== 200) {
          return
        }
        if (res.data) {
          this.tableData = res.data.records
          this.total = res.data.total
          this.loading = false
        }
      })
    }
    }

分页的数据赋值给tableData利用el-table循环遍历即可

前台实现分页功能

    <el-table
      ref="multipleTable"
      :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
      style="width: 100%;height:600px;overflow:scroll;overflow-x:hidden;border:1px solid darkgrey"
    >
        <div class="block" style="margin-left:300px;">
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[11, 20, 40, 60]"
        :page-size="pageSize"
        layout=" total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 11,
      total: '',
    }
  },
   methods: {
    handleSizeChange: function(size) {
      this.pageSize = size
    },
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage
    }
    }

这里是前台分页实现的重点