element-plus的el-pagination分页

在项目中要做的分页大概是这个样子 ，其实element-plus框架里面也写的很详细，大概按照他的写就行

 首先是html

<!-- 分页 -->
<el-pagination
	background //为分页按钮添加背景色
	small //小型分页样式
	layout="total, sizes, prev, pager, next, jumper"//组件布局，子组件名用逗号分隔
	:total="total"//总条数
	:page-size="pageSize"//每页显示条目个数
	:page-sizes="[3,5,7,10,20,30,40,50]"//每页显示个数选择器的选项
	@update:page-size="pageSizeChange"//变更的事件
	@prev-click="prevfun"//用户点击上一页按钮改变当前页时触发
	@next-click="nextfun"//用户点击下一页按钮改变当前页时触发
	@current-change="currentchange"//current-page 改变时触发
>
</el-pagination>

data里面写上数据，pageNum是第一页，pageSize是随机写的

pageNum: 1,
pageSize: 20,
total: '',
next: '',
prev: '',
apiObj：[],

接下来是调取数据,首先给后台发送我们data里面的pageNum和pageSize，先获取到我们的初始页面

async getMenu(){
	var list = {
			     pageNum:this.pageNum,
			     pageSize:this.pageSize,
			   }
			   var res =接口（list）;

			   if(res.code == 200){
                   this.apiObj = res.data.records//数据
				   this.total = res.data.total//获取后台数据的总条数
				   this.pageSize =res.data.size
				}else{
					this.$message.warning("失败")
					return false
				}


			},

初始页面，之后进行下一页和上一页 ，以及现在一页的条数

 写上这几个就完毕了，也把想要的效果的写出来了

// 分页
prevfun(value) {
  //value拿到的当前的页码，点击上一页触发该函数
  this.pageNum = value
  this. getMenu(value)//调取接口
},
nextfun(value) {
	//value拿到页码，点击下一页触发该函数
	this.pageNum = value
	this. getMenu(value)//调取接口
},
//条数
pageSizeChange(value){
	this.pageSize =value
	this.getMenu(value)//调取接口
},
currentchange(value) {
	//页码发生变化会触发，这个用来触发点击页码时触发的。
	this.pageNum = value
	this. getMenu(value)//调取接口
},
//end

具体可以参照官网  Pagination 分页 | Element Plus