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 相关文章推荐
DOM 基本方法
Jul 18 Javascript
Node.js中HTTP模块与事件模块详解
Nov 14 Javascript
window.open()实现post传递参数
Mar 12 Javascript
jQuery使用addClass()方法给元素添加多个class样式
Mar 26 Javascript
Javascript递归打印Document层次关系实例分析
May 15 Javascript
jquery表单对象属性过滤选择器实例分析
May 18 Javascript
jquery背景跟随鼠标滑动导航
Nov 20 Javascript
vue.js表格组件开发的实例详解
Oct 12 Javascript
微信小程序 wx.request(OBJECT)发起请求详解
Oct 13 Javascript
vue 弹框产生的滚动穿透问题的解决
Sep 21 Javascript
jQuery选择器之层次选择器用法实例分析
Feb 19 jQuery
基于vue实现一个禅道主页拖拽效果
May 27 Javascript
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
利用static实现表格的颜色隔行显示
2006/10/09 PHP
PHP读写文件的方法(生成HTML)
2006/11/27 PHP
php 上传文件类型判断函数(避免上传漏洞 )
2010/06/08 PHP
PHP通用检测函数集合
2011/02/08 PHP
PHP实现通过中文字符比率来判断垃圾评论的方法
2014/10/20 PHP
PHP和MYSQL实现分页导航思路详解
2017/04/11 PHP
js文件中调用js的实现方法小结
2009/10/23 Javascript
子窗口、父窗口和Silverlight之间的相互调用
2010/08/16 Javascript
js简单实现删除记录时的提示效果
2013/12/05 Javascript
Eclipse下jQuery文件报错出现错误提示红叉
2014/01/13 Javascript
jQuery操作select下拉框的text值和value值的方法
2014/05/31 Javascript
JavaScript中判断整字类型最简洁的实现方法
2014/11/08 Javascript
编写简单的jQuery提示插件
2014/12/21 Javascript
JavaScript实现网站访问次数统计代码
2015/08/12 Javascript
javascript实现二叉树遍历的代码
2017/06/08 Javascript
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
2017/11/07 Javascript
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
2018/08/28 jQuery
微信小程序实现列表页的点赞和取消点赞功能
2018/11/02 Javascript
vue实现点击按钮下载文件功能
2019/10/11 Javascript
JavaScript JSON使用原理及注意事项
2020/07/30 Javascript
Python实现的微信公众号群发图片与文本消息功能实例详解
2017/06/30 Python
Java分治归并排序算法实例详解
2017/12/12 Python
解决Python安装后pip不能用的问题
2018/06/12 Python
对python当中不在本路径的py文件的引用详解
2018/12/15 Python
解决python ogr shp字段写入中文乱码的问题
2018/12/31 Python
python多进程并发demo实例解析
2019/12/13 Python
用Python 执行cmd命令
2020/12/18 Python
美国用餐电影院:Alamo Drafthouse Cinema
2020/01/23 全球购物
会计专业毕业生自荐信范文
2013/12/20 职场文书
动画设计系毕业生求职信
2014/07/15 职场文书
小学生十佳少年事迹材料
2014/08/20 职场文书
客户经理岗位职责
2015/01/31 职场文书
2015年护士工作总结范文
2015/03/31 职场文书
2015年学校关工委工作总结
2015/04/03 职场文书
婚礼迎宾词大全
2015/08/10 职场文书
Navicat for MySQL的使用教程详解
2021/05/27 MySQL