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 控制 html元素 显示/隐藏实现代码
Sep 01 Javascript
javascript类继承机制的原理分析
Sep 12 Javascript
为jQuery增加join方法的实现代码
Nov 28 Javascript
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
Jan 27 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
Jun 18 Javascript
JS 实现导航栏悬停效果
Sep 23 Javascript
原生JavaScript实现Ajax的方法
Apr 07 Javascript
BootStrap便签页的简单应用
Jan 06 Javascript
Express框架之connect-flash详解
May 31 Javascript
JavaScript 值类型和引用类型的初次研究(推荐)
Jul 19 Javascript
javascript获取元素的计算样式
May 24 Javascript
js实现幻灯片轮播图
Aug 14 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(1) php开发环境配置
2010/02/15 PHP
WordPress判断用户是否登录的代码
2011/03/17 PHP
ThinkPHP使用心得分享-分页类Page的用法
2014/05/15 PHP
一个PHP实现的轻量级简单爬虫
2015/07/08 PHP
php字符串函数 str类常见用法示例
2020/05/15 PHP
intro.js 页面引导简单用法 分享
2013/08/06 Javascript
javascript获得当前的信息的一些常用命令
2015/02/25 Javascript
yui3的AOP(面向切面编程)和OOP(面向对象编程)
2015/05/01 Javascript
javascript实现炫酷的拖动分页
2015/05/11 Javascript
BootStrap中的table实现数据填充与分页应用小结
2016/05/26 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
2016/11/25 Javascript
ES10 特性的完整指南小结
2019/03/04 Javascript
使用node.JS中的url模块解析URL信息
2020/02/06 Javascript
js实现坦克大战游戏
2020/02/24 Javascript
解决vue scoped html样式无效的问题
2020/10/24 Javascript
Python 元类使用说明
2009/12/18 Python
详解Python安装scrapy的正确姿势
2018/06/26 Python
使用Python和百度语音识别生成视频字幕的实现
2020/04/09 Python
Python实现汇率转换操作
2020/05/03 Python
10款最佳Python开发工具推荐,每一款都是神器
2020/10/15 Python
python爬虫利用selenium实现自动翻页爬取某鱼数据的思路详解
2020/12/22 Python
python解包概念及实例
2021/02/17 Python
耐克巴西官方网站:Nike巴西
2016/08/14 全球购物
Sunglasses Shop荷兰站:英国最大的太阳镜独立在线零售商和供应商
2017/01/08 全球购物
Penhaligon’s英国官网:成立于1870年的英国香水制造商
2021/02/18 全球购物
六一儿童节主持词
2014/03/21 职场文书
争当四好少年演讲稿
2014/09/13 职场文书
房屋维修协议书范本
2014/09/25 职场文书
KTV门卫岗位职责
2014/10/09 职场文书
护士节慰问信
2015/02/15 职场文书
2016应届毕业生实习评语
2015/12/01 职场文书
2016年机关单位节能宣传周活动总结
2016/04/05 职场文书
使用Python的开发框架Brownie部署以太坊智能合约
2021/05/28 Python
Java实战之用Swing实现通讯录管理系统
2021/06/13 Java/Android
浅析Redis Sentinel 与 Redis Cluster
2021/06/24 Redis
Ubuntu安装Mysql+启用远程连接的完整过程
2022/06/21 Servers