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 相关文章推荐
js 实现无缝滚动 兼容IE和FF
Jul 15 Javascript
用javascript删除当前行,添加行(示例代码)
Nov 25 Javascript
给ListBox添加双击事件示例代码
Dec 02 Javascript
学习JavaScript设计模式(单例模式)
Nov 26 Javascript
js+css绘制颜色动态变化的圈中圈效果
Jan 27 Javascript
jQuery实现的分子运动小球碰撞效果
Jan 27 Javascript
基于React.js实现原生js拖拽效果引发的思考
Mar 30 Javascript
JS代码随机生成姓名、手机号、身份证号、银行卡号
Apr 27 Javascript
canvas 画布在主流浏览器中的尺寸限制详细介绍
Dec 15 Javascript
Vue中computed与methods的区别详解
Mar 24 Javascript
详解如何使用koa实现socket.io官网的例子
Nov 04 Javascript
Javascript实现秒表计时游戏
May 27 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 iconv() : Detected an illegal character in input string
2010/12/05 PHP
PHP实现的带超时功能get_headers函数
2015/02/10 PHP
php 实现进制相互转换
2016/04/07 PHP
PHP自定义函数实现数组比较功能示例
2017/10/19 PHP
清华大学出版的事半功倍系列 javascript全部源代码
2007/05/04 Javascript
jQuery 阴影插件代码分享
2012/01/09 Javascript
jQuery中mouseover事件用法实例
2014/12/26 Javascript
jQuery中slice()方法用法实例
2015/01/07 Javascript
JavaScript 模块化编程(笔记)
2015/04/08 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
2015/09/15 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
2017/09/27 Javascript
React数据传递之组件内部通信的方法
2017/12/31 Javascript
vue实现点击展开点击收起效果
2018/04/27 Javascript
Vue.js实现表格渲染的方法
2018/09/07 Javascript
少女风vue组件库的制作全过程
2019/05/15 Javascript
基于vue实现圆形菜单栏组件
2019/07/05 Javascript
对Layer UI 模块化的用法详解
2019/09/26 Javascript
js实现div色块拖动录制
2020/01/16 Javascript
[01:18:21]EG vs TNC Supermajor小组赛B组败者组第一轮 BO3 第一场 6.2
2018/06/03 DOTA
[00:23]魔方之谜解锁款式
2018/12/20 DOTA
python操作excel的方法(xlsxwriter包的使用)
2018/06/11 Python
Python实现爬取亚马逊数据并打印出Excel文件操作示例
2019/05/16 Python
Python集合基本概念与相关操作实例分析
2019/10/30 Python
python GUI库图形界面开发之PyQt5美化窗体与控件(异形窗体)实例
2020/02/25 Python
解决TensorFlow程序无限制占用GPU的方法
2020/06/30 Python
微软澳洲官方网站:Microsoft Australia
2017/01/10 全球购物
银河香水:Galaxy Perfume
2019/03/25 全球购物
青年创业培训欢迎词
2014/01/10 职场文书
银行学习十八大感想
2014/01/11 职场文书
丑小鸭教学反思
2014/02/03 职场文书
十八届三中全会宣传方案
2014/02/21 职场文书
房屋租赁协议书(标准版)
2014/10/02 职场文书
清明节扫墓活动总结
2015/02/09 职场文书
贪污检举信范文
2015/03/02 职场文书
Pytorch可视化的几种实现方法
2021/06/10 Python
python解析照片拍摄时间进行图片整理
2022/07/23 Python