vue后端分页,vue怎么实现分页

　　本文主要介绍Vue后台管理系统分页功能的实现，通过实例代码详细介绍，具有一定的参考价值。感兴趣的朋友可以参考一下。

　　主要介绍Vue后台管理系统分页功能的实现，分享给大家，具体如下：

效果图：

功能描述：

　　显示的数据总数

　　您可以选择每天显示的条数。

　　单击页码跳转到指定的页码。

　　输入页码以跳转到指定页面。

1.功能实现

　　1.1结构

　　！-分页-

　　el分页

　　@size-change=handleSizeChange

　　@ current-change= handleCurrentChange

　　:current-page= query info . pagenum

　　:page-size=[2，5，10，15]

　　:page-size=queryInfo.pagesize

　　layout=总计，大小，上一页，分页，下一页，跳转

　　:total=total

　　/El-分页

　　1.2逻辑

　　data() {

　　返回{

　　//请求参数

　　查询信息：{

　　类型：3，

　　//当前页数

　　pagenum: 1，

　　//指定显示的当前页数。

　　页面大小：5，

　　},

　　商品列表：[]，

　　//总数据

　　总计：0，

　　}

　　}

　　方法：{

　　//获取商品分类数据

　　异步getGoodsCate() {

　　const { data: res }=等待此消息。$http.get(类别，{

　　params: this.queryInfo，

　　})

　　if (res.meta.status！==200) {

　　这个。$message.error(无法获取参数)

　　}

　　this . total=RES . datatotal

　　this.goodsList=res.data.result

　　//console.log(this.goodsList)

　　},

　　//监控每页的文章数量

　　handleSizeChange(pagesize) {

　　//console . log(` $ { val } items per page `)

　　this . query info . pagesize=pagesize

　　this.getGoodsCate()

　　},

　　//监听当前的页数

　　handleCurrentChange(pageNum) {

　　this.queryInfo.pagenum=pageNum

　　this.getGoodsCate()

　　},

　　},

　　1.3参数描述

　　1.4效果演示

　　关于Vue后台管理系统实现分页功能的例子，本文到此为止。更多相关Vue分页内容，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。