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设计模式之单例模式实例
Sep 24 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
Aug 25 Javascript
JS实现slide文字框缩放伸展效果代码
Nov 05 Javascript
纯JS代码实现气泡效果
May 04 Javascript
玩转JavaScript OOP - 类的实现详解
Jun 08 Javascript
js实现可键盘控制的简单抽奖程序
Jul 13 Javascript
js中判断变量类型函数typeof的用法总结
Aug 09 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
May 03 Javascript
vue教程之toast弹框全局调用示例详解
Aug 24 Javascript
vue-router2.0 组件之间传参及获取动态参数的方法
Nov 10 Javascript
vue elementui form表单验证的实现
Nov 11 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
Jan 23 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函数
2008/10/03 PHP
让PHP COOKIE立即生效,不用刷新就可以使用
2011/03/09 PHP
php 按指定元素值去除数组元素的实现方法
2011/11/04 PHP
php对二维数组按指定键值key排序示例代码
2013/11/26 PHP
jQuery Mobile + PHP实现文件上传
2014/12/12 PHP
PHP IDE phpstorm 常用快捷键
2015/05/18 PHP
Laravel5.1 框架控制器基础用法实例分析
2020/01/04 PHP
js获取url参数的使用扩展实例
2007/12/29 Javascript
js中cookie的使用详细分析
2008/05/28 Javascript
JavaScript 对象链式操作测试代码
2010/04/25 Javascript
JavaScript ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_] )
2011/02/25 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
2013/09/25 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
2014/09/11 Javascript
浅谈下拉菜单中的Option对象
2015/05/10 Javascript
JavaScript实现图片轮播的方法
2015/07/31 Javascript
JS区分浏览器页面是刷新还是关闭
2016/04/17 Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
2016/05/21 Javascript
jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
2016/09/18 Javascript
AngularJS实现星星等级评分功能
2016/09/24 Javascript
使用bootstrap插件实现模态框效果
2017/05/10 Javascript
原生js轮播特效
2017/05/18 Javascript
JS实现页面内跳转的简单代码
2017/09/03 Javascript
jquery如何实现点击空白处隐藏元素
2017/12/05 jQuery
Electron中实现大文件上传和断点续传功能
2018/10/28 Javascript
python的几种开发工具介绍
2007/03/07 Python
Python实现给文件添加内容及得到文件信息的方法
2015/05/28 Python
教你用 Python 实现微信跳一跳(Mac+iOS版)
2018/01/04 Python
python对html过滤处理的方法
2018/10/21 Python
pygame游戏之旅 游戏中添加显示文字
2018/11/20 Python
在python中将list分段并保存为array类型的方法
2019/07/15 Python
Django 请求Request的具体使用方法
2019/11/11 Python
拉斯维加斯城市观光通行证:Las Vegas Pass
2019/05/21 全球购物
电脑教师的教学自我评价
2013/11/26 职场文书
公司采购主管岗位职责
2014/06/17 职场文书
2015年个人实习工作总结
2015/05/28 职场文书
教你如何使用Python下载B站视频的详细教程
2021/04/29 Python