React Antd 实现表格合计功能

思路:首先拿到 表格数组对象,然后写一个工具类,然后向数组对象最后插入一条数据,这条数据的字段时根据表格数组里合计算出来的。

代码如下,需根据各自业务稍作改动:

 <Table dataSource={tableData}columns={columns}pagination={false}/>
    const columns = [{title: 'xxx',dataIndex: 'name',key: 'name',align: 'center',},{title: 'yyy',dataIndex: 'yyy',key: '',align: 'center',render: (text, record, rowIndex) => {return (<InputNumber min={0} value={text}onChange={(e) => handleCellChange(rowIndex, 'yyy', e)} />);},]
}

// 每次数据变更计算一次合计const handleCellChange = (rowIndex, dataIndex, value) => {const newTableData = _.cloneDeep(tableData);newTableData[rowIndex][dataIndex] = value;countSum(newTableData, '', 'project');setTableData(newTableData);};// 第一次进来计算一次合计React.useEffect(() => {const newTableData = _.cloneDeep(tableData);countSum(newTableData, '', 'project');setTableData(newTableData);}, []);

合计工具类

/*** 用于表格的合计计算** @param arr 要计算的数组* @param prefix 要计算的数组的对象的前缀* @param sumField 合计字段名字放到哪个字段上* @param accuracy 合计精度* @returns {*}*/
export function countSum(arr, prefix, sumField, accuracy = 4) {if (arr.length === 0) {// 没数据,直接返回return;}// 求和对象let sumObj = {};// 获取到最后一个数据let last = arr[arr.length - 1];if (prefix) {if (last[prefix][sumField] === '合计') {// 已经存在合计了sumObj = last;// 把 sum 的值清空,重新计算sumObj[prefix] = {};sumObj[prefix][sumField] = '合计';} else {sumObj[prefix] = {};sumObj[prefix][sumField] = '合计';arr.push(sumObj); // 在数组末尾添加合计对象}} else {if (last[sumField] === '合计') {// 已经存在合计了last = {};last[sumField] = '合计';arr[arr.length - 1] = last;sumObj = last;} else {sumObj[sumField] = '合计';arr.push(sumObj); // 在数组末尾添加合计对象}}let attrNames;if (prefix) {attrNames = Object.keys(arr[0][prefix]); // 获取数组中所有对象的属性名} else {attrNames = Object.keys(arr[0]); // 获取数组中所有对象的属性名}// -1 代表不累计合计本身的值for (let i = 0; i < attrNames.length - 1; i++) {const attrName = attrNames[i];for (let j = 0; j < arr.length - 1; j++) {let attrValue;if (prefix) {attrValue = arr[j][prefix][attrName];} else {attrValue = arr[j][attrName];}if (typeof attrValue == 'number') {// 只合计数值类型// 将属性值转换为数值类型let attrValueNumber = Number(attrValue).toFixed(4);if (prefix) {sumObj[prefix][attrName] = Number(parseFloat(Number(sumObj[prefix][attrName] || 0) + Number(attrValueNumber)).toFixed(accuracy)); // 求和} else {sumObj[attrName] = Number(parseFloat(Number(sumObj[attrName] || 0) + Number(attrValueNumber)).toFixed(accuracy)); // 求和}}}}
}

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

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

相关文章

时间复杂度为O(nlogn)的两种排序算法

1.归并排序 归并排序的核心思想&#xff1a;如果要排序一个数组&#xff0c;我们先把数组从中间分成前后两部分&#xff0c;然后对前后两部分分别排序&#xff0c;再将排好序的两部分合并在一起&#xff0c;这样整个数组就都有序了。 归并排序使用的就是分治思想。分治&#x…

第2章 HTML中的JavaScript

引言 将JavaScript引入网页&#xff0c;首先要解决它与网页的主导语言HTML的关系问题 script元素 将JavaScript插入HTML的主要方法是使用script元素&#xff0c;script有8个可选属性 async&#xff1a;表示异步加载js文件内容&#xff0c;他们之间的顺序不一定按照html顺序ch…

IDEA强大的VisualGC插件

前言 开发阶段实时监测&#xff0c;自己的JVM信息&#xff0c;实时可视化 Hotspot JVM 垃圾回收监控工具, 支持查看本地和远程JVM进程, 支持G1 and ZGC算法。 插件安装 在线安装 IntelliJ IDEA 可通过在线安装的方式&#xff0c;安装插件 JDK VisualGC&#xff0c;安装步骤: …

DAY02_Spring第三方资源配置管理Spring容器Spring注解开发Spring整合Mybatis和Junit

目录 一 第三方资源配置管理1 管理DataSource连接池对象问题导入1.1 管理Druid连接池1.2 管理c3p0连接池 2 加载properties属性文件问题导入2.1 基本用法2.2 配置不加载系统属性2.3 加载properties文件写法 二 Spring容器1 Spring核心容器介绍问题导入1.1 创建容器1.2 获取bean…

JVM 类文件结构(class文件)

JVM 本文链接&#xff1a;https://blog.csdn.net/feather_wch/article/details/132116849 类文件结构 1、class文件的组成 无符号数&#xff1a;基本数据类型 u1 u2 u3 u4 描述 数字字符串索引引用 表&#xff1a;复合数据类型&#xff0c;无符号数 表组&#xff0c; _inf…

阿里云平台WoSignSSL证书应用案例

沃通CA与阿里云达成合作并在阿里云平台上线WoSign品牌SSL证书。自上线以来&#xff0c;WoSignSSL证书成为阿里云“数字证书管理服务”热销证书产品&#xff0c;获得阿里云平台客户认可&#xff0c;助力阿里云平台政府、金融、教育、供应链、游戏等各类行业客户实现网站系统数据…

最全大数据毕业设计题目 - 100例

文章目录 0 前言1 如何选题1.1 选题技巧&#xff1a;如何避坑(重中之重)1.2 为什么这么说呢&#xff1f;1.3 难度把控1.4 题目名称1.5 最后 2 大数据 - 选题推荐2.1 大数据挖掘类2.2 大数据处理、云计算、区块链 毕设选题2.3 大数据安全类2.4 python大数据 游戏设计、动画设计类…

re学习(28)攻防世界 parallel-comparator-200(线程函数)

下载出来是个C语言编辑文件&#xff0c;添加注释如下所示&#xff1a; #include <stdlib.h> #include <stdio.h> #include <pthread.h> //linux的线程库&#xff0c;所以要在linux中才可运行 #define FLAG_LEN 20void * checking(void *arg) { //这道题…

举办活动发布会,如何得到媒体支持?

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 举办活动发布会并得到媒体报道的支持是一个关键的宣传和推广手段。以下是一些建议&#xff0c;帮助你增加吸引媒体关注和报道的机会&#xff1a; 1. 策划新闻价值&#xff1a;确保你的发…

从0到1框架搭建,Python+Pytest+Allure+Git+Jenkins接口自动化框架(超细整理)

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 接口测试是对系统…

为机器人装“大脑” 谷歌发布RT-2大模型

大语言模型不仅能让应用变得更智能&#xff0c;还将让机器人学会举一反三。在谷歌发布RT-1大模型仅半年后&#xff0c;专用于机器人的RT-2大模型于近期面世&#xff0c;它能让机器人学习互联网上的文本和图像&#xff0c;并具备逻辑推理能力。 该模型为机器人智能带来显著升级…

剑指Offer 58.左旋转字符串

58.左旋转字符串 目录 58.左旋转字符串题目代码&#xff08;字符串拼接&#xff09;利用切片函数同余简化代码利用StringBuilder 面试&#xff1a;StringBuilder与String的使用比较 题目 官网地址 代码&#xff08;字符串拼接&#xff09; class Solution {public String r…

【深度学习】在 MNIST实现自动编码器实践教程

一、说明 自动编码器是一种无监督学习的神经网络模型&#xff0c;主要用于降维或特征提取。常见的自动编码器包括基本的单层自动编码器、深度自动编码器、卷积自动编码器和变分自动编码器等。 其中&#xff0c;基本的单层自动编码器由一个编码器和一个解码器组成&#xff0c;编…

K8S 部署 RocketMQ

文章目录 添加模板部署本地访问 集群使用 kubesphere 作为工具 添加模板 添加 helm 模板 helm repo add rocketmq-repo https://helm-charts.itboon.top/rocketmq helm repo update rocketmq-repo编写 value.yaml 文件 配置主从节点的个数&#xff0c;例子为单节点 broker:…

Tool Documentation Enables Zero-Shot Tool-Usage with Large Language Models

本文是LLM系列文章的内容&#xff0c;针对《Tool Documentation Enables Zero-Shot Tool-Usage with Large Language Models》的翻译。 工具文档赋能大模型零样本的工具使用 摘要1 引言2 相关工作3 实验设置3.1 常规的工作流3.2 工具使用提示方法3.3 评估任务 4 实证研究结果4…

node debian 镜像 new Date 获取时间少 8 小时问题

问题 在 node debian 镜像中&#xff0c;用 (new Date()).getHours() 与系统时间&#xff08;东 8 区&#xff09;少了 8 小时 系统时间 $ node > (new Date()).getHours() 11容器中的时间 $ node > (new Date()).getHours() 3原 Dockerfile FROM node:20.5-bullsey…

snap xxx has “install-snap“ change in progress

error description * 系重复安装&#xff0c;进程冲突 solution 展示snap的改变 然后sudo snap abort 22即可终止该进程 之后重新运行install command&#xff5e;&#xff5e; PS: ubuntu有时候加载不出来&#xff0c;执行resolvectl flush-caches&#xff0c;清除dns缓存…

用python编写的软件有哪些,编写python 用什么软件

大家好&#xff0c;小编来为大家解答以下问题&#xff0c;用python编写的软件有哪些&#xff0c;编写python 用什么软件&#xff0c;现在让我们一起来看看吧&#xff01; 随着互联网的迅速发展&#xff0c;新技术不断创新&#xff0c;万物互联的时代&#xff0c;企业对IT人员的…

【博客687】k8s informer的list-watch机制剖析

k8s informer的list-watch机制剖析 1、list-watch场景&#xff1a; client-go中的reflector模块首先会list apiserver获取某个资源的全量信息&#xff0c;然后根据list到的rv来watch资源的增量信息。希望使用client-go编写的控制器组件在与apiserver发生连接异常时&#xff0c…

【51单片机】晨启科技,酷黑版,音乐播放器

四、音乐播放器 任务要求&#xff1a; 设计制作一个简易音乐播放器&#xff08;通过手柄板上的蜂鸣器发声&#xff0c;播放2到4首音乐&#xff09;&#xff0c;同时LED模块闪烁&#xff0c;给人视、听觉美的感受。 评分细则&#xff1a; 按下播放按键A6开始播放音乐&#xff0…