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 查找新建元素代码
Jul 06 Javascript
初窥JQuery(二) 事件机制(1)
Nov 25 Javascript
情人节之礼 js项链效果
Feb 13 Javascript
jquery validate和jquery form 插件组合实现验证表单后AJAX提交
Aug 26 Javascript
浅析JavaScript作用域链、执行上下文与闭包
Feb 01 Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
Aug 23 Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
Mar 25 Javascript
使用Require.js封装原生js轮播图的实现代码
Jun 15 Javascript
react-redux中connect的装饰器用法@connect详解
Jan 13 Javascript
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 jQuery
Vue 开发必须知道的36个技巧(小结)
Oct 09 Javascript
Chrome插件开发系列一:弹窗终结者开发实战
Oct 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
《星际争霸II》全新指挥官斯台特曼现已上线
2020/03/08 星际争霸
php setcookie(name, value, expires, path, domain, secure) 参数详解
2013/06/28 PHP
ThinkPHP2.0读取MSSQL提示Incorrect syntax near the keyword 'AS'的解决方法
2014/06/25 PHP
zend框架实现支持sql server的操作方法
2016/12/08 PHP
php扩展开发入门demo示例
2019/09/23 PHP
slice函数的用法 之不错的应用
2006/12/29 Javascript
动态调用css文件——jquery的应用
2007/02/20 Javascript
js 操作符实例代码
2009/10/24 Javascript
开发中可能会用到的jQuery小技巧
2014/03/07 Javascript
自己实现ajax封装示例分享
2014/04/01 Javascript
Angular.js中用ng-repeat-start实现自定义显示
2016/10/18 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
2017/05/30 Javascript
JavaScript字符串_动力节点Java学院整理
2017/06/27 Javascript
React Native实现地址挑选器功能
2017/10/24 Javascript
详解JS实现简单的时分秒倒计时代码
2019/04/25 Javascript
mpvue实现小程序签到金币掉落动画(api实现)
2019/10/17 Javascript
vue - props 声明数组和对象操作
2020/07/30 Javascript
Vue elementui字体图标显示问题解决方案
2020/08/18 Javascript
python使用win32com在百度空间插入html元素示例
2014/02/20 Python
Python用zip函数同时遍历多个迭代器示例详解
2016/11/14 Python
微信跳一跳python代码实现
2018/01/05 Python
python解决字符串倒序输出的问题
2018/06/25 Python
python中map的基本用法示例
2018/09/10 Python
python爬取内容存入Excel实例
2019/02/20 Python
python-tkinter之按钮的使用,开关方法
2019/06/11 Python
网易有道2017内推编程题 洗牌(python)
2019/06/19 Python
Python字典底层实现原理详解
2019/12/18 Python
Python+PyQt5实现灭霸响指功能
2020/05/25 Python
大学生简历的个人自我评价
2013/12/04 职场文书
英语自我评价范文
2014/01/24 职场文书
《在山的那边》教学反思
2014/02/23 职场文书
党的群众路线教育实践活动学习心得体会
2014/03/03 职场文书
化工专业求职信
2014/07/01 职场文书
五年级学生评语大全
2014/12/26 职场文书
2015年宣传部工作总结范文
2015/03/31 职场文书
基于nginx实现上游服务器动态自动上下线无需reload的实现方法
2021/03/31 Servers