el-pagination实现分页功能

template

<template> <el-pagination @size-change='handleSizeChange' //sizePage 改变时会触发的事件 background //是否为分页按钮添加背景色 boolean 默认false @current-change='handleCurrentChange' //currentPage 改变时会触发的事件 :current-page ='queryInfo.pagenum' //当前页数 :page-sizes='[5,10,15,20,50]' //每页显示个数选择器的选项设置 :page-size='queryInfo.pagesize' //每页显示条目个数 layout='total,sizes,prev,pager,next,jumper' //组件布局，子组件名用逗号分隔 :total='total'> //总条目数 </el-pagination> </template>

data

data(){ return{ queryInfo:{ pagenum:1,//当前页数 pagesize:10//每页条数 }, total:'',//总条目数 } }

methods

async getCateList(){ const {data : res} = await this.$axios.get('接口Url',{ params:{ //参数 current:this.queryInfo.pagenum, size:this.queryInfo.pagesize }, headers:{ //header参数 "token": "bearer " + "accessToken" } console.log(res)//返回当前页参数 }) }, handleSizeChange(val){ this.queryInfo.pagesize = val; this.getCateList() }, handleCurrentChange(val){ this.queryInfo.pagenum = val; this.getCateList() },

调用this.getCateList方法