vue+element-ui的分页完整版

页面展示：

 

vue组件中代码：

先声明变量：

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);

})

},