vue+element-ui的分页完整版

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

页面展示:

vue+element-ui的分页完整版_第1张图片

vue组件中分页代码:

            

先声明变量:

cur_page:1,//默认在第一页

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

totalCount:1,//默认总条数为一条

1、操作每页显示几条

//操作每页显示几条
            handleSizeChange(val) {
                 this.pageNum=val;
                 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);
                })
            },

转载于:https://my.oschina.net/u/3763385/blog/1928543

你可能感兴趣的:(vue+element-ui的分页完整版)