当前位置: 首页 > news >正文

el-table表格表尾合计行,指定合计某几列,自定义合计方法

🤵 作者coderYYY
🧑 个人简介:前端程序媛,目前主攻web前端,后端辅助,其他技术知识也会偶尔分享🍀欢迎和我一起交流!🚀(评论和私信一般会回!!)
👉 个人专栏推荐:《前端项目教程以及代码》

✨一、前言

  • el-table如果加上show-summary属性,表尾第一列会显示“合计”二字,其余列会将本列所有数值进行求合操作,并显示出来。
<template><el-table:data="tableData"bordershow-summarystyle="width: 100%"><el-table-columnprop="id"label="ID"width="180"></el-table-column><el-table-columnprop="name"label="姓名"></el-table-column><el-table-columnprop="amount1"sortablelabel="数值 1"></el-table-column><el-table-columnprop="amount2"sortablelabel="数值 2"></el-table-column><el-table-columnprop="amount3"sortablelabel="数值 3"></el-table-column></el-table>
  • 有时候只想对其中几列进行合计,就可以使用summary-method自定义我们的合计方法,指定要合计哪些列。

🚩二、具体实现

方法很简单,只要加个条件就可以

<el-table:data="tableData"borderheight="200":summary-method="getSummaries"show-summarystyle="width: 100%; margin-top: 20px"><el-table-columnprop="id"label="ID"width="180"></el-table-column><el-table-columnprop="name"label="姓名"></el-table-column><el-table-columnprop="amount1"label="数值 1(元)"></el-table-column><el-table-columnprop="amount2"label="数值 2(元)"></el-table-column><el-table-columnprop="amount3"label="数值 3(元)"></el-table-column></el-table>
</template><script>export default {data() {return {tableData: [{id: '12987122',name: '王小虎',amount1: '234',amount2: '3.2',amount3: 10}, {id: '12987123',name: '王小虎',amount1: '165',amount2: '4.43',amount3: 12}, {id: '12987124',name: '王小虎',amount1: '324',amount2: '1.9',amount3: 9}, {id: '12987125',name: '王小虎',amount1: '621',amount2: '2.2',amount3: 17}, {id: '12987126',name: '王小虎',amount1: '539',amount2: '4.1',amount3: 15}]};},methods: {//指定列求和getSummaries(param) {// console.log(param);const { columns, data } = param;const sums = [];columns.forEach((column, index) => {if (index === 0) {sums[index] = "合计";return;}const values = data.map((item) => Number(item[column.property]));// 只合计amount1和amount3,想合并哪些列就在这里指定if (column.property === "amount1"||column.property === "amount2") {sums[index] = values.reduce((prev, curr) => {const value = Number(curr);if (!isNaN(value)) {return prev + curr;} else {return prev;}}, 0);}});return sums;},};
</script>

相关文章:

el-table表格表尾合计行,指定合计某几列,自定义合计方法

&#x1f935; 作者&#xff1a;coderYYY &#x1f9d1; 个人简介&#xff1a;前端程序媛&#xff0c;目前主攻web前端&#xff0c;后端辅助&#xff0c;其他技术知识也会偶尔分享&#x1f340;欢迎和我一起交流&#xff01;&#x1f680;&#xff08;评论和私信一般会回&#…...

一款工具替你解决Mac电脑菜单栏图标杂乱问题

你的菜单栏是不是各种图标挤在一起&#xff1f;图标过多显得杂乱&#xff1f;刘海屏遮挡菜单栏图标&#xff1f;教你如何让你的菜单栏变的简洁美观 iBar&#xff0c;一款Mac上优秀的菜单栏管理工具&#xff0c;可以自主选择菜单栏图标隐藏&#xff0c;单独窗口聚合展示&#x…...

MySQL 基础入门教程

参考视频地址&#xff1a;一小时MySQL教程 bilibili SQL 基础 数据库分为关系型数据库和非关系型数据库 常见的关系型数据库&#xff1a; MySQL、PostgreSQL、Oracle、SQL Server等。 非关系型数据库&#xff1a; MongoDB&#xff08;文档型数据库&#xff09;、Redis&am…...

俏生元将传统膳食智慧融入现代生活,自然成分绽放健康光彩

近年来&#xff0c;当代女性健康食品市场正经历快速发展和显著变化。随着女性健康意识的提升&#xff0c;市场对专门针对女性健康的产品需求快速上升。女性消费者对健康的关注不再局限于表面&#xff0c;而是越来越注重内在健康和生活质量的提升。此外&#xff0c;中式养生文化…...

腾讯云推流播放相关

直播的在线人数是否有上限&#xff1f; 腾讯云直播默认不限制观看直播的在线人数&#xff0c;只要网络等条件允许都可以观看直播。如果用户配置了带宽限制&#xff0c;当观看人数过多、超出了限制带宽时新的用户无法观看&#xff0c;此情况下在线人数是有限制的。 如何使用播…...

UE5运行时动态加载场景角色动画任意搭配-相机及运镜(二)

通过《MMD模型及动作一键完美导入UE5》系列文章,我们可以把外部场景、角色、动画资产导入UE5,接下来我们将实现运行时动态加载这些资产,并任意组合搭配。 1、运行时播放相机动画 1、创建1个BlueprintActor,通过这个蓝图动态创建1个LevelSequence,并Play 2、将这个Bluep…...

@JsonAlias和@JSONField序列化和反序列化

com.fasterxml.jackson.annotation.JsonAlias("expressCode") com.alibaba.fastjson.annotation.JSONField(name "expressCode") 这两个注解分别属于不同的JSON序列化框架&#xff1a;Jackson 和 Fastjson&#xff0c;它们的用途是处理JSON字段的名称映射…...

k8s1.27部署ingress 1.11.2

k8s1.27部署ingress 1.11.2 要求&#xff1a; 1、使用主机网络。 2、多节点部署&#xff0c;以来标签&#xff1a;isingressistrue ingress1.11.2支持版本 官方参考链接&#xff1a; https://github.com/kubernetes/ingress-nginx/ 官网yaml https://raw.githubuserconten…...

【运维】自动化运维详解

目录 引言一、什么是自动化运维&#xff1f;二、自动化运维的优势三、自动化运维的关键组成部分详解3.1 监控与告警3.2 部署与配置管理3.3 备份与恢复3.4 安全管理 总结 引言 在当今信息技术飞速发展的时代&#xff0c;企业对IT基础设施的依赖日益增强&#xff0c;传统的人工运…...

线控底盘技术介绍

随着汽车工业的不断发展&#xff0c;传统的机械控制系统逐渐向电子控制系统转变。线控底盘&#xff08;Drive-by-Wire Chassis&#xff09;作为这一转变的重要组成部分&#xff0c;正在改变汽车的操控方式和驾驶体验。本文将全面介绍线控底盘的概念、组成、工作原理、优缺点、应…...

DOM对象

DOM概述 官方定义&#xff1a; DOM是W3C制定的一个规范(标准)&#xff0c;(Document Object Model&#xff0c;文档对象模型)&#xff0c;是提供了访问和操作网页中各元素的方法&#xff0c;让程序可以动态的修改或改变网页元素的内容、样式、结构。 DOM是W3C制定的一个规范…...

[SQL] 数据库图形化安装和使用

一 安装 1.1 图形化安装 下载DataGrip安装包 点击此处一直下一步即可。点击免费使用。 进去界面后,选择新建一个项目 点击加号&#xff0c;创建一个Mysql连接。输入Mysql的连接信息。点击DownLoad下载Mysql的驱动 接下来点击创建的mysq项目中后面的三个点&#xff0c;选择…...

springboot 前后端处理日志

为了实现一个高效且合理的日志记录方案&#xff0c;我们需要在系统架构层面进行细致规划。在某些情况下&#xff0c;一个前端页面可能会调用多个辅助接口来完成整个业务流程&#xff0c;而并非所有这些接口的交互都需要被记录到日志中。为了避免不必要的日志开销&#xff0c;并…...

C++11 简单手撕多线程编程

如何使用线程库 std::thread 创建线程 thread1.join(); 阻塞主线程 thread1.detach(); 线程分离 #include<iostream> #include<thread>void helloworld(std::string msg) {for (int i 0; i < 10000; i){std::cout << i << std::endl;}//std::cou…...

刷c语言练习题7(牛客网)

1、函数fun的声明为int fun(int *p[4]),以下哪个变量可以作为fun的合法参数&#xff08;&#xff09; A、int a[4][4]; B、int **a; C、int **a[4] D、int (*a)[4]; 答案&#xff1a;B 解析&#xff1a;如果是fun的合法参数&#xff0c;那么其类型应该与定义函数fun中的参数类型…...

Web Worker和WebSocket

Web Worker和WebSocket协议都是Web开发中用于处理多线程和实时通信的技术&#xff0c;但它们的应用场景和工作原理有所不同。 Web Worker Web Worker是HTML5引入的一项技术&#xff0c;它允许JavaScript代码在后台线程中运行&#xff0c;从而实现真正的多线程处理。Web Worke…...

【LeetCode】动态规划—712. 两个字符串的最小ASCII删除和(附完整Python/C++代码)

动态规划—712. 两个字符串的最小ASCII删除和 前言题目描述基本思路1. 问题定义2. 理解问题和递推关系3. 解决方法3.1 动态规划方法3.2 空间优化的动态规划 4. 进一步优化5. 小总结 代码实现PythonPython3代码实现Python 代码解释 CC代码实现C 代码解释 总结: 前言 在字符串处…...

wordpress Contact Form 7插件提交留言时发生错误可能的原因

WordPress Contact Form 7 插件提交留言时发生错误可能有以下几种原因&#xff0c;并提供相应的解决方案&#xff1a; 1. 表单字段验证失败 原因&#xff1a; 用户输入的数据未通过表单字段的验证规则。 解决方案&#xff1a; – 检查表单字段的验证规则是否设置正确。 –…...

uibot发送邮件:自动化邮件发送教程详解!

uibot发送邮件的操作指南&#xff1f;uibot发送邮件的两种方式&#xff1f; 在现代办公环境中&#xff0c;自动化流程的引入极大地提高了工作效率。uibot发送邮件功能成为了许多企业和个人实现邮件自动化发送的首选工具。AokSend将详细介绍如何使用uibot发送邮件。 uibot发送…...

【PostgreSQL】PG数据库表“膨胀”粗浅学习

文章目录 1 为什么需要关注表膨胀&#xff1f;2 如何确定是否发生了表膨胀&#xff1f;2.1 通过查询表的死亡元组占比情况来判断膨胀率2.1.1 指定数据库和表名2.1.2 查询数据库里面所有表的膨胀情况 3 膨胀的原理3.1 什么是膨胀&#xff1f;膨胀率&#xff1f;3.2 哪些数据库元…...

实战演练,用快马生成GitHub团队协作项目,掌握Issue管理和CI/CD集成

最近在团队协作开发时&#xff0c;发现很多新成员对GitHub的完整工作流不太熟悉。于是我用InsCode(快马)平台快速搭建了一个GitHub实战项目&#xff0c;模拟真实开发场景。这个项目特别适合想系统学习团队协作的小伙伴&#xff0c;下面分享我的实践过程&#xff1a; 项目初始化…...

vue新手福音:快马ai帮你秒建可运行环境,专注学习第一行代码

作为一个刚接触Vue的新手&#xff0c;最让我头疼的就是环境搭建。记得第一次尝试安装Node.js、配置npm、理解脚手架的时候&#xff0c;光是解决各种报错就花了大半天时间。直到发现了InsCode(快马)平台&#xff0c;才明白原来入门可以这么简单。 环境搭建的痛点 传统方式需要先…...

W-TRS-5.5D7红外测温:电炖锅智能测温的革新力量

在追求健康饮食与智能烹饪的时代&#xff0c;电炖锅的温控技术革新至关重要。领麦微W-TRS-5.5D7红外测温传感器的出现&#xff0c;为电炖锅带来非接触检测锅温与食物温度的新突破&#xff0c;结合智能菜谱功能&#xff0c;开启电炖锅智能烹饪新纪元。非接触检测锅温&#xff1a…...

ORA-19909: datafile 1 belongs to an orphan incarnation

某项目备用库执行数据库恢复 ORA-00283: recovery session canceled due to errors ORA-19909: datafile 1 belongs to an orphan incarnation ORA-01110: data file 1: /ccdata/cc/system01.dbf RMAN> list incarnation; List of Database Incarnations DB Key Inc Key DB…...

MAA明日方舟自动化助手:5分钟快速上手完整指南

MAA明日方舟自动化助手&#xff1a;5分钟快速上手完整指南 【免费下载链接】MaaAssistantArknights 一款明日方舟游戏小助手 项目地址: https://gitcode.com/GitHub_Trending/ma/MaaAssistantArknights 还在为《明日方舟》重复刷图、基建管理而烦恼吗&#xff1f;MAA助手…...

自动驾驶之心实习生招募|上海线下,一起做点真东西

点击下方卡片&#xff0c;关注“自动驾驶之心”公众号 戳我-> 领取自动驾驶近30个方向学习路线 自动驾驶之心是业内头部的垂类自媒体平台&#xff0c;过去一年&#xff0c;我们梳理了端到端、VLA、世界模型、强化学习等前沿方向的最新进展&#xff0c;也分享了行业概况、融资…...

嵌入式软件架构设计与实践指南

## 1. 嵌入式软件架构设计概述### 1.1 嵌入式系统发展现状 现代嵌入式系统硬件性能已实现质的飞跃&#xff0c;以Marvell PXA3xx系列处理器为例&#xff0c;其主频可达800MHz&#xff0c;集成USB、WIFI、2D图形加速和32位DDR内存控制器。软件层面&#xff0c;Symbian、Linux、W…...

Twisted Protocols终极指南:快速构建高性能网络协议的简单方法

Twisted Protocols终极指南&#xff1a;快速构建高性能网络协议的简单方法 【免费下载链接】twisted Event-driven networking engine written in Python. 项目地址: https://gitcode.com/gh_mirrors/tw/twisted Twisted是一个用Python编写的事件驱动网络引擎&#xff0…...

互联网大厂Java求职者面试全解析:技术点与场景详解

面试场景介绍 本文通过一场严肃的面试官与搞笑的水货程序员谢飞机之间的面试对话&#xff0c;带你深入了解互联网大厂Java面试的全套流程。涵盖Java核心语言与平台、Spring生态、微服务、安全、消息队列等热点技术&#xff0c;融合多种业务场景&#xff0c;如电商、内容社区、在…...

市场比较好的显示屏模块供货商哪家强

市场比较好的显示屏模块供货商推荐在显示屏模块市场&#xff0c;众多企业各展所长&#xff0c;为不同行业提供着优质的产品。以下为您介绍十家市场上表现出色的显示屏模块供货商&#xff1a;杭州斡能电子有限公司&#xff08;杭州斡能&#xff09; 杭州斡能始创于2008年10月&am…...