Vue后台管理系统之实现分页功能示例

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

效果图：

功能描述：

  • 显示数据的总数目
  • 可选择每天的显示条数
  • 点击页码跳转到指定页数
  • 输入页码可跳转到指定页

1.功能实现

1.1 结构

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

1.2 逻辑

    data() {
      return {
        //请求参数
        queryInfo: {
          type: 3,
          //当前页数
          pagenum: 1,
          //指定当前页数显示的数目
          pagesize: 5,
        },
        goodsList: [],
        //总数据
        total: 0,
      }
    }

  methods: {
      //获取商品分类数据
      async getGoodsCate() {
        const { data: res } = await this.$http.get("categories", {
          params: this.queryInfo,
        })
        if (res.meta.status !== 200) {
          this.$message.error("获取参数失败")
        }
        this.total = res.data.total
        this.goodsList = res.data.result
        //console.log(this.goodsList)
      },
      //监听每页的条数
      handleSizeChange(pagesize) {
        // console.log(`每页 ${val} 条`)
        this.queryInfo.pagesize = pagesize
        this.getGoodsCate()
      },
      //监听当前页数
      handleCurrentChange(pageNum) {
        this.queryInfo.pagenum = pageNum
        this.getGoodsCate()
      },
    },

1.3 参数说明

1.4 效果演示

到此这篇关于Vue后台管理系统之实现分页功能示例的文章就介绍到这了,更多相关Vue 分页 内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue+Element实现分页效果

    vue+Element实现分页效果

    本文实例为大家分享了vue+Element实现分页效果的具体代码,供大家参考,具体内容如下 一般样式都是card里面包含列表和分页 这里就直接上代码了 <el-card> <!-- 用户列表区域 --> <el-table :data="rightsList.slice((currentPage-1)*pagesize,currentPage*pagesize)" border stripe> <el-table-column label=&q

  • Vue+Element-U实现分页显示效果

    本文实例为大家分享了Vue+Element-U实现分页显示效果的具体代码,供大家参考,具体内容如下 当我们从后端返回的数据量很大,并且根据需求我们需要将返回的数据全部都显示在页面中,默认情况下会把所有的数据全部显示在一个页面,这样非常影响视觉和页面的使用,所以需要使用分页 我这次使用的是Vue4.0 +  Element-UI组件,Element-UI库非常的丰富,它提供了一个分页组件 Pagination 展示效果:这个是获取两个时间段的上机记录 HTML部分: <el-card> <

  • vue实现分页功能

    vue实现分页功能

    本文实例为大家分享了vue实现分页功能的具体代码,供大家参考,具体内容如下 使用组件分页 自己写分页 一.组件分页 <el-pagination layout="prev, pager, next" @current-change="changePageNum" :current-page="pageNum" :page-size="pageSize" :total="total"> </

  • vue+Element-ui前端实现分页效果

    本文实例为大家分享了vue+Element-ui前端实现分页效果的具体代码,供大家参考,具体内容如下 分页技术 分页技术的概念 分页就是将所有的数据分段展示给用户,用户看到的可能不是全部的数据,而是其中一部分,用户可以通过点击页码来查找自己需要的内容,也可以通过模糊查询获取符合内容的数据 分页的意义 分页确实有效,但它一定会加大系统的复杂度,但可否不分页呢?如果数据量少的话当然可以.但是对于企业信息系统来说数据量不会限制在一个小范围内.如果不顾一切的Select * from某个表,再将返回的数

  • vue3封装自己的分页组件

    vue3封装自己的分页组件

    本文实例为大家分享了vue3封装自己分页组件的具体代码,供大家参考,具体内容如下 背景 在浏览列表类型的数据的时候,如果数据比较多一次性全部请求会出现性能损耗以及加载延迟等问题,那么此时分页组件就起到了关键作用,它可以只请求一部分数据,也不会占用太多的页面空间,想看别的数据可以通过页码的改变来发起请求,刷新页面数据 现在我们自己来封装分页组件 组件所需参数 total 属性 :用来传递数据总条数 pagesize 属性 :每页展示几条数据 currentPage 属性 :当前默认页码 chang

  • vue项目实现分页效果

    vue项目中实现分页效果,供大家参考,具体内容如下 1.这里我们使用element-ui来实现,先使用npm安装 npm i element-ui -S 2.在main.js中全局引入 import ElementUI from "element-ui" import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) //将element-ui挂在到全局 3.封装组件 <template> <div c

  • Vue后台管理系统之实现分页功能示例

    Vue后台管理系统之实现分页功能示例

    本文主要介绍了Vue后台管理系统之实现分页功能,分享给大家,具体如下: 效果图: 功能描述: 显示数据的总数目 可选择每天的显示条数 点击页码跳转到指定页数 输入页码可跳转到指定页 1.功能实现 1.1 结构 <!-- 分页 --> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="quer

  • Vue+element-ui 实现表格的分页功能示例

    Vue+element-ui 实现表格的分页功能示例

    本文介绍了Vue+element-ui 实现表格的分页功能示例,分享给大家,具体如下: 实现效果如下图所示: template部分: <el-table :data="tempList" :header-cell-style="rowClass" stripe border style="margin-bottom:14px;" :empty-text="emptyText"> <el-table-colum

  • 利用VUE框架，实现列表分页功能示例代码

    利用VUE框架，实现列表分页功能示例代码

    先来看一下效果图: 功能描述: 1. 点击页面序号跳转到相应页面: 2. 点击单左/单右,向后/向前跳转一个页面: 3. 点击双左/双右,直接跳转到最后一页/第一页: 4. 一次显示当前页面的前三个与后三个页面: 5. 始终显示最后一个页面: HTML: <!-- 分页开始 --> <div class="u-pages" style="margin-bottom:20px; margin-top:10px;"> <ul> <

  • JavaScript前端实现小说分页功能示例

    JavaScript前端实现小说分页功能示例

    目录 先让我找找我的思路在哪里 思路已至,码来! 结束 先让我找找我的思路在哪里 在小说读书APP中,都会有分页的功能,那么前端如何实现这个功能呢? 因为没有什么思路,那就只能在前辈的项目中寻找思路了. 这不,直接打开起点的页面,按下那个传说中的F12键,开始我传奇生涯!...不好意思,串台了 好了,然后在找一本有缘书,跟我一同前往那神秘的未知世界. 就决定是你了,开始免费试读. 然后我们就可以发现起点是如何实现这个功能的了,原来是使用columns这个属性来让文章自动分页的昂. 我们现在就去搜

  • vue实现一个简单的分页功能实例详解

    这是一个简单的分页功能,只能够前端使用,数据不能通过后台服务器进行更改,能容已经写死了. 下面的内容我是在做一个关于婚纱项目中用到的,当时好久没用vue了,就上网区找了别人的博客来看,发现只有关于element_ui的,基本全是,对自己没用什么用,就自己写了一个,效果如下: 点击相应的按钮切换到对应的内容内容: 下面我只发核心代码,css样式就不发了,自己想怎么写怎么写 <!-- 分页内容 --> <ul class="blog-lists-box"> <

  • 关于Ajax异步请求后台数据进行动态分页功能

    ajax请求后台拿到json类型的数据后,可以在它的success回调方法中进行动态分页,也就是表格重绘,此时,我们需要得到的数据包括:查询得到的数据.数据总条数.总页数.当前页数,其中前三条可在后台获取,对于当前页数,需要从前端获取点击页数再通过请求传递给后台,后台做完相应处理后再传回给前端. 请看如下例子: /** * * @param page 当前页 */ function getData(page){ var schoolid = $("#schoolid option:selecte

  • springboot vue测试前端项目管理列表分页功能实现

    springboot vue测试前端项目管理列表分页功能实现

    目录 基于 springboot+vue 的测试平台开发 一.前后端调通 1. 请求后端接口 2. 项目列表页面 3. 调整接口返回的时间格式问题 二.实现列表数据显示 1. 使用element UI组件库 2. 修改复制来的代码 三.实现分页 1.使用 组件 2. 给分页相关字段赋值 3. 关于 .sync 修饰符 基于 springboot+vue 的测试平台开发 继续更新 今天来完成项目列表的前端部分. 一.前后端调通 开发前端页面,框架里有 2 个地方需要改动: src/views: 这

  • php实现的后台表格分页功能示例

    本文实例讲述了php实现的后台表格分页功能.分享给大家供大家参考,具体如下: <?php //init.php $conn = mysqli_connect('127.0.0.1','root','','xz',3306); $sql = "SET NAMES UTF8"; mysqli_query($conn,$sql); $pagecount = 3; ?> user.php: <?php //用户管理 echo "用户管理<br/>&quo

  • vue实现的上拉加载更多数据/分页功能示例

    本文实例讲述了vue实现的上拉加载更多数据/分页功能.分享给大家供大家参考,具体如下: 加载状态 <div v-if='has_log == 0'> <load-more tip="上拉加载" :show-loading="false" background-color="#fbf9fe"></load-more> </div> <div v-if='has_log == 1'> <

  • 详解Vue后台管理系统开发日常总结(组件PageHeader)

    在后台管理系统的日常开发过程中发现对于同一个业务下面的版块不同的开发同事每次都会重复写页面标题的样式,而且不同的页面标题还不太一样.虽然有的页面标题栏承载的元素不一样,但是也有通用的部分,经过多个项目的迭代慢慢地总结与积累完善出了一个通用的页面标题组件<PageHeader/>. 下面是一个最常见的标题设计原型: 下面是同事给出的封装方案: 使用方式 <router-back class="router-back" text="详情" />

随机推荐