前端vue实现分页功能

前端Vue实现分页功能

我们都知道在spring boot项目中安装pagehelper可以实现分页功能，但是在vue中也能在前端实现分页。
1、
首先，在data中定义以下变量：

 data() {return {list: null,listLoading: true,totalPage: 1, // 统共页数，默认为1currentPage: 1, //当前页数 ，默认为1pageSize: 5, // 每页显示数量currentPageData: [], //当前页显示内容headPage: 1}},

2、发送请求，获取后端数据（list集合）

  axios.get('http://192.168.56.1:8081/sel/'+id).then((res) =>{console.log(res.data.data ) that.list = res.data.data that.listLoading = false

3、根据返回数据list的length来计算data中变量的值：

 this.totalPage=Math.ceil(this.list.length / this.pageSize);this.totalPage = this.totalPage == 0 ? 1 : this.totalPage;this.getCurrentPageData();

4、调用getCurrentPageData（）方法设置当前页面的数据

 getCurrentPageData() {let begin = (this.currentPage - 1) * this.pageSize;let end = this.currentPage * this.pageSize;this.currentPageData = this.list.slice(begin,end);},

5、添加按钮并实现首页、尾页、上一页、下一页功能：

 <input type="button" value="首页" @click="firstPage"><input type="button" value="上一页" @click="prevPage"><input type="button" value="下一页" @click="nextPage"><input type="button" value="尾页" @click="lastPage">

 //上一页prevPage() {if (this.currentPage == 1) {return false;} else {this.currentPage--;this.getCurrentPageData();}},// 下一页nextPage() {if (this.currentPage == this.totalPage) {return false;} else {this.currentPage++;this.getCurrentPageData();}},//尾页lastPage() {if (this.currentPage == this.totalPage) {return false;} else {this.currentPage=this.totalPage;this.getCurrentPageData();}} ,//首页firstPage(){this.currentPage=  this.headPage;this.getCurrentPageData();}

注意！
最后需要修改组件中的data

前端展示：

前端vue实现分页功能相关推荐

vue实现分页功能之最详细篇（一）
vue实现一个简单的分页功能记录一下vue学习之前看过别人文章,只是一个分页样式,这样对像我这种初学者来说帮助几乎为零,所以我这里写了一个完整的分页,希望可以帮助像我一样的初学者这是一个带有数据 ...
springboot分页展示功能_springboot+vue实现分页功能
[java]代码库package com.wyl.vue.controller; import java.util.HashMap; import java.util.List; import jav ...
前端vue实现导出功能：当后端给你返回的是文件流时，你要如何导出？
前言: 当有一个需求,让你导出文件.后台有时候会给你返回一个下载链接,做个按钮点一下发个请求就ok了但如果给你返回文件流,我们要怎么对文件流处理呢? 解决方案: 话不多说.我们直接上代码:从axio ...
前端模板-2【vue部分小功能、bug处理】
前端模板[vue部分小功能] 1 Vue部分模板 1.1 vue实现store[存储当前选中页面] 我的习惯用法,大家可自行调整[以存储当前页面名称为例] ①在src下新建文件夹store,并创建co ...
前端Vue+ElementUI的Pagination分页组件实现分页展示后端Spring Boot +Mybatis Plus实现分页接口
前端Vue+ElementUI的Pagination分页组件实现分页展示 & 后端Spring Boot +Mybatis Plus实现分页接口很久没有更新博客了,主要原因是博主一直在补充自 ...
vue技术框架下手机端移动上拉实现分页功能
vue技术框架下手机端移动上拉实现分页功能基于手机端项目实战总结而来 1.业务场景 2.前端优化思路 3.具体实现思路 4.把返回的数据首次取N条渲染页面 5.获取滚动条的当前位置 6.获取当前可视 ...
vue ---05 分页和详情页功能的实现
课程列表页分页显示数据 rest_framework 里面封装了有分页功能的组件,直接可以拿来即用在courses/views.py 中新建一个分页器类 (类的嵌套) from rest_fram ...
Vue+element-ui 实现表格的分页功能示例
Vue+element-ui 实现表格的分页功能示例 template部分: <el-table:data="tempList":header-cell-style=&quo ...
前端分页功能的实现以及原理
分页场景常见于电商网站,比如说淘宝天猫的评论区,分页功能一般是后台实现,前端请求就完事了.现闲得无聊,就写出来玩玩,只实现功能,并未封装. 以前写过一篇下拉刷新.加载数据功能博客,也附上链接,可点击查 ...

前端vue实现分页功能

前端Vue实现分页功能

前端vue实现分页功能相关推荐

最新文章

热门文章