element-ui 分页器的使用

article/2025/10/31 9:59:43

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()
}