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

el-table 数据去重后合并表尾合计行，金额千分位分割并保留两位小数，表尾合计行表格合并

news 来源：原创 2025/8/6 5:02:11

问题背景

最近在做后台管理项目el-table 时候需要进行表尾合计，修改合计后文字的样式，合并单元格。

想实现的效果

在这里插入图片描述

合并表尾单元格前三列为1格；
对某些指定的单元格进行表尾合计；
合计后的文本样式加粗；
涉及到金额需要千分位分割并保留两位小数；

涉及到的属性方法

先看下element-plus 中关于 el-table 中能实现上面效果涉及到的属性和方法。

<el-table ref="tableRef":show-summary="true" :summary-method="getSummaries":span-method="spanMethod" 
></el-table>

show-summary：是否在表尾显示合计行；
summary-method：自定义的合计计算方法；
span-method：合并行或列的计算方法；

el-table表尾合计行官方文档

表尾合计

对某些指定的单元格进行表尾合计；涉及到金额需要千分位分割并保留两位小数；

<script setup lang="ts">
import { ref, unref, reactive, onMounted } from 'vue'
import type { TableColumnCtx } from 'element-plus'// 模拟接口返回的数据
const data = [{ blocCustNm: 'A', blocLmt: 600, totLnchAmt: 10, totBsnBal: 20, aprvAmt: 30, lnchAmt: 40, bsnBal: 50 },{ blocCustNm: 'B', blocLmt: 200, totLnchAmt: 20, totBsnBal: 30, aprvAmt: 40, lnchAmt: 50, bsnBal: 60 },{ blocCustNm: '', blocLmt: 300, totLnchAmt: 30, totBsnBal: 40, aprvAmt: 50, lnchAmt: 60, bsnBal: 70 }, // blocCustNm为空{ blocCustNm: '', blocLmt: 200, totLnchAmt: 30, totBsnBal: 40, aprvAmt: 50, lnchAmt: 60, bsnBal: 70 }, // blocCustNm为空{ blocCustNm: 'A', blocLmt: 400, totLnchAmt: 40, totBsnBal: 50, aprvAmt: 60, lnchAmt: 70, bsnBal: 80 }, // blocCustNm重复{ blocCustNm: 'C', blocLmt: 500, totLnchAmt: 50, totBsnBal: 60, aprvAmt: 70, lnchAmt: 80, bsnBal: 90 }
]
// 千分位分割，保留小数
function toFixedThousandFilter(num:undefined|number|string, fixed = 2) {if (num === undefined || num === 'undefined' || num === null || num === 'null') return ''return (null || 0).toFixed(fixed).replace(/^-?\d+/g, (m) => m.replace(/(?=(?!\b)(\d{3})+$)/g, ','))
}interface Product{blocLmt:string // 集团额度(万元)totLnchAmt:string // 总投放金额(万元)totBsnBal:string // 总业务余额(万元)aprvAmt:string // 审批金额(万元)lnchAmt:string // 投放金额(万元)bsnBal:string // 业务余额(万元)
}
interface SummaryMethodProps<T = Product> {columns: TableColumnCtx<T>[]data: T[]
}
const getSummaries = (param: SummaryMethodProps) => {const { columns, data } = paramconst sums:string[] = []const uniqueBlocCustNm = new Set<string>() // 存储已经处理过的blocCustNm，避免重复计算同个集团客户const sumArr = ['totLnchAmt', 'totBsnBal', 'aprvAmt', 'lnchAmt', 'bsnBal'] // 只对接口返回的这几个字段进行表尾合计columns.forEach((column, index) => {if (index === 0) {sums[index] = '合计'} else if (column.property === 'blocLmt') {let blocLmtSum = 0 // 集团额度总额data.filter((item: anyObj) => {if (!item.blocCustNm || !uniqueBlocCustNm.has(item.blocCustNm)) {blocLmtSum += Number(item[column.property])if (item.blocCustNm) {uniqueBlocCustNm.add(item.blocCustNm)}}})sums[index] = toFixedThousandFilter(blocLmtSum)} else if (sumArr.includes(column.property)) {const values = data.map((item: anyObj) => Number(item[column.property]))sums[index] = getTotalSum(values)}})return sums
}
//封装公共累加方法
const getTotalSum = (values:number[]):string => {if (values.every((value) => Number.isNaN(value))) {return '-'}const total = values.reduce((prev, curr) => {const value = Number(curr)if (!Number.isNaN(value)) {return prev + curr} else {return prev}}, 0)return toFixedThousandFilter(total)
}
</script>

合并表尾单元格前三列为1格

// 合并前三列单元格
const tableRef = ref()
const spanMethod = () => {const current = tableRef.value.$el.querySelector('.el-table__footer-wrapper').querySelector('.el-table__footer')const cell = current.rows[0].cellscell[0].style.textAlign = 'center' // 合计行第一列字段居中显示cell[1].style.display = 'none'cell[2].style.display = 'none' // 隐藏被合并的单元格，不隐藏的话会占位。cell[0].colSpan = '3' // 合并单元格return [1, 1] // 其它单元格按默认显示
}

参考：el-table合计行单元格合并、合并行金额四舍五入保留两位小数、合计行样式修改

el-table 数据去重后合并表尾合计行，金额千分位分割并保留两位小数，表尾合计行表格合并

问题背景最近在做后台管理项目el-table 时候需要进行表尾合计，修改合计后文字的样式，合并单元格。想实现的效果合并表尾单元格前三列为1格；对某些指定的单元格进行表尾合计；合计后的文本样式加粗；涉及到金额需要千…...

编程日记 2025/8/6 5:02:11

Flutter：RotationTransition旋转动画

配置vsync，需要实现一下with SingleTickerProviderStateMixinclass _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin{// 定义 AnimationController late AnimationController _controller;overridevoid initState() {super…...

编程日记 2025/8/6 4:55:36

《Python浪漫的烟花表白特效》

一、背景介绍烟花象征着浪漫与激情，将它与表白结合在一起，会创造出别具一格的惊喜效果。使用Python的turtle模块，我们可以轻松绘制出动态的烟花特效，再配合文字表白，打造一段专属的浪漫体验。接下来，让…...

编程日记 2025/7/31 4:25:16

Java面试题分享

1、hashmap的底层设计原理以及扩容规则，是否线程安全，如何线程安全。 jdk1.7以前采用数组加链表结构通过键哈希确定数组下标存键值对。jdk1.8及以后采用数组加链表加红黑树，链表超阈值且数组满足条件会转红黑树，哈希函数先取键 h…...

编程日记 2025/8/6 5:00:05

定时器的小应用

第一个项目第一步，RCC开启时钟，这个基本上每个代码都是第一步，不用多想，在这里打开时钟后，定时器的基准时钟和整个外设的工作时钟就都会同时打开了 RCC_APB1PeriphClockCmd(RCC_APB1Periph_TIM2, ENABLE);第二步&…...

编程日记 2025/8/6 4:54:16

【计算机网络】UDP协议

一、UDP协议格式 1.报头的含义 ① 16位源端口号：自己的端口号 ② 16位目的端口号：对方的端口号 ③ 16位UDP长度：整个数据报(UDP报头UDP有效载荷)的长度，最大64KB 一个UDP最多传64KB的数据，如果要传的数据 > 64K…...

编程日记 2025/8/5 11:13:29

vulhub之log4j

Apache Log4j Server 反序列化命令执行漏洞（CVE-2017-5645）漏洞简介 Apache Log4j是一个用于Java的日志记录库，其支持启动远程日志服务器。Apache Log4j 2.8.2之前的2.x版本中存在安全漏洞。攻击者可利用该漏洞执行任意代码。 Apache Log4j 在应用程序中添加日志记录最…...

编程日记 2025/8/6 4:52:05

[Unity] 关于引入Google SDK以及使用的方法

在Unity中接入谷歌SDK（如Google Play Games SDK或Firebase SDK等）通常涉及几个关键步骤，包括下载SDK、导入Unity项目、配置项目设置、编写必要的代码以及测试集成。以下是一个基于Firebase SDK接入Unity的示例，同时涵盖了Google P…...

编程日记 2025/8/6 4:54:17

集群聊天服务器(13)redis环境安装和发布订阅命令

目录环境安装订阅redis发布-订阅的客户端编程环境配置客户端编程功能测试环境安装 sudo apt-get install redis-server 先启动redis服务 /etc/init.d/redis-server start默认在6379端口上 redis是存键值对的，还可以存链表、数组等等复杂数据结构而且数据是在…...

编程日记 2025/8/3 18:48:17

第R4周：LSTM-火灾温度预测（pytorch版）

>- **🍨 本文为[🔗365天深度学习训练营]中的学习记录博客** >- **🍖 原作者：[K同学啊]** 往期文章可查阅： 深度学习总结任务说明：数据集中提供了火灾温度（Tem1）、一氧化碳浓度…...

编程日记 2025/8/6 4:54:17

基于SpringBoot和uniapp开发的医护上门系统上门护理小程序

项目分析一、市场需求分析人口老龄化趋势：随着全球及中国人口老龄化的加剧，老年人口数量显著增加，对医疗护理服务的需求也随之增长。老年人由于身体机能下降，更需要便捷、高效的医护服务，而医护上门服务恰好满足了这…...

编程日记 2025/8/6 5:00:25

js批量输入地址获取经纬度

使用js调用高德地图的接口批量输入地址获取经纬度。以下的请求接口的key请换成你的key。创建key：我的应用 | 高德控制台 ，服务平台选择《Web服务》。 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-…...

编程日记 2025/8/5 14:06:54

Python自动化测试实践中pytest用到的功能dependency和parametrize

Python自动化测试中pytest用到的功能 1、pytest之@pytest.mark.dependency装饰器设置测试用例之间的依赖关系 1.1说明： 1、这是一个pytest第三方插件，主要解决用例之间的依赖关系。如果依赖的上下文测试用例失败后续的用例会被标识为跳过执行，相当于执行了 pytest.mark.s…...

编程日记 2025/8/6 4:55:35

json-bigint处理前端精度丢失问题

问题描述：前后端调试过程中，有时候会遇到精度丢失的问题，比如后端给过来的id超过16位，就会出现精度丢失的情况，前端拿到的id与后端给过来的不一致。解决方案： 1、安装 npm i json-bigint 2、在axios中配置…...

编程日记 2025/8/5 4:36:10

神经网络10-Temporal Fusion Transformer (TFT)

Temporal Fusion Transformer (TFT) 是一种专为时序数据建模而设计的深度学习模型，它结合了Transformer架构和其他技术，旨在有效地处理和预测时序数据中的复杂模式。TFT 于 2020 年由 Google Research 提出，旨在解决传统模型在时序预测中的一…...

编程日记 2025/8/2 22:07:39

django基于django的民族服饰数据分析系统的设计与实现

摘要随着网络科技的发展，利用大数据分析对民族服饰进行管理已势在必行；该平台将帮助企业更好地理解服饰市场的趋势，优化服装款式，提高服装的质量。本文讲述了基于python语言开发，后台数据库选择MySQL进行数据的存储…...

编程日记 2025/7/31 16:55:28

html数据类型

数据类型是字面含义，表示各种数据的类型。在任何语言中都存在数据类型，因为数据是各式各样。 1.数值类型 number let a 1; let num 1.1; // 整数小数都是数字值 // 数字肯定有个范围正无穷大和负无穷大 // Infinity 正无穷大 // -Infinity 负…...

编程日记 2025/8/5 8:58:45

Springboot启动异常错误: 找不到或无法加载主类 xxx.Application异常

Springboot启动异常错误: 找不到或无法加载主类 xxx.Application异常报错提示 Connected to the target VM, address: 127.0.0.1:57210, transport: socket 错误:找不到或无法加载主类 global.hh.manage.HHMicroCloudProviderApplication Disconnected from the target VM, …...

编程日记 2025/8/4 11:37:52

哋它亢SEO技术分析：如何提升网站在搜索引擎中的可见性

文章目录哋它亢SEO技术分析：如何提升网站在搜索引擎中的可见性网站的基本情况SEO优化分析与建议1. 元数据优化2. 关键词优化3. URL结构4. 图像优化5. 移动端优化6. 网站速度7. 结构化数据（Schema Markup）8. 内链与外链9. 社交分享哋它亢SEO…...

编程日记 2025/8/5 1:14:28

web——upload-labs——第十一关——黑名单验证，双写绕过

还是查看源码， $file_name str_ireplace($deny_ext,"", $file_name); 该语句的作用是：从 $file_name 中去除所有出现在 $deny_ext 数组中的元素，替换为空字符串（即删除这些元素）。str_ireplace() 在处理时…...

编程日记 2025/8/2 23:00:13

ElasticSearch7.x入门教程之中文分词器 IK（二）

文章目录前言一、内置分词器二、中文IK分词器（第三方）三、本地自定义四、远程词库总结前言 ElasticSearch 核心功能就是数据检索，首先通过索引将文档写入 es。查询分析则主要分为两个步骤： 1、词条化：分词器将输入…...

编程日记 2025/8/1 17:06:44

体积全息及平面全息图的衍射效率

一、体积全息当记录材料的厚度是条纹间距的若干倍时，则在记录材料体积内将记录下干涉全息图的三维空间分布，就形成了体积全息。按物光和参考光入射方向和再现方式的不同体积全息可以分为两种。一种是物光和参考光在记录介质的同一侧入射，得…...

编程日记 2025/8/5 17:50:18

【常用组件整理】

xgplayer 字节开发的前端视频播放器 xgplayer是一个由字节跳动开发的强大的前端视频播放器，具有稳定性高、文档清晰、支持弹幕和移动端优化等特点。相较于VideoJs，xgplayer的文档更简洁，自定义插件更为便捷。xgplayer还提供了丰富的插件来扩…...

编程日记 2025/8/1 13:06:50

用指针函数寻找数组中的最大值与次大值

#include <stdio.h>// 函数用于找出数组中的最大值和次大值 void LargestTow(int a[], int n, int *pfirst, int *psecond) {*pfirst a[0];*psecond a[1];if (*psecond > *pfirst) {// 如果初始的次大值大于最大值，交换它们int temp *pfirst;*pfirst *…...

编程日记 2025/8/4 7:24:38

原生微信小程序在顶部胶囊左侧水平设置自定义导航兼容各种手机模型

无论是在什么手机机型下，自定义的导航都和右侧的胶囊水平一条线上。如图下以上图iphone12，13PRo 以上图是没有带黑色扇帘的机型以下是调试器看的wxml的代码展示注意：红色阔里的是自定义导航（或者其他的logo啊，返回之…...

编程日记 2025/8/4 19:13:13

Android Gradle自定义任务在打包任务执行完成后执行cmd命令

背景在每次打包之后需要做某事，例如每次打包后我都会安装某个目录下的一个apk。这个apk是通过一堆shell命令过滤得到一个apk的地址，然后把执行的几个shell命令何必成一个alias指令，在打包后只需要执行alias指令实现功能。当然也可以直接写在…...

编程日记 2025/8/1 19:52:52

http自动发送请求工具(自动化测试http请求)

点击下载《http自动发送请求工具(自动化测试http请求)》前言在现代软件开发过程中，HTTP 请求的自动化测试是确保应用程序稳定性和可靠性的关键环节。为了满足这一需求，我开发了一款功能强大且易于使用的自动化 HTTP 请求发送工具。该工具基于 C# 开发…...

编程日记 2025/8/5 9:07:43

解决Docker环境变量的配置的通用方法

我们部署的很多服务都是以Docker容器的形式存在的。在运行Docker容器前，除了设置网络、数据卷之外，还需要设置各种各样的环境变量。有时候，由于容器版本的问题，一些文档没有及时更新，可能同时存在多个新旧版本的环…...

编程日记 2025/8/2 22:46:06

SpringBoot3整合Hutool-captcha实现图形验证码

文章目录验证码需求分析：项目创建import方式的使用说明exclude方式定义接口：接口定义定义 CaptchaController前端代码在整合技术框架的时候，想找一个图形验证码相关的框架，看到很多验证码不在更新了或者是在中央仓库下载不下来，还需要多引入依赖。后面看到了Hutool **图形…...

编程日记 2025/8/5 14:49:22

Spring Boot核心概念：日志管理

日志记录是软件开发的重要组成部分，它帮助开发人员了解应用程序运行时的状态，以及在故障排查和性能监控时提供关键信息。Spring Boot通过提供默认的日志配置，简化了日志管理。 Spring Boot默认日志框架 Spring Boot默认使用Logback作为日志…...

编程日记 2025/8/6 2:06:19

selenium grid 远程webdriver添加上网代理

################## selenium grid config start ####################### # UI自动化测试策略 Grid/Local UIAutomation_TestStrategy Grid selenium_grid_url http://172.16.99.131:4444/wd/hub # Windows XP / linux grid_platformName linux # windows capabilities win…...

编程日记 2025/8/5 8:46:49

Flutter踩坑记录（一）debug运行生成的项目，不能手动点击运行

问题 IOS14设备，切后台划掉，二次启动崩溃。原因 IOS14以上 flutter 不支持debugger模式下的二次启动。要二次启动需要以release方式编译工程安装至手机。操作步骤清理项目：在命令行中运行flutter clean来清理之前的构建文件。重新构…...

编程日记 2025/8/3 20:52:42

Spring Boot 项目 myblog 整理

myblog 项目是一个典型的 Spring Boot 项目，主要包括用户注册、登录、文章管理（创建、查询、更新、删除）等功能。 1. 项目结构与依赖设置项目初始化与依赖使用 Spring Initializr 创建项目。引入必要的依赖包： Spring Boot W…...

编程日记 2025/8/5 9:16:08

【前端知识】nodejs项目配置package.json深入解读

package.json详细解读文件解读一、文件结构二、字段详解三、使用场景四、注意事项组件版本匹配规则文件解读 package.json 文件是 Node.js 项目中的一个核心配置文件，它位于项目的根目录下，并包含项目的基本信息、依赖关系、脚本、版本等内容。以下是…...

编程日记 2025/8/4 15:21:54

51c嵌入式~IO合集2

我自己的原文哦~ https://blog.51cto.com/whaosoft/11697814 一、STM32串口通信基本原理通信接口背景知识设备之间通信的方式一般情况下，设备之间的通信方式可以分成并行通信和串行通信两种。并行与串行通信的区别如下表所示。串行通信的分类 1、按照数据传…...

编程日记 2025/8/3 5:04:53

在应用启动时，使用 UniApp 提供的 API 检查和请求权限。

在使用 UniApp 开发 App 时，如果你需要在应用启动时提示用户获取本地媒体权限，可以按照以下步骤操作： 1. 明确需要的权限要访问本地媒体（如相机、麦克风或文件存储），需要申请以下权限： Andr…...

编程日记 2025/8/4 1:21:05

前端知识点---伪数组是什么 , 伪数组如何转换为真数组(Javascript)

伪数组是什么 , 伪数组如何转换为真数组(Javascript) 在 JavaScript 中，伪数组对象是具有类似数组特性的对象，但并不是数组（即不继承 Array.prototype）。这些对象通常有一个 length 属性以及以数字索引为键的属性，但不…...

编程日记 2025/8/4 18:18:19

嵌入式 UI 开发的开源项目推荐

嵌入式开发 UI 难吗？你的痛点我懂！作为嵌入式开发者，你是否也有以下困扰？设备资源太少，功能和美观只能二选一？调试效率低，每次调整都要反复烧录和测试？开发周期太长，让你…...

编程日记 2025/8/4 17:58:52

《智能指针频繁创建销毁：程序性能的“隐形杀手”》

在 C编程的世界里，智能指针无疑是管理内存资源的得力助手。它们为我们自动处理内存的分配与释放，极大地减少了因手动管理内存而可能引发的诸如内存泄漏、悬空指针等棘手问题。然而，就像任何工具都有其两面性一样，智能指针在带来便…...

编程日记 2025/8/1 20:17:55

28.＜Spring博客系统⑤（部署的整个过程（CentOS））＞

引入依赖 Spring-boot-maven-plugin 用maven进行打包的时候必须用到这个插件。看看自己pom.xml中有没有这个插件并且看看配置正确不正常。注：我们这个项目打的jar包在30MB左右。 <plugin><groupId>org.springframework.boot</groupId><artif…...

编程日记 2025/8/1 20:23:56

mongodb多表查询，五个表查询

需求是这样的，而数据是从mysql导入进来的，由于mysql不支持数组类型的数据，所以有很多关联表。药剂里找药物，需要药剂与药物的关联表，然后再找药物表。从药物表里再找药物与成分关联表，最后再找成分表。这里…...

编程日记 2025/8/1 1:45:58

服务器端渲染（SSR）与客户端渲染（CSR）

嘿程序员！我们都知道，新时代的 Javascript 已经彻底改变了现代网站的结构和用户体验。如今，网站的构建更像是一个应用程序，伪装成一个能够发送电子邮件、通知、聊天、购物、支付等的网站。今天的网站是如此先进、互动，…...

编程日记 2025/8/3 20:20:09

【已解决】“EndNote could not connect to the online sync service”问题的解决

本人不止一次在使用EndNote软件时遇到过“EndNote could not connect to the online sync service”这个问题。过去遇到这个问题都是用这个方法来解决： 这个方法虽然能解决，但工程量太大，每次做完得歇半天身体才能缓过来。后来再遇到该问…...

编程日记 2025/7/30 14:58:50

HTML5拖拽API学习托拽排序和可托拽课程表

文章目录前言拖拽API核心概念拖拽式使用流程例子注意事项综合例子🌰 可拖拽课程表拖拽排序前言前端拖拽功能让网页元素可以通过鼠标或触摸操作移动。HTML5 提供了标准的拖拽API，简化了拖放操作的实现。以下是拖拽API的基本使用指南： 拖拽…...

编程日记 2025/8/4 1:18:20

sed使用扩展正则表达式时, -i 要写在 -r 或 -E 的后面

sed使用扩展正则表达式时, -i 要写在 -r 或 -E 的后面前言 -r 等效 -E , 启用扩展正则表达式 -E是新叫法,更统一,能增强可移植性 , 但老系统,比如 CentOS-7 的 sed 只能用 -r ### Ubuntu24.04-E, -r, --regexp-extendeduse extended regular expressions in the script(fo…...

编程日记 2025/8/5 17:51:33

CSS中Flex布局应用实践总结

① 两端对齐比如要求ul下的li每行四个，中间间隔但是需要两段对齐，如下图所示： 这是除了基本的flex布局外，还需要用到:nth-of-type伪类来控制每行第一个与第四个的padding。 .hl_list{width: 100%;display: flex;align-items…...

编程日记 2025/8/3 23:09:06

【前端】CSS修改div滚动条样式

示例分别是滚动条默认样式和修改后的样式代码 <div class"video-list"><div class"list-item" onclick"videoinfo(100)"><img src"/index/images/coverimg/方和谦.png"><div class"txt">国医大…...

编程日记 2025/8/3 18:09:20

鸿蒙多线程开发——线程间数据通信对象02

1、前言本文的讨论是接续鸿蒙多线程开发——线程间数据通信对象01的讨论。在上一篇文章中，我们讨论了常规的JS对象(普通JSON对象、Object、Map、Array等)、ArrayBuffer。其中讨论了ArrayBuffer的复制传输和转移传输方式。下面，我们将讨论SharedArra…...

编程日记 2025/7/29 19:59:56

Kotlin的data class

在 Kotlin 中，data class 是一种专门用来存储数据的类。与普通类相比，data class 提供了简化数据存储的语法，并且自动生成了一些常用的方法，例如 toString()、equals()、hashCode() 和 copy()。 1. 定义 data class data class …...

编程日记 2025/8/3 22:54:00

Proxy 在 JavaScript的用法

Proxy 是 JavaScript 提供的一个构造函数，用于创建一个“代理对象”。这个代理对象可以拦截目标对象的基本操作，例如读取属性、赋值、删除、调用函数等。通过它，我们可以修改或扩展对象的默认行为。 Proxy 的基本语法 const proxy = new Proxy(target, handler);target：被…...

编程日记 2025/7/31 15:10:35

问题背景

想实现的效果

涉及到的属性方法

表尾合计

合并表尾单元格前三列为1格

相关文章：