vue+element

页面展示：

vue组件中分页代码：

1            <div class="pagination">
2                <el-pagination
3                    @size-change="handleSizeChange"
4                    @current-change="handleCurrentChange"
5                    :current-page="cur_page"
6                    :page-sizes="[1, 2, 3, 4]"
7                    :page-size="pageNum"
8                    layout="total,sizes,  prev, pager, next, jumper"
9                    :total="totalCount">
10                </el-pagination>
11            </div>

先声明变量：

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

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

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

1、操作每页显示几条

1//操作每页显示几条
2            handleSizeChange(val) {
3                 this.pageNum=val;
4                 this.getPackData();//根据用户获取的每页显示页面数量显示页面
5            },

2、操作当前页

1  handleCurrentChange(val) {
2                this.cur_page = val;
3                this.getPackData();//获取用户点击的当前页后刷新页面数据
4            },

3、总条数获取：

1  totalPageNum(){
2                 this.$axios.get("/api/pagePackMade.do").then(res=>{
3                    this.totalCount =res.data[0].count;//总信息条数从数据库获取;
4                }).catch(error=>{
5                    console.log(error);
6                })
7            },