可选择页数的分页

圈圈年年

于 2021-03-04 14:38:51 发布

阅读量239

点赞数

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/qq5678574/article/details/114367764

版权

vue 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了如何实现一个包含可选择页数的分页布局，通过参数`layout="sizes,prev, pager, next"`来设置，其中`sizes`用于提供可选页数的选择。点击不同页码或选择每页显示的条目数后，系统会自动更新查询以展示相应内容。" 124229261,9291502,C语言指针详解：从基本概念到*与&的运用,['c语言'],"['C语言', '指针', '指针变量', '星号*', '取地址符&', '数据地址']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

   <el-pagination
        style="margin-top: 30px"
        background
        layout="sizes,prev, pager, next"
        :total="countLine"
        @current-change="onCurrentChange"
        :page-size="pageSize"
        :page-sizes="[5, 10, 15, 20]"
        @size-change="handleSizeChange"
      >
      </el-pagination>

layout="sizes,prev, pager, next"这个就是布局👇
sizes就是左边这个可选页数
在这里插入图片描述
点击每个页码后更新查询：

 onCurrentChange(page){//分页
        console.log("当前页码",page)//拿到当前页码
      this.page=page
      this.search()


    },

点击选择每页几条后，再次查询：

    handleSizeChange(val) {
      /*console.log(`每页 ${val} 条`);*/
      this.pageSize=val
      this.search()
    },
  }