element-ui 分页器的使用

最新推荐文章于 2023-07-21 08:45:18 发布

@晔

最新推荐文章于 2023-07-21 08:45:18 发布

阅读量9.5k

点赞数 7

文章标签： vue vue.js

本文链接：https://blog.youkuaiyun.com/weixin_47258963/article/details/108619264

版权

本文介绍了如何在Vue项目中使用Element-UI的Pagination分页器组件。详细步骤包括从组件库获取分页器代码，将其添加到Vue模板，并进行事件绑定，如`handleSizeChange`和`handleCurrentChange`。同时，解释了`queryinfo.pagenum`和`queryinfo.pagesize`的用途，以及如何设置pageSize选择项 `[1, 2, 5, 10]`。还提到了分页器界面上的`total`, `sizes`, `prev`, `pager`, `next`, `jumper`等元素的含义，以及如何动态获取数据。" articleid,blogid,新标题,新标签,新关键词,新摘要 112072020,10547903,Java Stream API：如何获取List的第一个对象,"['Java', 'Stream API', '集合处理', '枚举类型', 'getter', 'setter']

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

1. ui组件

1.在element-ui找到Paginaion分页器打开代码拷贝第四个组件

在这里插入图片描述
2. 在vue template里写

//分页区
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
    :current-page="queryInfo.pagenum" :page-size="queryInfo.pagesize" :page-sizes="[1, 2, 5, 10]" 
      layout="total, sizes, prev, pager, next ,jumper" :total="total">
</el-pagination>

以下为详细注释：

// @size-change=“handleSizeChange” 绑定的是 pagesize 改变的事件
// @current-change=“handleCurrentChange” 绑定的是 页码值改变的事件
//:current-page=“queryinfo.pagenum” 代表当前显示第几页这里动态的获取 data 里的条数
//:page-size=“queryinfo.pagesize” 代表当前每页显示多少条数据这里动态的获取 data 里的页数
//:page-sizes="[1, 2, 5, 10]" 这里的数组提供 pageSize 的切换
//layout=“total, sizes, prev, pager, next ,jumper” 每个值代表页面上展示的功能组件 布局结构
// :total=“total” 总共显示的数据动态获取到data的总条数

3.data方法里写

   // 总条数
   total: 0,
   //参数
   queryInfo: {	
     			 query: '',
       			 // 当前页数
        		 pagenum: 1,
       			 // 显示一页多少条数据
       			 pagesize: 1
        	  }

4.methods方法里写

//监听 pagesize 改变的事件
handleSizeChange(newsize){
//这里conso 选中第几页 最新的值
console.log(newsize)
//最新的条数（newsize）赋值给 动态的 pagesie
this.queryInfo.pagesize = newsize
//获取到最新一页显示的数据  重新发送axios请求 这里是封装好的请求方法
this.userlistinfo()
},


 // 监听 页码值 改变的事件
 handleCurrentChange(newPage) {
 console.log(newPage)
 //把最新的页码（newPage）赋值给 动态的 pagenum 
 this.queryInfo.pagenum = newPage
 //获取到最新显示的页码值  重新发送axios请求 这里是封装好的请求方法
 this.userlistinfo()
}