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表格表尾合计行,指定合计某几列,自定义合计方法
🤵 作者:coderYYY 🧑 个人简介:前端程序媛,目前主攻web前端,后端辅助,其他技术知识也会偶尔分享🍀欢迎和我一起交流!🚀(评论和私信一般会回&#…...
一款工具替你解决Mac电脑菜单栏图标杂乱问题
你的菜单栏是不是各种图标挤在一起?图标过多显得杂乱?刘海屏遮挡菜单栏图标?教你如何让你的菜单栏变的简洁美观 iBar,一款Mac上优秀的菜单栏管理工具,可以自主选择菜单栏图标隐藏,单独窗口聚合展示&#x…...
MySQL 基础入门教程
参考视频地址:一小时MySQL教程 bilibili SQL 基础 数据库分为关系型数据库和非关系型数据库 常见的关系型数据库: MySQL、PostgreSQL、Oracle、SQL Server等。 非关系型数据库: MongoDB(文档型数据库)、Redis&am…...
俏生元将传统膳食智慧融入现代生活,自然成分绽放健康光彩
近年来,当代女性健康食品市场正经历快速发展和显著变化。随着女性健康意识的提升,市场对专门针对女性健康的产品需求快速上升。女性消费者对健康的关注不再局限于表面,而是越来越注重内在健康和生活质量的提升。此外,中式养生文化…...
腾讯云推流播放相关
直播的在线人数是否有上限? 腾讯云直播默认不限制观看直播的在线人数,只要网络等条件允许都可以观看直播。如果用户配置了带宽限制,当观看人数过多、超出了限制带宽时新的用户无法观看,此情况下在线人数是有限制的。 如何使用播…...
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序列化框架:Jackson 和 Fastjson,它们的用途是处理JSON字段的名称映射…...
k8s1.27部署ingress 1.11.2
k8s1.27部署ingress 1.11.2 要求: 1、使用主机网络。 2、多节点部署,以来标签:isingressistrue ingress1.11.2支持版本 官方参考链接: https://github.com/kubernetes/ingress-nginx/ 官网yaml https://raw.githubuserconten…...
【运维】自动化运维详解
目录 引言一、什么是自动化运维?二、自动化运维的优势三、自动化运维的关键组成部分详解3.1 监控与告警3.2 部署与配置管理3.3 备份与恢复3.4 安全管理 总结 引言 在当今信息技术飞速发展的时代,企业对IT基础设施的依赖日益增强,传统的人工运…...
线控底盘技术介绍
随着汽车工业的不断发展,传统的机械控制系统逐渐向电子控制系统转变。线控底盘(Drive-by-Wire Chassis)作为这一转变的重要组成部分,正在改变汽车的操控方式和驾驶体验。本文将全面介绍线控底盘的概念、组成、工作原理、优缺点、应…...
DOM对象
DOM概述 官方定义: DOM是W3C制定的一个规范(标准),(Document Object Model,文档对象模型),是提供了访问和操作网页中各元素的方法,让程序可以动态的修改或改变网页元素的内容、样式、结构。 DOM是W3C制定的一个规范…...
[SQL] 数据库图形化安装和使用
一 安装 1.1 图形化安装 下载DataGrip安装包 点击此处一直下一步即可。点击免费使用。 进去界面后,选择新建一个项目 点击加号,创建一个Mysql连接。输入Mysql的连接信息。点击DownLoad下载Mysql的驱动 接下来点击创建的mysq项目中后面的三个点,选择…...
springboot 前后端处理日志
为了实现一个高效且合理的日志记录方案,我们需要在系统架构层面进行细致规划。在某些情况下,一个前端页面可能会调用多个辅助接口来完成整个业务流程,而并非所有这些接口的交互都需要被记录到日志中。为了避免不必要的日志开销,并…...
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的合法参数() A、int a[4][4]; B、int **a; C、int **a[4] D、int (*a)[4]; 答案:B 解析:如果是fun的合法参数,那么其类型应该与定义函数fun中的参数类型…...
Web Worker和WebSocket
Web Worker和WebSocket协议都是Web开发中用于处理多线程和实时通信的技术,但它们的应用场景和工作原理有所不同。 Web Worker Web Worker是HTML5引入的一项技术,它允许JavaScript代码在后台线程中运行,从而实现真正的多线程处理。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 插件提交留言时发生错误可能有以下几种原因,并提供相应的解决方案: 1. 表单字段验证失败 原因: 用户输入的数据未通过表单字段的验证规则。 解决方案: – 检查表单字段的验证规则是否设置正确。 –…...
uibot发送邮件:自动化邮件发送教程详解!
uibot发送邮件的操作指南?uibot发送邮件的两种方式? 在现代办公环境中,自动化流程的引入极大地提高了工作效率。uibot发送邮件功能成为了许多企业和个人实现邮件自动化发送的首选工具。AokSend将详细介绍如何使用uibot发送邮件。 uibot发送…...
【PostgreSQL】PG数据库表“膨胀”粗浅学习
文章目录 1 为什么需要关注表膨胀?2 如何确定是否发生了表膨胀?2.1 通过查询表的死亡元组占比情况来判断膨胀率2.1.1 指定数据库和表名2.1.2 查询数据库里面所有表的膨胀情况 3 膨胀的原理3.1 什么是膨胀?膨胀率?3.2 哪些数据库元…...
华为云AI开发平台ModelArts
华为云ModelArts:重塑AI开发流程的“智能引擎”与“创新加速器”! 在人工智能浪潮席卷全球的2025年,企业拥抱AI的意愿空前高涨,但技术门槛高、流程复杂、资源投入巨大的现实,却让许多创新构想止步于实验室。数据科学家…...
shell脚本--常见案例
1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件: 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...
【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表
1、行为树节点分类 在 Nav2(Navigation2)的行为树框架中,行为树节点插件按照功能分为 Action(动作节点)、Condition(条件节点)、Control(控制节点) 和 Decorator(装饰节点) 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务,直接与硬件、传感器或外部系统…...
【论文笔记】若干矿井粉尘检测算法概述
总的来说,传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度,通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...
视频字幕质量评估的大规模细粒度基准
大家读完觉得有帮助记得关注和点赞!!! 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用,因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型(VLMs)在字幕生成方面…...
Element Plus 表单(el-form)中关于正整数输入的校验规则
目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入(联动)2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...
html-<abbr> 缩写或首字母缩略词
定义与作用 <abbr> 标签用于表示缩写或首字母缩略词,它可以帮助用户更好地理解缩写的含义,尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时,会显示一个提示框。 示例&#x…...
GruntJS-前端自动化任务运行器从入门到实战
Grunt 完全指南:从入门到实战 一、Grunt 是什么? Grunt是一个基于 Node.js 的前端自动化任务运行器,主要用于自动化执行项目开发中重复性高的任务,例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...
代码规范和架构【立芯理论一】(2025.06.08)
1、代码规范的目标 代码简洁精炼、美观,可持续性好高效率高复用,可移植性好高内聚,低耦合没有冗余规范性,代码有规可循,可以看出自己当时的思考过程特殊排版,特殊语法,特殊指令,必须…...
关于uniapp展示PDF的解决方案
在 UniApp 的 H5 环境中使用 pdf-vue3 组件可以实现完整的 PDF 预览功能。以下是详细实现步骤和注意事项: 一、安装依赖 安装 pdf-vue3 和 PDF.js 核心库: npm install pdf-vue3 pdfjs-dist二、基本使用示例 <template><view class"con…...
