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学习笔记(二十) 获得和设置元素的特性(属性)
Jun 20 Javascript
Ajax执行顺序流程及回调问题分析
Dec 10 Javascript
HTML5之lang属性与dir属性的详解
Jun 19 Javascript
JQuery实现可直接编辑的表格
Apr 16 Javascript
Angular.js中用ng-repeat-start实现自定义显示
Oct 18 Javascript
jquery实现图片列表鼠标移入微动
Dec 01 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
Apr 23 Javascript
详解AngularJS脏检查机制及$timeout的妙用
Jun 19 Javascript
js原生代码实现轮播图的实例讲解
Jul 28 Javascript
使用vue-cli编写vue插件的方法
Feb 26 Javascript
async/await优雅的错误处理方法总结
Jan 30 Javascript
js比较两个单独的数组或对象是否相等的实例代码
Apr 28 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
详解Yii2.0 rules验证规则集合
2017/03/21 PHP
PhpStorm本地断点调试的方法步骤
2018/05/21 PHP
javascript 继承实现方法
2009/08/26 Javascript
JavaScript 判断指定字符串是否为有效数字
2010/05/11 Javascript
Eclipse去除js(JavaScript)验证错误
2014/02/11 Javascript
js实现模拟计算器退格键删除文字效果的方法
2015/05/07 Javascript
JS实现文档加载完成后执行代码
2015/07/09 Javascript
jQuery实现选项联动轮播效果【附实例】
2016/04/19 Javascript
jquery输入数字随机抽奖特效的简单实现代码
2016/06/10 Javascript
js实现table添加行tr、删除行tr、清空行tr的简单实例
2016/10/15 Javascript
JavaScript 字符串常用操作小结(非常实用)
2016/11/30 Javascript
js实现炫酷的左右轮播图
2017/01/18 Javascript
谈谈JavaScript数组常用方法总结
2017/01/24 Javascript
jquery.picsign图片标注组件实例详解
2018/02/02 jQuery
Vue中使用vux配置代码详解
2018/09/16 Javascript
使用原生js编写一个简单的框选功能方法
2019/05/13 Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
2019/11/04 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
2020/01/21 Javascript
[04:09]2014DOTA2国际邀请赛Ti西雅图 历届冠军相继出局 BBC综述今日比赛
2014/07/20 DOTA
web.py 十分钟创建简易博客实现代码
2016/04/22 Python
python中使用正则表达式的后向搜索肯定模式(推荐)
2017/11/11 Python
python TCP Socket的粘包和分包的处理详解
2018/02/09 Python
对Python3中的input函数详解
2018/04/22 Python
Python深拷贝与浅拷贝用法实例分析
2019/05/05 Python
将Python文件打包成.EXE可执行文件的方法
2019/08/11 Python
PyCharm第一次安装及使用教程
2020/01/08 Python
Python逐行读取文件内容的方法总结
2020/02/14 Python
html5唤醒APP小记
2019/03/27 HTML / CSS
Bibloo荷兰:女士、男士和儿童的服装、鞋子和配饰
2019/02/25 全球购物
美国NBA官方商店:NBA Store
2019/04/12 全球购物
领导失职检讨书
2014/02/24 职场文书
宿舍标语大全
2014/06/19 职场文书
大学生见习期满自我鉴定
2014/09/13 职场文书
工作骂脏话检讨书
2014/10/05 职场文书
社区国庆节活动总结
2015/03/23 职场文书
民事辩护词范文
2015/05/21 职场文书