vue+Element-ui实现分页效果实例代码详解


Posted in Javascript onDecember 10, 2018

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

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
      })
    }
  }

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

可以关注一下https://github.com/MrZHLF/vue-admin-system,这个案例还在完善当中,功能还在增加

总结

以上所述是小编给大家介绍的vue+Element-ui实现分页效果实例代码详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js输出阴历、阳历、年份、月份、周示例代码
Jan 29 Javascript
javascript获取dom的下一个节点方法
Sep 05 Javascript
2则自己编写的jQuery特效分享
Feb 26 Javascript
浅谈Sublime Text 3运行JavaScript控制台
Jun 06 Javascript
Vue开发过程中遇到的疑惑知识点总结
Jan 20 Javascript
基于IView中on-change属性的使用详解
Mar 15 Javascript
详解微信小程序之一键复制到剪切板
Apr 24 Javascript
vue+element tabs选项卡分页效果
Jun 29 Javascript
vue 实现input表单元素的disabled示例
Oct 28 Javascript
BootstrapValidator实现表单验证功能
Nov 08 Javascript
JS数组属性去重并校验重复数据
Jan 10 Javascript
使用 Opentype.js 生成字体子集的实例代码详解
May 25 Javascript
JQuery实现ajax请求的示例和注意事项
Dec 10 #jQuery
微信小程序实现动态获取元素宽高的方法分析
Dec 10 #Javascript
PM2自动部署代码步骤流程总结
Dec 10 #Javascript
vue路由前进后退动画效果的实现代码
Dec 10 #Javascript
Vue.js子组件向父组件通信的方法实例代码详解
Dec 10 #Javascript
vue 基于element-ui 分页组件封装的实例代码
Dec 10 #Javascript
JavaScript对象拷贝与赋值操作实例分析
Dec 10 #Javascript
You might like
BBS(php &amp; mysql)完整版(二)
2006/10/09 PHP
php字符串替换函数substr_replace()用法实例
2015/03/17 PHP
thinkPHP5实现的查询数据库并返回json数据实例
2017/10/23 PHP
YUI 读码日记之 YAHOO.util.Dom - Part.1
2008/03/22 Javascript
Mozilla 表达式 __noSuchMethod__
2009/04/05 Javascript
ExtJs GridPanel简单的增删改实现代码
2010/08/26 Javascript
用jquery模仿的a的title属性(兼容ie6/7)
2013/01/21 Javascript
JS格式化数字保留两位小数点示例代码
2013/10/15 Javascript
利用javascript实现web页面中指定区域打印
2013/10/30 Javascript
js二维数组排序的简单示例代码
2014/01/24 Javascript
jquerymobile局部渲染的各种刷新方法小结
2014/03/05 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
2015/06/12 Javascript
js文本框输入内容智能提示效果
2015/12/02 Javascript
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
2016/02/18 Javascript
JavaScript事件学习小结(一)事件流
2016/06/09 Javascript
深入理解JS正则表达式---分组
2016/07/18 Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
2016/08/01 Javascript
微信小程序 空白页重定向解决办法
2017/06/27 Javascript
JS实现上传图片的三种方法并实现预览图片功能
2017/07/14 Javascript
anime.js 实现带有描边动画效果的复选框(推荐)
2017/12/24 Javascript
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
2019/09/03 jQuery
vue中使用[provide/inject]实现页面reload的方法
2019/09/30 Javascript
初学vue出现空格警告的原因及其解决方案
2019/10/31 Javascript
[03:28]2014DOTA2国际邀请赛 EG战队官方纪录片
2014/07/21 DOTA
[49:17]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第三场 1月26日
2021/03/11 DOTA
Python编程实现二分法和牛顿迭代法求平方根代码
2017/12/04 Python
flask中使用蓝图将路由分开写在不同文件实例解析
2018/01/19 Python
Python基础教程之if判断,while循环,循环嵌套
2019/04/25 Python
PyTorch 解决Dataset和Dataloader遇到的问题
2020/01/08 Python
基于Python3.7.1无法导入Numpy的解决方式
2020/03/09 Python
Melijoe时尚童装德国官网:Melijoe德国
2016/09/03 全球购物
营业员实习自我鉴定
2013/12/07 职场文书
亮化工程实施方案
2014/03/17 职场文书
一年级评语大全
2014/04/23 职场文书
大专生自荐书范文
2014/06/22 职场文书
寻衅滋事罪辩护词
2015/05/21 职场文书