vue+Element-ui实现分页效果

当我们向后台请求大量数据的时候,并要在页面展示出来,请求的数据可能上百条数据或者更多的时候,并不想在一个页面展示,这就需要使用分页功能来去完成了。

1.本次所使用的是vue2.0+element-ui实现一个分页功能,element-ui这个组件特别丰富,分页中给我提供了一个Pagination 分页,使用Pagination 快速完成分页功能

 

最终效果展示

 

<div class="deit"><div class="crumbs"><el-breadcrumb separator="/"><el-breadcrumb-item><i class="el-icon-date"></i> 数据管理</el-breadcrumb-item><el-breadcrumb-item>用户列表</el-breadcrumb-item></el-breadcrumb><div class="cantainer"><el-table style="width: 100%;":data="userList.slice((currentPage-1)*pagesize,currentPage*pagesize)"  //对数据请求的处理,最为重要的一句话><el-table-column type="index" width="50">    </el-table-column><el-table-column label="日期" prop="date" width="180">    </el-table-column><el-table-column label="用户姓名" prop="name" width="180">    </el-table-column><el-table-column label="邮箱" prop="email" width="180">    </el-table-column><el-table-column label="地址" prop="address" width="200">    </el-table-column>    </el-table><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage":page-sizes="[5, 10, 20, 40]" //这是下拉框可以选择的,每选择一行,要展示多少内容:page-size="pagesize"         //显示当前行的条数layout="total, sizes, prev, pager, next, jumper":total="userList.length">    //这是显示总共有多少数据,</el-pagination></div></div></div>

 

需要data定义一些,userList定义一个空数组,请求的数据都是存放这里面

 

data () {return {currentPage:1, //初始页pagesize:10,    //    每页的数据userList: []}},

 

对一些数据,方法处理,数据的来源是自己通过json-server搭建的本地数据,通过vue-resource请求数据,

 

created() {this.handleUserList()},methods: {// 初始页currentPage、初始每页数据数pagesize和数据datahandleSizeChange: function (size) {this.pagesize = size;console.log(this.pagesize)  //每页下拉显示数据},handleCurrentChange: function(currentPage){this.currentPage = currentPage;console.log(this.currentPage)  //点击第几页},handleUserList() {this.$http.get('http://localhost:3000/userList').then(res => {  //这是从本地请求的数据接口,this.userList = res.body})}}

 

 

以上都是分页所需的功能,也是自己在自己写案例中所遇到的,并总结下方便查看,喜欢的可以关注一下

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/247409.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ListViewAutoScrollHelper

ListViewAutoScrollHelper转载于:https://www.cnblogs.com/ZacharyHodgeZou/p/4208350.html

wx.navigateTo跳转首页无效

问题: 首页A—B,B—C,C—A(回首页无效) 先来看首页,首页是由tabBar中三个页面组成 再来看下首页的代码组成 //只保留核心代码 "tabBar": { ... "list": [ { "pagePath": "pages/home/home", "te…

21款网页版html5小游戏源码

html5魅族创意的贪食蛇游戏源码下载 html5网页版打砖块小游戏源码下载 html5 3D立体魔方小游戏源码下载 html5网页版飞机躲避游戏源码下载 html5三国人物连连看游戏源码下载 js html5 2048数字游戏源码_2048网页版源码下载 html5盲打高手打飞字游戏下载_网页版英文打飞字游戏源…

Cookie的使用(js-cookie插件)

一、安装 npm install js-cookie --save二、引用 import Cookies from js-cookie三、一般使用 存到Cookie去 // Create a cookie, valid across the entire site: Cookies.set(name, value);// Create a cookie that expires 7 days from now, valid across the entire site…

js的array.some()方法

定义和用法 some() 方法用于检测数组中的元素是否满足指定条件&#xff08;函数提供&#xff09;。 some() 方法会依次执行数组的每个元素&#xff1a; 如果有一个元素满足条件&#xff0c;则表达式返回true , 剩余的元素不会再执行检测。如果没有满足条件的元素&#xff0c…

AOP集成防止连续多次点击问题

AOP即Aspect Oriented Programming的缩写,习惯称为切面编程;与OOP(面向对象编程)万物模块化的思想不同,AOP则是将涉及到众多模块的某一类问题进行统一管理,AOP的优点是将业务逻辑与系统化功能高度解耦,让我们在开发过程中可以只专注于业务逻辑,其他一些系统化功能(如路由、日志…

应用内安装部分手机出现解析错误

在做应用内升级安装apk 的时候 出现了 程序包解析出错&#xff0c;这就很难受了 明明程序包有问题&#xff0c;而且还并不是必发&#xff0c;查了下资料发现是7.0版本的问题 有好几种说法会引起这个问题 1 使用了V2包 我们在打包的时候最好不要用V2签名 2 加入临时授权 intent.…

自定义input[type=file]的兼容样式

input[type"file"]的样式在各个浏览器中的表现不尽相同&#xff1a; 1. chrome: 2. firefox: 3. opera: 4. ie: 5. edge: 另外&#xff0c;当我们规定 input[type"file"] 的高度&#xff0c;并把它的行高设置成与其高度相等后&#xff0c;chrome中难看的样…

Excel催化剂开源第37波-音视频文件元数据提取(分辨率,时长,采样率等)

上一篇提到图片元信息Exif的提取&#xff0c;当然还有一类音视频文件&#xff0c;也同样存储着许多宝贵的元数据&#xff0c;那就开源到底呗&#xff0c;虽然自己找寻过程也是蛮艰辛坎坷的&#xff0c;大家看后有收获&#xff0c;只求多多传播下&#xff0c;让前人的工作可以更…

ECharts 雷达图在类目值下面显示数值

需要实现的效果&#xff1a; 官网里面的demo显示数值&#xff0c;都是在拐点处&#xff1a; 【解决】 1、只显示类目 <div id"mychart" style"width:300px;height:300px;margin:0 auto;"></div><script>var arr1 [60,73,85,40,60];var…

RecyclerView复用item导致数据混乱

一般recyclerview会复用item以让recycler性能提升 但是我们有些时候会出现复用了之后混乱的情况 如何防止RecyclerView复用item呢 1 最好是每一个有判断的地方&#xff0c;都要写全所有情况&#xff0c;什么意思呢 if里textView设了一个值&#xff0c;false也必须设置一个值 2 …

echarts tooltip在图表范围内显示

以下两种解决方式&#xff0c;能够应对大部分出现此类问题项目 tooltip.position: 提示框浮层的位置&#xff0c;默认不设置时位置会跟随鼠标的位置。 可选&#xff1a;string, Array, Function 一、解决方法&#xff1a; 1、设置x轴固定不动 y轴上下跟随 /*设置x轴左右固定…

Vue.js 动态为img的src赋值

在vue中动态给src赋值绑定图片会显示不出来 动态添加src被当做静态资源处理了&#xff0c;没有进行编译 解决方法&#xff1a; 1、用网络地址 把图片放在cdn或自己的服务器上&#xff0c;把网络地址存在imgUrl里&#xff0c;然后直接<img :src"Url"> 2.把图片放…

项目打包部署到Tomcat

一、 使用 npm run build打包完成之后会出现一个dist文件夹&#xff0c;里面有static文件夹和一个index.html文件&#xff0c;一般我们部署在tomcat上面会将文件放在webapps文件夹下 如果不进行任何修改将dist文件夹放进去的话&#xff0c;会出现资源路径错误的问题&#xff…

算法阶段三总结

3月25日-4月4日这段时间里。我把字符串的一些基本操作和算法学了下。主要有串的基本操作&#xff0c;字符串的hash函数&#xff08;Rabin-Karp&#xff0c;ELFhash&#xff09;&#xff0c;还有KMP算法。总体感觉还是不错的。尤其清明这三天没出去&#xff0c;都呆在宿舍了&…

vue.config和editorconfig

我们在做项目的时候&#xff0c;应该给经常用到的文件配置它的别名&#xff0c;这样做&#xff0c;既可以方便引用&#xff0c;也可以防止当文件位置发生改变的时候出现错误。 配置前: import bartar from ../../components/bartar 配置后(不用再关心文件层级关系): import bar…

Java生鲜电商平台-订单配送模块的架构与设计

Java生鲜电商平台-订单配送模块的架构与设计 生鲜电商系统最终的目的还是用户下单支付购买&#xff0c; 所以订单管理系统是电商系统中最为复杂的系统&#xff0c;其作为中枢决定着整个商城的运转&#xff0c; 本文将对于生鲜类电商平台的订单设计做一个完整的分析&#xff0c;…

vue项目,webpack中配置src路径别名及使用

默认会有‘’别名&#xff0c;指向src目录&#xff0c;还可以添加自定义别名等等。 使用方法 使用别名一般就三种情况&#xff1a;在js中用&#xff0c;在css中用&#xff0c;在html文档内用 js中用&#xff0c;最简单: import {getName} from /util/namecss中使用&#xff0…

fastclick库的介绍和使用

移动端点击延迟事件 1. 移动端浏览器在派发点击事件的时候&#xff0c;通常会出现300ms左右的延迟 2. 原因: 移动端的双击会缩放导致click判断延迟 fastclick 是具有消除移动端浏览器上的点击事件的 300ms 的延迟的作用。 注意几点 1、PC端无效 2、Android 上的 Chrome …

toString()和String.valueOf()的区别(转)

惯例广告一发&#xff0c;对于初学真&#xff0c;真的很有用www.java1234.com&#xff0c;去试试吧&#xff01; 有的朋友在用这两个的时候感觉差不多 其实&#xff0c;很多时候效果是差不多的 但是&#xff0c;有的时候用.toString()会报错&#xff0c;而用String.valueOf()就…