vue+Element-ui实现分页效果


Posted in Javascript onNovember 15, 2020

本文实例为大家分享了vue+Element-ui实现分页效果的具体代码,供大家参考,具体内容如下

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

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

最终效果展示

vue+Element-ui实现分页效果

<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和数据data
  handleSizeChange: 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
   })
  }
 }

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

关于vue.js的学习教程,请大家点击专题vue.js组件学习教程、Vue.js前端组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 表单的友好用户体现
Jan 07 Javascript
js中判断文本框是否为空的两种方法
Jul 31 Javascript
谈谈关于JavaScript 中的 MVC 模式
Apr 11 Javascript
js获取指定日期前后的日期代码
Aug 20 Javascript
javascript对象的使用和属性操作示例详解
Mar 02 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
Mar 26 Javascript
Javascript中3个需要注意的运算符
Apr 02 Javascript
JavaScript中的Math.E属性使用详解
Jun 12 Javascript
jQuery原理系列-css选择器的简单实现
Jun 07 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
Sep 26 Javascript
JSON对象 详解及实例代码
Oct 18 Javascript
bootstrap模态框远程示例代码分享
May 22 Javascript
vue实现抽屉弹窗效果
Nov 15 #Javascript
vue项目中js-cookie的使用存储token操作
Nov 13 #Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
Nov 13 #Javascript
vant 解决tab切换插件标题样式自定义的问题
Nov 13 #Javascript
vue 授权获取微信openId操作
Nov 13 #Javascript
详解vue修改elementUI的分页组件视图没更新问题
Nov 13 #Javascript
Vue实现boradcast和dispatch的示例
Nov 13 #Javascript
You might like
PHP程序员不应该忽略的3点
2015/10/09 PHP
开启PHP的伪静态模式
2015/12/31 PHP
Yii2使用表单上传文件的实例代码
2017/08/03 PHP
PHP生成二维码与识别二维码的方法详解【附源码下载】
2019/03/07 PHP
PHP实现八皇后算法
2019/05/06 PHP
Mootools 1.2教程 选项卡效果(Tabs)
2009/09/15 Javascript
jQuery EasyUI API 中文文档 搜索框
2011/09/29 Javascript
javascript椭圆旋转相册实现代码
2012/01/16 Javascript
JavaScript基础知识之数据类型
2012/08/06 Javascript
js操作textarea 常用方法总结
2012/12/03 Javascript
Extjs4 Treegrid 使用心得分享(经验篇)
2013/07/01 Javascript
解析img图片没找到onerror事件 Stack overflow at line: 0
2013/12/23 Javascript
jQuery文件上传插件Uploadify使用指南
2014/06/05 Javascript
Bootstrap创建可折叠的组件
2016/02/23 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
2016/04/07 Javascript
JS获取子窗口中返回的数据实现方法
2016/05/28 Javascript
ES6入门教程之Array.from()方法
2019/03/23 Javascript
vue使用axios上传文件(FormData)的方法
2019/04/14 Javascript
vue 中this.$set 动态绑定数据的案例讲解
2021/01/29 Vue.js
[11:12]2018DOTA2国际邀请赛寻真——绿色长城OpTic
2018/08/10 DOTA
[01:11:11]Alliance vs RNG 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
用python处理图片实现图像中的像素访问
2018/05/04 Python
python查找指定文件夹下所有文件并按修改时间倒序排列的方法
2018/10/21 Python
Python实现定期检查源目录与备份目录的差异并进行备份功能示例
2019/02/27 Python
python+pyqt5编写md5生成器
2019/03/18 Python
Python如何获取Win7,Win10系统缩放大小
2020/01/10 Python
信访工作者先进事迹
2014/01/17 职场文书
2014年综治宣传月活动总结
2014/04/28 职场文书
幼儿园爱国卫生月活动总结
2014/06/30 职场文书
六查六看自查报告
2014/10/14 职场文书
2014年度个人工作总结
2014/11/07 职场文书
教师先进事迹材料
2014/12/16 职场文书
党员个人党性分析材料
2014/12/18 职场文书
2016入党积极分子党课培训心得体会
2016/01/06 职场文书
20180830晚上第一届KSL半决赛 雨神vs解冻(二龙 三炮解说)
2022/04/01 星际争霸
Java 获取Word中所有的插入和删除修订的方法
2022/04/06 Java/Android