Vue+element-ui 实现表格的分页功能示例


Posted in Javascript onAugust 18, 2018

本文介绍了Vue+element-ui 实现表格的分页功能示例,分享给大家,具体如下:

实现效果如下图所示:

Vue+element-ui 实现表格的分页功能示例

template部分:

<el-table
  :data="tempList"
  :header-cell-style="rowClass"
  stripe
  border style="margin-bottom:14px;"
  :empty-text="emptyText">
  <el-table-column property="name" label="债券名称" width="228"></el-table-column>
  <el-table-column property="marketValue" label="市值" width="228" align="right" :formatter="formatDecimal2"></el-table-column>
  <el-table-column property="type" label="债券类型"></el-table-column>
  <el-table-column property="ratio" label="占母基金的比重" align="right" :formatter="toPercent"></el-table-column>
</el-table>
<div class="paginationClass">
  <el-pagination
  @size-change="handleSizeChange1"
  @current-change="handleCurrentChange1" :current-page="currentPage1"
  :page-sizes="[10, 20, 50, 100]"
  :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
  :total="total1">
  </el-pagination>

</div>

数据部分:获取测试的数据(19个)

data() {
  return {
     total1: 0,
     currentPage1:1,
     pageSize:10,
     bondsAllList: [{
      "name": "16协信01",
      "marketValue": 691861.0999317318,
      "type": "信用债",
      "ratio": 0.0027959958264152343
    }, {
      "name": "16朗诗01",
      "marketValue": 690131.4471819025,
      "type": "信用债",
      "ratio": 0.002789005836849196
    }, { 
      "name": "16三盛01",
      "marketValue": 688816.9110920322, 
      "type": "信用债",
      "ratio": 0.0027836934447790073
    }, { 
      "name": "17三鼎01",
      "marketValue": 685426.7917023668, 
      "type": "信用债",
      "ratio": 0.002769993065229573
    }, { 
      "name": "16临开债",
      "marketValue": 676640.4401650192, 
      "type": "信用债",
      "ratio": 0.00273448506769905
    }, { 
      "name": "16华讯01",
      "marketValue": 614990.17198298, 
      "type": "信用债",
      "ratio": 0.0024853398381849607
    }, { 
      "name": "16花样03",
      "marketValue": 614990.0028613778, 
      "type": "信用债",
      "ratio": 0.0024853391547193142
    }, { 
      "name": "15协信01",
      "marketValue": 614987.6443837617, 
      "type": "信用债",
      "ratio": 0.0024853296234802085
    }, { 
      "name": "16三盛03",
      "marketValue": 461240.73328782123, 
      "type": "信用债",
      "ratio": 0.0018639972176101563
    }, { 
      "name": "16山钢03",
      "marketValue": 384367.27773985104, 
      "type": "信用债",
      "ratio": 0.0015533310146751303
    }, { 
      "name": "14甘公01",
      "marketValue": 324002.01240352966, 
      "type": "信用债",
      "ratio": 0.0013093788254893862
    }, { 
      "name": "15新湖债",
      "marketValue": 307493.82219188084, 
      "type": "信用债",
      "ratio": 0.0012426648117401043
    }, { 
      "name": "16珠管01",
      "marketValue": 303035.16177009855, 
      "type": "信用债",
      "ratio": 0.0012246461719698726
    }, { 
      "name": "16重机债",
      "marketValue": 299103.36126325984, 
      "type": "信用债",
      "ratio": 0.0012087567140880767
    }, { 
      "name": "17三鼎01",
      "marketValue": 8163.960979194436, 
      "type": "信用债",
      "ratio": 3.2992750751699765E-5
    }, { 
      "name": "16重机债",
      "marketValue": 1475.2323613477674, 
      "type": "信用债",
      "ratio": 5.961808700804324E-6
    }, { 
      "name": "14甘公01",
      "marketValue": 723.1485963397557, 
      "type": "信用债",
      "ratio": 2.92243697100979E-6
    }, { 
      "name": "15新湖债",
      "marketValue": 707.2357910413259, 
      "type": "信用债",
      "ratio": 2.85812906700224E-6
    }, { 
      "name": "16珠管01",
      "marketValue": 153.74691109594042, 
      "type": "信用债",
      "ratio": 6.213324058700521E-7
    }]
  }
}

methiods部分:

methods:{
  handleSizeChange1: function(pageSize) { // 每页条数切换
    this.pageSize = pageSize
    this.handleCurrentChange1(this.currentPage1);
  },
  handleCurrentChange1: function(currentPage) {//页码切换
    this.currentPage1 = currentPage
    this.currentChangePage(this.bondsAllList,currentPage)
    
  },
  //分页方法(重点)
  currentChangePage(list,currentPage) { 
   let from = (currentPage - 1) * this.pageSize;
   let to = currentPage * this.pageSize;
   this.tempList = [];
   for (; from < to; from++) {
    if (list[from]) {
     this.tempList.push(list[from]);
    }
   }
  },
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript中的prototype属性实例分析说明
Aug 09 Javascript
js四舍五入数学函数round使用实例
May 09 Javascript
JavaScript数值数组排序示例分享
May 27 Javascript
jscript读写二进制文件的方法
Apr 22 Javascript
前端页面文件拖拽上传模块js代码示例
May 19 Javascript
利用C/C++编写node.js原生模块的方法教程
Jul 07 Javascript
详解vue+webpack+express中间件接口使用
Jul 17 Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
Sep 07 Javascript
angularjs通过过滤器返回超链接的方法
Oct 26 Javascript
用vue 实现手机触屏滑动功能
May 28 Javascript
原生js生成图片验证码
Oct 11 Javascript
解读Vue组件注册方式
May 15 Vue.js
vue下history模式刷新后404错误解决方法
Aug 18 #Javascript
详解javascript appendChild()的完整功能
Aug 18 #Javascript
vue中的自定义分页插件组件的示例
Aug 18 #Javascript
vue 自定义提示框(Toast)组件的实现代码
Aug 17 #Javascript
微信小程序实现即时通信聊天功能的实例代码
Aug 17 #Javascript
在iFrame子页面里实现模态框的方法
Aug 17 #Javascript
layer弹出层 iframe层去掉滚动条的实例代码
Aug 17 #Javascript
You might like
php 面向对象的一个例子
2011/04/12 PHP
PHP 调试工具Debug Tools
2011/04/30 PHP
简单的php新闻发布系统教程
2014/05/09 PHP
php使用google地图应用实例
2014/12/31 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
javascript mouseover、mouseout停止事件冒泡的解决方案
2009/04/07 Javascript
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
2011/11/10 Javascript
jquery聚焦文本框与扩展文本框聚焦方法
2012/10/12 Javascript
js弹出的对话窗口永远保持居中显示
2012/12/15 Javascript
jquery实现按Enter键触发事件示例
2013/09/10 Javascript
javascript实现图片跟随鼠标移动效果的方法
2015/05/13 Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
2016/01/19 Javascript
jQuery实现下拉框功能实例代码
2016/05/06 Javascript
Jquery针对tr td的一些实用操作方法(必看篇)
2016/10/05 Javascript
Bootstrap Modal对话框如何在关闭时触发事件
2016/12/02 Javascript
微信小程序-可移动菜单的实现过程详解
2019/06/24 Javascript
在SSM框架下用laypage和ajax实现分页和数据交互的方法
2019/09/27 Javascript
VueCli4项目配置反向代理proxy的方法步骤
2020/05/17 Javascript
Python2中的raw_input() 与 input()
2015/06/12 Python
浅谈pycharm的xmx和xms设置方法
2018/12/03 Python
对python中的six.moves模块的下载函数urlretrieve详解
2018/12/19 Python
分享PyCharm的几个使用技巧
2019/11/10 Python
Python正则表达式如何匹配中文
2020/05/27 Python
Python 排序最长英文单词链(列表中前一个单词末字母是下一个单词的首字母)
2020/12/14 Python
html5文字阴影效果text-shadow使用示例
2013/07/25 HTML / CSS
Smallable英国家庭概念店:设计师童装及家居装饰
2017/07/05 全球购物
英国第一的滑雪服装和装备零售商:Snow+Rock
2020/02/01 全球购物
生日寿宴答谢词
2014/01/19 职场文书
师德师风个人反思
2014/04/28 职场文书
感恩小明星事迹材料
2014/05/23 职场文书
给医院的感谢信
2015/01/21 职场文书
业务员岗位职责
2015/02/03 职场文书
审美与表现自我评价
2015/03/09 职场文书
2015年迎新晚会策划书
2015/07/16 职场文书
JVM钩子函数的使用场景详解
2021/08/23 Java/Android
SpringBoot中使用Redis作为全局锁示例过程
2022/03/24 Java/Android