vue+element-ui的分页完整版

页面展示：

vue组件中代码：

<template>
<!-- 分页 -->
        <div class="pagination">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="cur_page"
                    :page-sizes="[1, 2, 3, 4]"
                    :page-size="pageNum"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totalCount">
                </el-pagination>
         </div>
       


</template>

先声明变量：

data(){
  return{
    cur_page:1,//默认在第一页

    pageNum:1,//默认每页显示1条数据

    totalCount:1，//默认总条数为一条
  }
}

1、操作每页显示几条：

//操作每页显示几条

handleSizeChange(val) {

    this.pageNum=val;//获取page-sizes里的每页显示几条数据的值，赋给我们自定义的每页显示数量的变量pageNum

    this.getPackData();//展示页面信息

},

2、操作当前页：

// 操作显示第几页

handleCurrentChange(val) {

     this.cur_page = val;

     this.getPackData();//确定当前页面后刷新页面

},

3、总条数获取：

//总页数

totalPageNum(){

    this.$axios.get("/api/pagePackMade.do").then(res=>{

        this.totalCount =res.data[0].count;//总信息条数从数据库获取;

}).catch(error=>{

     console.log(error);

})

},