vue笔记-element ui中分页的使用

程序餐厅 2020-12-29

282

首先插入分页代码

            <!--分页区域-->
            <el-pagination
                    @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" ---->总页数

页面效果

数据库

文章转载自程序餐厅，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

vue笔记-element ui中分页的使用

评论