分页器 完整版 解决切换每页展示多少条中的 **bug

125 阅读1分钟
<!-- 分页区域 -->
<!-- current-page 当前页码值 -->
<!-- page-size 每页显示多少条数据 -->
<!-- total 总数据条数 -->
<!-- page-sizes 数组,可选的每页多少条数据 -->
<el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="q.pagenum"
  :page-sizes="[2, 3, 5, 10]"
  :page-size="q.pagesize"
  layout="total, sizes, prev, pager, next, jumper"
  :total="total">
</el-pagination>



// 每页展示多少条,发生了变化
handleSizeChange(size) {
  console.log('每页展示多少条', size)
  // 1. 为 pagesize 赋值
  this.q.pagesize = newSize
  // 2. 重新请求列表数据
  this.gettArtList()
}



// 当前展示的是第几页,发生了变化
handleCurrentChange(num) {
  console.log('当前展示的是第几页', num)
  // 1. 为 pagenum 赋值
  this.q.pagenum = num
  // 2. 重新请求列表数据
  this.getArtList()
}

**解决切换每页展示多少条中的 **bug

// pagesize 发生了变化
handleSizeChange(newSize) {
  console.log('pagesize 发生了变化', newSize)
  // 1. 为 pagesize 赋值
  this.q.pagesize = newSize
  // 2. 默认展示第一页数据
  this.pagenum = 1
  // 3. 重新请求列表数据
  this.gettArtList()
}