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方法

你可能感兴趣的:(Vue)