分页组件change_vue笔记element ui中分页的使用

首先插入分页代码

                                            @size-change="handleSizeChange"                    @current-change="handleCurrentChange"                    :current-page="queryInfo.pagenum"                    :page-sizes="[1, 2, 5, 10]"                    :page-size="queryInfo.pagesize"                    layout="total, sizes, prev, pager, next, jumper"                    :total="total">            </el-pagination>

handleSizeChange方法表示监听当前页面,每页显示多少数据

handleCurrentChange方法表示监听当前是第几页

所以要创建这两个方法,参数就是当前页面的新的数据

和之前第一次请求的数据进行双向绑定,即页面每页数据,或第几页发生变化,拿着新的数据重新发起一次请求

:current-page="queryInfo.pagenum"  ----->当前页面展示几条数据:page-size="queryInfo.pagesize"    ----->当前是第几页

这两个也要绑定data中的数据,即页面需要显示对应的数据(每页多少数据,当前页)

layout="total, sizes, prev, pager, next, jumper" --->需要显示的组件:total="total" ---->总页数

页面效果