vue element-ui中table合计指定列求和实例


Posted in Javascript onNovember 02, 2020

注意点:

1. <el-table> 中 加:summary-method="getSummaries"

2. <el-table-column> 中要加 prop

// 房间号的合计去掉
 getSummaries (param) {
  const { columns, data } = param
  const sums = []
  columns.forEach((column, index) => {
  if (index === 0) {
   sums[index] = '总计'
  } else if (index === 5 || index === 6) {
   const values = data.map(item => Number(item[column.property]))
   if (!values.every(value => isNaN(value))) {
   sums[index] = values.reduce((prev, curr) => {
    const value = Number(curr)
    if (!isNaN(value)) {
    return prev + curr
    } else {
    return prev
    }
   }, 0)
   } else {
   sums[index] = 'N/A'
   }
  } else {
   sums[index] = '--'
  }
  })
  return sums
 }

效果图

vue element-ui中table合计指定列求和实例

补充知识:vue+elementUI的表格最后一行合计自定义显示

1.在看了elementUI的文档后重要的俩个属性是 show-summary :summary-method="getSummaries" getSummaries这个是自定义方法函数的方法。

HTML的代码:

show-summary :summary-method="getSummaries的属性要加上,还有一个很重要的一点就是要 必须要在el-table-column中必须是prop来传值"

<el-table :key='tableKey' :data="listData" show-summary :summary-method="getSummaries" v-loading="listLoading" border fit highlight-current-row
    style="width:100%;margin-top:8px" :header-cell-style="{background:'oldlace'}">>
    
     <el-table-column prop="equipmentType" align="center" label="设备类型" min-width="50">
     </el-table-column>
     <el-table-column prop="equipmentName" align="center" label="设备名称" min-width="50">
     </el-table-column>
     <el-table-column prop="equipmentCode" align="center" label="设备编号" min-width="50">
     </el-table-column>
     <el-table-column prop="openRate" align="center" label="开机率" min-width="50">
     </el-table-column>
     <el-table-column prop="planWorkTime" align="center" label="计划工作时间" min-width="50">
     </el-table-column>
     <el-table-column prop="closeTime" align="center" label="关机时间(h)" min-width="50">
     </el-table-column>
     <el-table-column prop="machiningTime" align="center" label="加工时间(h)" min-width="50">
     </el-table-column>
     <el-table-column prop="stopTime" align="center" label="停工时间(h)" min-width="50">
     </el-table-column>
     <el-table-column prop="debugTime" align="center" label="调试时间(h)" min-width="50">
     </el-table-column>
 
    <el-table-column align="center" label="查看" min-width="210">
     <template slot-scope="scope">
     <el-button title="时序图" type="primary" size="mini" @click="profile(scope.row)" v-show="SXTbatshow">时序图</el-button>
     <el-button title="状态时长统计图" type="danger" size="mini" @click="cartogram(scope.row)">状态时长统计图</el-button>
     <el-button title="状态占比图" type="success" size="mini" @click="diagram(scope.row)">状态占比图</el-button>
     </template>
    </el-table-column>
    </el-table>

在script要写的代码:

// 表格总计的时间
 getSummaries(param) {
  const { columns, data } = param;
  /* console.log(1234)
  console.log(param) */ 
  const sums = [];
  columns.forEach((column, index) => {
   if (index === 0) {
   sums[index] = '总计';
   return;
   }
   //this.closeList等等是后台返回的总的数据,然后取值到这里
   switch(column.property) {
   case "closeTime":
   sums[index] = this.closeList + ' h' 
   break;
   case "machiningTime":
   sums[index] = this.machiningTimeList + ' h'
   break;
   case "stopTime":
   sums[index] = this.stopTimeList + ' h' 
   break;
   case "debugTime":
   sums[index] = this.debugTimeList + ' h' 
   break;
   default:
   break;
   }
  });

  return sums;
  },

效果图:

vue element-ui中table合计指定列求和实例

vue element-ui中table合计指定列求和实例

以上这篇vue element-ui中table合计指定列求和实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery Moblie入门—hello world的示例代码学习
Jan 08 Javascript
鼠标滚轮控制网页横向移动实现思路
Mar 22 Javascript
jquery对象和DOM对象的区别介绍
Aug 09 Javascript
客户端js性能优化小技巧整理
Nov 05 Javascript
jquery 字符串切割函数substring的用法说明
Feb 11 Javascript
js 左右悬浮对联广告特效代码
Dec 12 Javascript
JavaScript 匿名函数和闭包介绍
Apr 13 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
Aug 27 Javascript
jQuery实现获取元素索引值index的方法
Sep 18 Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
Jun 29 Javascript
vscode中eslint插件的配置(prettier配置无效)
Sep 10 Javascript
Vue Router的手写实现方法实现
Mar 02 Javascript
vue 动态添加class,三个以上的条件做判断方式
Nov 02 #Javascript
vue 公共列表选择组件,引用Vant-UI的样式方式
Nov 02 #Javascript
在vant 中使用cell组件 定义图标该图片和位置操作
Nov 02 #Javascript
Vant picker 多级联动操作
Nov 02 #Javascript
vue实现列表拖拽排序的功能
Nov 02 #Javascript
用vue写一个日历
Nov 02 #Javascript
在vue中使用vant TreeSelect分类选择组件操作
Nov 02 #Javascript
You might like
10 个经典PHP函数
2013/10/17 PHP
PHP静态文件生成类实例
2014/11/29 PHP
php使用memcoder将视频转成mp4格式的方法
2015/03/12 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
Windows下wamp php单元测试工具PHPUnit安装及生成日志文件配置方法
2018/05/28 PHP
javascript 添加和移除函数的通用方法
2009/10/20 Javascript
jquery 学习之二 属性 文本与值(text,val)
2010/11/25 Javascript
jquery中防刷IP流量软件影响统计的一点对策
2011/07/10 Javascript
JQuery循环滚动图片代码
2011/12/08 Javascript
jQuery DOM操作实例
2014/03/05 Javascript
浅谈javascript中for in 和 for each in的区别
2015/04/23 Javascript
javascript遇到html5的一些表单属性
2015/07/05 Javascript
第六章之辅组类与响应式工具
2016/04/25 Javascript
Javascript字符串拼接小技巧(推荐)
2016/06/02 Javascript
利用JQuery阻止事件冒泡
2016/12/01 Javascript
Vue仿支付宝支付功能
2018/05/25 Javascript
Nodejs封装类似express框架的路由实例详解
2020/01/05 NodeJs
Python的Django框架中if标签的相关使用
2015/07/15 Python
通过数据库对Django进行删除字段和删除模型的操作
2015/07/21 Python
python实现域名系统(DNS)正向查询的方法
2016/04/19 Python
Django实现登录随机验证码的示例代码
2018/06/20 Python
Python对象中__del__方法起作用的条件详解
2018/11/01 Python
在matplotlib的图中设置中文标签的方法
2018/12/13 Python
pycharm编写spark程序,导入pyspark包的3中实现方法
2019/08/02 Python
使用python实现离散时间傅里叶变换的方法
2019/09/02 Python
linux 下selenium chrome使用详解
2020/04/02 Python
CSS3地图动态实例代码(圆圈向外扩散)
2018/06/15 HTML / CSS
Html5之webcoekt播放JPEG图片流
2020/09/22 HTML / CSS
印尼在线精品店:Berrybenka.com
2016/10/22 全球购物
芝加哥牛排公司:Chicago Steak Company
2018/10/31 全球购物
大学生标准推荐信范文
2013/11/25 职场文书
新郎新娘婚礼答谢词
2014/01/11 职场文书
少先队入队活动方案
2014/02/08 职场文书
教师工作失职检讨书
2014/09/18 职场文书
党的群众路线教育实践活动剖析材料
2014/09/30 职场文书
党员身份证明材料
2015/06/19 职场文书