vue+element-ui的分页完整版

1,074 阅读1分钟
页面展示:


vue组件中分页代码:

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

先声明变量:
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);                })            },