el-table 添加合计,合计某一列

效果图:

 1.   使用elementui 官网上的方法

如果是只要是数值,就要合并,就只设置show-summary 即可。

  

 2.  html:

<!--cell-style 改变某一列行的背景色 --><!-- tree-props 配置树形子表row-click: 单击事件highlight-current-row:高亮选中某行default-expand-all:默认是否展开字列表current-change:管理选中时触发的事件selection-change:多选框row-key="id":    id:一定要跟后台返回来的id一致,不一致,会出错show-summary: 显示合计summary-method: 合计指定的某一列-->
<el-tableref="table":data="tableData":height="getHeight":show-summary="showSum":summary-method="getSummaries"border@selection-change="handleSelectionChange":key="itemKey":cell-style="tableCellStyle"@row-click="clickRow"row-key="ID":default-expand-all="defaultall":highlight-current-row="highlightCurrent"@current-change="handleCurrentChangeRow":tree-props="{ children: 'Children' }"><el-table-columntype="index"width="55"label="序号"></el-table-column><el-table-columntype="selection"v-if="isSelection"width="55"></el-table-column><!-- item.direction 方向,判断居中还是靠右 --><template v-for="(item, index) in tableHeader"><!-- 1. 这是第一层 --><!-- sortable: 排序 --><el-table-columnv-if="!item.child":key="index":prop="item.prop":label="item.label"header-align="center":align="item.direction":min-width="item.width":sortable="item.sortable"></el-table-column><!-- 二级表头 --><el-table-columnv-else:key="index+1":prop="item.prop":label="item.label":type="item.type":align="item.align || 'center'"></el-table-column></template></el-table>

3. js :

// 合计 指定某一列添加合计getSummaries(param) {console.log(param, "heji11111");const { columns, data } = param;const sums = [];columns.forEach((column, index) => {if (index === 0) {sums[index] = "合计";return;} else if (column.property == "Amount") {//如果是经费(正常的加减法)const values = data.map((item) => Number(item[column.property]));console.log(values);if (!values.every((value) => isNaN(value))) {sums[index] = values.reduce((prev, curr) => {const value = Number(curr);var sum = 0;if (!isNaN(value)) {sum = Number(Number(prev) + Number(curr)).toFixed(2);return sum;} else {return prev;}}, 0);sums[index] += " ";}}});return sums;},
参考: el-table合计行合并自定义列数,单独合计某一列_刘远航,的博客-CSDN博客

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/13273.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SpringBoot2+Vue2实战(十二)springboot一对一,一对多查询

新建数据库表 Course Data TableName("t_course") public class Course implements Serializable {private static final long serialVersionUID 1L;/*** id*/TableId(value "id", type IdType.AUTO)private Integer id;/*** 课程名称*/private String…

开源数字名片生成器EnBizCard

什么是 EnBizCard &#xff1f; EnBizCard 可帮助您创建美观、响应灵敏的基于 HTML 的数字名片&#xff0c;并将其托管在您的网站上。 无需注册100% 免费和开源没有用户跟踪和数据收集离线工作 如果不想自己搭建&#xff0c;可以去试用官方的在线体验站点&#xff0c;地址&…

排序算法解析

常见的排序算法包括以下几种&#xff1a; 冒泡排序&#xff08;Bubble Sort&#xff09;&#xff1a;重复比较相邻的两个元素&#xff0c;将较大的元素逐渐向后移动&#xff0c;直到整个序列有序。 选择排序&#xff08;Selection Sort&#xff09;&#xff1a;从未排序部分选…

java面试题(24)

1、重写equals&#xff08;&#xff09;方法的原则 1、对称性&#xff1a; 如果x.equals&#xff08;y&#xff09;返回是“true”&#xff0c;那么y.equals&#xff08;x&#xff09;也应该返回是 “true”。 2、自反性&#xff1a; x.equals&#xff08;x&#xff09;必须…

mysql 数据库备份和还原

数据库备份 第一步&#xff1a;先在环境变量Path里面加上mysql bin目录的路径 第二部&#xff1a;执行对应的命令 备份数据库中的表&#xff1a; 命令&#xff1a; mysqldump -u root -p fenku_lianxi customer > d:\temp.sql root是 账号 username fenku_lianxi是数据…

transforms机制与数据标准化

文章和代码已经归档至【Github仓库&#xff1a;https://github.com/timerring/dive-into-AI 】或者公众号【AIShareLab】回复 pytorch教程 也可获取。 文章目录 图像预处理 transformstransforms运行机制数据标准化transforms.normalizetransforms.Normalize 图像预处理 transf…

javassist 02 implement interface

创建 interface package com.wsd;public interface AccountDao {int delete(); }利用 javassist 生产一个 类A, Class A implements AccountDao package com.wsd;import javassist.ClassPool; import javassist.CtClass; import javassist.CtMethod; import javassist.Modifi…

4. PS切图

4.1常见的图片格式 jpg图像格式: JPEG ( .JPG )对色彩的信息保留较好,高清,颜色较多,我们产品类的图片经常用jpg格式的gif图像格式 : GIF格式最多只能储存256色,所以通常用来显示简单图形及字体,但是可以保存透明背景和动画效果,实际经常用于一些图片小动画效果png图像格式&am…

RabbitMQ五种工作模式的简单应用

发布订阅模式(三种方式) 发布订阅模式上一篇我们已经介绍了,这里就不做介绍了,想要看的可以点此链接 在SpringBoot中对RabbitMQ三种使用方式_流殇꧂的博客-CSDN博客 Routing(路由模式)(基于注解的方式) 1.创建交换机和消息队列,类型要为direct(不设置也是默认的配置) //路由模式…

企业低成本万能架构

企业软件应用架构层出不穷&#xff08;这里的应用架构是指偏后端服务的软件架构&#xff09;每个企业由各自业务形态&#xff0c;技术栈&#xff0c;技术路线&#xff0c;技术实力不同&#xff0c;各自架构方案&#xff0c;技术选型各有各的不同&#xff0c;千姿百态&#xff0…

English Learning - L3 作业打卡 Lesson8 Day58 2023.7.3 周一

English Learning - L3 作业打卡 Lesson8 Day58 2023.7.3 周一 引言&#x1f349;句1: And this is when I learned that our borders and our obstacles can only do two things: one, stop us in our tracks or two, force us to get creative.成分划分弱读连读爆破语调 &…

颜色渐变的数据密集适用的堆叠图

一般情况会用柱状图去堆叠&#xff0c;但是如果数据量太大了&#xff0c;就可考虑这种方式堆叠。可以呈现时间和数量上不同层次数据的变化。 效果图&#xff1a; 比较详细的注释一下源码&#xff1a; import matplotlib as mpl import matplotlib.pyplot as plt import numpy …