element-ui 切换分页条数，会出现两次请求

字段：pageSize代表每页条数（初始为10），page代表页数（初始为1），total代表总数

分页组件每页显示条数[10,20]

下面代码分别时页面改变和每页条数改变时调用的函数

// 页码改变时调用    
handleCurrentChange (val) {
  // 修改页码
  this.page= val
  // 获取表格数据
  this.getTableData()
},

// 每页条数改变时调用
handleSizeChange (pageSize) {
  // 修改每页条数 
  this.pageSize = size
  // 获取表格数据
  this.getTableData()
},

1.首先先分析场景。

a.初始查询条件{ pageSize:10, page:1 }，后端返回的数据为{ pageSize: 10, page: 1, total: 11 }，el-pagination这个组件会自动整理好共有2页。

b.跳转第2页，查询条件{ pageSize:10, page:2 }，后端返回的数据为{ pageSize: 10, page: 2, total: 11 }，el-pagination这个组件会自动整理好共有2页。

c.切换每页显示条数为20条时，查询条件{ pageSize:20, page:2 }，后端返回的数据为{ pageSize: 20, page: 2, total: 11 }，el-pagination这个组件会自动整理好共有1页。这时矛盾出现了，总共只有1页，而page为第2页，el-pagination这个组件就会自动调用@current-change中的函数并且返回页码最大值，就会出现调用了两次接口的问题。

2.解决方式就是在修改每页条数的时候进行校验，只要page不大于最大页数即可：

// 每页条数改变时调用
handleSizeChange (pageSize) {
  // 修改每页条数 
  this.pageSize = pageSize
  // 获取最大页数
  let pageMax = Math.ceil(this.total / pageSize)
  // 判断跳转页数是否大于最大页数，如果大于，跳转页数就等于最大页数
  if (this.page > pageMax) {
    this.page = pageMax
  }
  // 获取表格数据
  this.getTableData()
},