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

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

问题背景

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

想实现的效果

在这里插入图片描述

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

涉及到的属性方法

先看下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 时候需要进行表尾合计&#xff0c;修改合计后文字的样式&#xff0c;合并单元格。 想实现的效果 合并表尾单元格前三列为1格&#xff1b;对某些指定的单元格进行表尾合计&#xff1b;合计后的文本样式加粗&#xff1b;涉及到金额需要千…...

Springboot整合mybatis-plus使用pageHelper进行分页

PageHelper 使用步骤全解析 在进行 Web 应用开发时&#xff0c;经常会涉及到数据库数据的分页展示。PageHelper 是一个非常实用的 MyBatis 分页插件&#xff0c;它能够方便地实现数据库查询结果的分页功能&#xff0c;极大地提高了开发效率。以下将简单介绍 PageHelper 的使用…...

【Xbim+C#】创建拉伸的墙

基础 基础回顾 效果图 简单的工具类 using System.Collections.Generic; using System.Linq; using Xbim.Common.Step21; using Xbim.Ifc; using Xbim.Ifc4.GeometricConstraintResource; using Xbim.Ifc4.GeometricModelResource; using Xbim.Ifc4.GeometryResource; using…...

【阅读记录-章节3】Build a Large Language Model (From Scratch)

目录 3 Coding attention mechanisms3.1 The problem with modeling long sequences背景&#xff1a;注意力机制的动机 3.2 Capturing data dependencies with attention mechanismsRNN的局限性与改进Transformer架构的革命 3.3 Attending to different parts of the input wit…...

three.js 对 模型使用 视频进行贴图修改材质

three.js 对 模型使用 视频进行贴图修改材质 https://threehub.cn/#/codeMirror?navigationThreeJS&classifyapplication&idvideoModel import * as THREE from three import { OrbitControls } from three/examples/jsm/controls/OrbitControls.js import { GLTFLoad…...

MySQL - 数据库基础 | 数据库操作 | 表操作

文章目录 1、数据库基础1.1为什么要有数据库1.2主流的数据库1.3连接MySQL1.4服务器、数据库、表的关系1.5 MySQL框架1.6 SQL分类1.7储存引擎 2.数据库操作2.1创建数据库2.2字符集和校验规则2.3删除数据库2.4修改数据库2.5备份与恢复2.6查看连接情况 3.表的操作3.1创建表3.2查看…...

maven父子项目

目录 一、创建Maven父子项目 二、父子项目的关联 三、父子项目的继承关系 四、构建父子项目 五、Maven父子项目的优势 Maven父子项目是一种项目结构&#xff0c;它允许一个父项目&#xff08;也称为根项目&#xff09;管理多个子项目&#xff08;也称为模块&#xff09;。…...

NLP论文速读(多伦多大学)|利用人类偏好校准来调整机器翻译的元指标

论文速读|MetaMetrics-MT: Tuning Meta-Metrics for Machine Translation via Human Preference Calibration 论文信息&#xff1a; 简介&#xff1a; 本文的背景是机器翻译&#xff08;MT&#xff09;任务的评估。在机器翻译领域&#xff0c;由于不同场景和语言对的需求差异&a…...

MyBatis——#{} 和 ${} 的区别和动态 SQL

1. #{} 和 ${} 的区别 为了方便&#xff0c;接下来使用注解方式来演示&#xff1a; #{} 的 SQL 语句中的参数是用过 ? 来起到类似于占位符的作用&#xff0c;而 ${} 是直接进行参数替换&#xff0c;这种直接替换的即时 SQL 就可能会出现一个问题 当传入一个字符串时&#xff…...

解决sql字符串

根据你描述的情况以及调试截图中的内容&#xff0c;我可以确认你的 sql 字符串在 Python 中由于转义字符的问题&#xff0c;可能导致在 Oracle 中运行时出错。 以下是一些排查和修改建议&#xff1a; 问题分析 转义字符问题&#xff1a; 在调试界面中可以看到&#xff0c;DEC…...

深度解析:Android APP集成与拉起微信小程序开发全攻略

目录 一、背景以及功能介绍 二、Android开发示例 2.1 下载 SDK 2.2 调用接口 2.3 获取小程序原始Id 2.4 报错提示&#xff1a;bad_param 2.4.1 错误日志 2.4.2 解决方案 相关推荐 一、背景以及功能介绍 需求&#xff1a;产品经理需要APP跳转到公司的小程序(最好指定页…...

Leetcode 被围绕的区域

算法思想&#xff08;解题思路&#xff09;&#xff1a; 这道题的核心是 将所有被边界包围的 O 保留下来&#xff0c;而将其他被围绕的 O 转换为 X。为了实现这一目标&#xff0c;我们可以分三步完成&#xff1a; 第一步&#xff1a;标记边界及其相连的 O 为特殊标记&#xff…...

ssm框架-spring-spring声明式事务

声明式事务概念 声明式事务是指使用注解或 XML 配置的方式来控制事务的提交和回滚。 开发者只需要添加配置即可&#xff0c; 具体事务的实现由第三方框架实现&#xff0c;避免我们直接进行事务操作&#xff01; 使用声明式事务可以将事务的控制和业务逻辑分离开来&#xff0c;提…...

React第五节 组件三大属性之 props 用法详解

特性 a、props最好是仅限于父子上下级之间的数据传递&#xff0c;如果是祖孙多级之间传递属性&#xff0c;可以考虑使用props是否合适&#xff0c;或者使用替代方案 useContext() 或者使用 redux状态管理&#xff1b; b、props 中的属性是只读属性&#xff0c;如果想修改其中的…...

测评部署和管理 WordPress 最方便的面板

新版宝塔面板快速搭建WordPress新手教程 - 倚栏听风-Morii - 博客园 初学者使用1Panel面板快速搭建WordPress网站 - 倚栏听风-Morii - 博客园 可以看到&#xff0c;无论是宝塔还是1Panel&#xff0c;部署和管理WordPress都有些繁琐&#xff0c;而且还需要额外去配置Nginx和M…...

【系统分析师】-2024年11月论文-论DevOps开发

1、题目要求 论Devops及其应用。Devops是一组过程、方法与系统的统称&#xff0c;用于促进开发、技术运营和质量保障部门之间的沟通&#xff0c;协作与整合。它是一种重视软体开发人员和工厂运维技术人员之间沟通合作的模式。透过自动化“软件交付”和“架构变更”的流程&…...

算法【子数组最大累加和问题与扩展】

子数组最大累加和问题是一个非常经典的问题&#xff0c;也比较简单。但是扩展出的问题很多&#xff0c;在笔试、面试中特别常见&#xff0c;扩展出的问题很多非常有趣&#xff0c;解法也比较巧妙。 下面通过一些题目来加深理解。 题目一 测试链接&#xff1a;https://leetcode…...

小程序23-页面的跳转:navigation 组件详解

小程序中&#xff0c;如果需要进行跳转&#xff0c;需要使用 navigation 组件&#xff0c;常用属性&#xff1a; 1.url &#xff1a;当前小程序内的跳转链接 2.open-type&#xff1a;跳转方式 navigate&#xff1a;保留当前页面&#xff0c;跳转应用内的某个页面&#xff0c…...

AI社媒引流工具:解锁智能化营销的新未来

在数字化浪潮的推动下&#xff0c;社交媒体成为品牌营销的主战场。然而&#xff0c;面对海量的用户数据和日益复杂的运营需求&#xff0c;传统营销方法显得力不从心。AI社媒引流王应运而生&#xff0c;帮助企业在多平台中精准触达目标用户&#xff0c;提升营销效率和效果。 1.…...

【Node.js】全面解析 Node.js 安全最佳实践:保护您的应用

Node.js 是一种强大的 JavaScript 运行时&#xff0c;广泛用于构建现代 Web 应用和 API。然而&#xff0c;由于其开放性和异步特性&#xff0c;Node.js 应用容易受到多种安全威胁的攻击&#xff0c;比如 SQL 注入、跨站脚本 (XSS) 和拒绝服务攻击 (DoS)。在本文中&#xff0c;我…...

[特殊字符] 智能合约中的数据是如何在区块链中保持一致的?

&#x1f9e0; 智能合约中的数据是如何在区块链中保持一致的&#xff1f; 为什么所有区块链节点都能得出相同结果&#xff1f;合约调用这么复杂&#xff0c;状态真能保持一致吗&#xff1f;本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里&#xf…...

智慧工地云平台源码,基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

【解密LSTM、GRU如何解决传统RNN梯度消失问题】

解密LSTM与GRU&#xff1a;如何让RNN变得更聪明&#xff1f; 在深度学习的世界里&#xff0c;循环神经网络&#xff08;RNN&#xff09;以其卓越的序列数据处理能力广泛应用于自然语言处理、时间序列预测等领域。然而&#xff0c;传统RNN存在的一个严重问题——梯度消失&#…...

从零实现STL哈希容器:unordered_map/unordered_set封装详解

本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说&#xff0c;直接开始吧&#xff01; 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...

AI+无人机如何守护濒危物种?YOLOv8实现95%精准识别

【导读】 野生动物监测在理解和保护生态系统中发挥着至关重要的作用。然而&#xff0c;传统的野生动物观察方法往往耗时耗力、成本高昂且范围有限。无人机的出现为野生动物监测提供了有前景的替代方案&#xff0c;能够实现大范围覆盖并远程采集数据。尽管具备这些优势&#xf…...

华为OD机考-机房布局

import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...

协议转换利器,profinet转ethercat网关的两大派系,各有千秋

随着工业以太网的发展&#xff0c;其高效、便捷、协议开放、易于冗余等诸多优点&#xff0c;被越来越多的工业现场所采用。西门子SIMATIC S7-1200/1500系列PLC集成有Profinet接口&#xff0c;具有实时性、开放性&#xff0c;使用TCP/IP和IT标准&#xff0c;符合基于工业以太网的…...

c# 局部函数 定义、功能与示例

C# 局部函数&#xff1a;定义、功能与示例 1. 定义与功能 局部函数&#xff08;Local Function&#xff09;是嵌套在另一个方法内部的私有方法&#xff0c;仅在包含它的方法内可见。 • 作用&#xff1a;封装仅用于当前方法的逻辑&#xff0c;避免污染类作用域&#xff0c;提升…...

ArcGIS Pro+ArcGIS给你的地图加上北回归线!

今天来看ArcGIS Pro和ArcGIS中如何给制作的中国地图或者其他大范围地图加上北回归线。 我们将在ArcGIS Pro和ArcGIS中一同介绍。 1 ArcGIS Pro中设置北回归线 1、在ArcGIS Pro中初步设置好经纬格网等&#xff0c;设置经线、纬线都以10间隔显示。 2、需要插入背会归线&#xf…...

StarRocks 全面向量化执行引擎深度解析

StarRocks 全面向量化执行引擎深度解析 StarRocks 的向量化执行引擎是其高性能的核心设计&#xff0c;相比传统行式处理引擎&#xff08;如MySQL&#xff09;&#xff0c;性能可提升 5-10倍。以下是分层拆解&#xff1a; 1. 向量化 vs 传统行式处理 维度行式处理向量化处理数…...