VUE+ELEMENTUI表格的表尾合计

news2024/9/28 17:24:00

 <el-table

                              :data="XXXX"

                              :summary-method="getSummaries"

                              show-summary = "true"

                           >

getSummaries(param) {

        const { columns, data } = param;

        const sums = [];

        columns.forEach((column, index) => {

       

        if (index === 0) {

            sums[index] = '合计';

          }

        else {

            const values = data.map(item => Number(item[column.property]));

            if (!values.every(value => isNaN(value))) {

              sums[index] = values.reduce((prev, curr) => {

                const value = Number(curr);

                if (!isNaN(value)) {

                  return prev + curr;

                } else {

                  return prev;

                }

              }, 0);

            } else {

              sums[index] = 'N/A';

            }

          }

        });

        const totalCol1 = sums[1]; // 第一列的合计总数

        const totalCol2 = sums[2]; // 第二列的合计总数

        const totalCol4 = sums[4]; // 第4列的合计总数

        const totalCol5 = sums[5]; // 第5列的合计总数

        if (!isNaN(totalCol2) && !isNaN(totalCol1) && totalCol1 !== 0) {

            sums[3] = ((totalCol2 / totalCol1)* 100).toFixed(2) +"%"; // 计算第三列的值,并保留两位小数

          } else {

            sums[3] = 'N/A'; // 如果无法计算,则显示'N/A'

          }

        if (!isNaN(totalCol5) && !isNaN(totalCol4) && totalCol4 !== 0) {

            sums[6] = ((totalCol5 / totalCol4)*100).toFixed(2)+"%"; // 计算第三列的值,并保留两位小数

          } else {

            sums[6] = 'N/A'; // 如果无法计算,则显示'N/A'

        }

         

         return sums;

    },

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

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

相关文章

高考后的IT专业启航:暑期预习指南与学习路线图

文章目录 每日一句正能量前言&#xff1a;启航IT世界&#xff0c;高考后的暑期学习之旅基础课程预习指南基础课程预习指南&#xff1a;构建你的IT知识大厦引言一、计算机科学导论二、编程语言入门三、操作系统基础四、数据结构与算法五、网络基础六、数据库原理结语 技术学习路…

ollama教程——如何在Ollama中导入和管理GGUF与Safetensors模型

ollama教程——如何在Ollama中导入和管理GGUF与Safetensors模型 引言Ollama模型导入概述Ollama支持的模型格式Ollama的版本要求和安装安装OllamaGGUF模型导入什么是GGUF模型通过Modelfile导入GGUF模型代码示例常见问题和解决方案1. 模型文件路径错误2. 模型文件格式不正确3. Ol…

【JS逆向补环境】最新mtgsig参数分析与算法还原

文章目录 1. 写在前面2. 接口分析3. 加密调试分析4. 补环境还原算法 【&#x1f3e0;作者主页】&#xff1a;吴秋霖 【&#x1f4bc;作者介绍】&#xff1a;擅长爬虫与JS加密逆向分析&#xff01;Python领域优质创作者、CSDN博客专家、阿里云博客专家、华为云享专家。一路走来长…

集控中心操作台材质选择如何选择

作为集控中心的核心组成部分&#xff0c;操作台不仅承载着各种设备和工具&#xff0c;更是工作人员进行监控、操作和管理的重要平台。因此&#xff0c;选择适合的集控中心操作台材质显得尤为重要。 一、材质选择的考量因素 在选择集控中心操作台材质时&#xff0c;我们需要综合…

竞赛选题 图像识别-人脸识别与疲劳检测 - python opencv

文章目录 0 前言1 课题背景2 Dlib人脸识别2.1 简介2.2 Dlib优点2.3 相关代码2.4 人脸数据库2.5 人脸录入加识别效果 3 疲劳检测算法3.1 眼睛检测算法3.3 点头检测算法 4 PyQt54.1 简介4.2相关界面代码 5 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是…

JVM - 辅助小工具

文章目录 前言JVM - 辅助小工具1. 实现2. 效果3. demo 前言 如果您觉得有用的话&#xff0c;记得给博主点个赞&#xff0c;评论&#xff0c;收藏一键三连啊&#xff0c;写作不易啊^ _ ^。   而且听说点赞的人每天的运气都不会太差&#xff0c;实在白嫖的话&#xff0c;那欢迎…

迭代器模式(大话设计模式)C/C++版本

迭代器模式 C #include <iostream> #include <string> #include <vector>using namespace std;// 迭代抽象类,用于定义得到开始对象、得到下一个对象、判断是否到结尾、当前对象等抽象方法&#xff0c;统一接口 class Iterator { public:Iterator(){};virtu…

全网最适合入门的面向对象编程教程:11 类和对象的Python实现-子类调用父类方法-模拟串口传感器和主机

全网最适合入门的面向对象编程教程&#xff1a;11 类和对象的 Python 实现-子类调用父类方法-模拟串口传感器和主机 摘要&#xff1a; 本节课&#xff0c;我们主要讲解了在 Python 类的继承中子类如何进行初始化、调用父类的属性和方法&#xff0c;同时讲解了模拟串口传感器和…

Go语言---文本文件处理

字符串操作 Contains func Contains(s,substr string) bool功能&#xff1a;字符串s中是否包含 substr&#xff0c;返回bool值 Join func Join(a []string,sep string) string功能&#xff1a;字符串链接&#xff0c;把slice a通过sep链接起来 Index func Index(a ,sep s…

Pytest单元测试系列[v1.0.0][Pytest基础]

Pytest安装与配置 和Unittest一样&#xff0c;Pytest是另一个Python语言的单元测试框架&#xff0c;与Unittest相比它的测试用例更加容易编写、运行方式更加灵活、报错信息更加清晰、断言写法更简洁并且它可以运行有unittest和nose编写的测试用例。 Pytest 安装 启动命令行&…

VMware安装部署Android手机操作系统

VMware安装部署Android手机操作系统 原创 wangyangsheng 计算机科学与技术研究员 2024年07月09日 08:30 广东 本文主要描述在VMware中安装部署Android-x86版本手机操作系统。 www.android-x86.org 如上所示&#xff0c;从开源网站下载Android-x86最新版本操作系统安装文件 …

小阿轩yx-Haproxy搭建Web群集

小阿轩yx-Haproxy搭建Web群集 Haproxy 简介 提供高可用性 能做出标准的负载均衡 支持虚拟主机 具备健康检查能力 能用于各式各样的代理 轻量级代理环境 解决方案优势 免费 快速 可靠 特性 特别适用于那些负载特大的web站点&#xff0c;这些站点通常又需要会话保持或…

几种不同的方式禁止IP访问网站(PHP、Nginx、Apache设置方法)

1、PHP禁止IP和IP段访问 <?//禁止某个IP$banned_ip array ("127.0.0.1",//"119.6.20.66","192.168.1.4");if ( in_array( getenv("REMOTE_ADDR"), $banned_ip ) ){die ("您的IP禁止访问&#xff01;");}//禁止某个IP段…

01-图像基础-颜色空间

1.RGB颜色空间 RGB是一种常用的颜色空间&#xff0c;比如一幅720P的图像&#xff0c;所对应的像素点个数是1280*720&#xff0c;每一个像素点由三个分量构成&#xff0c;分别是R,G,B。 R代表红色分量&#xff0c;G代表绿色分量&#xff0c;B代表蓝色分量&#xff0c;以24位色来…

一网统管/视频汇聚/安防监控平台EasyCVR启动后无法访问是什么原因?

智慧城市/一网统管/视频汇聚/安防监控平台EasyCVR兼容性强&#xff0c;支持多协议接入&#xff0c;包括国标GB/T 28181协议、GA/T 1400协议、部标JT808协议、RTMP、RTSP/Onvif协议、海康Ehome、海康SDK、大华SDK、华为SDK、宇视SDK、乐橙SDK、萤石云SDK等&#xff0c;并能对外分…

插件更新了!

最近花了点时间&#xff0c;给网页插件添加了新功能&#xff0c;下面简单给大家介绍一下如何使用 我们安装好插件后&#xff0c;进入网页就可以看到一个带logo的按钮了&#xff0c;我们可以点一下就可以跳出快捷操作 不同页面点击会出现不同的功能&#xff0c;大家可以根据自己…

解析java128陷阱

一、提要 在java开发时&#xff0c;由于基本类型不能调用方法&#xff0c;在某些方面很不方便&#xff0c;因此产生了包装类。我们把基本类型和对应的包装类的转换叫装箱、拆箱。 1.装箱 基本类型转成包装类对象 关键字valueOf->装箱,可以指定进制&#xff1a; Integer…

2024年【道路运输企业主要负责人】考试内容及道路运输企业主要负责人找解析

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 道路运输企业主要负责人考试内容是安全生产模拟考试一点通生成的&#xff0c;道路运输企业主要负责人证模拟考试题库是根据道路运输企业主要负责人最新版教材汇编出道路运输企业主要负责人仿真模拟考试。2024年【道路…

俯卧撑计数器(Python)

通过 MediaPipe 检测人体姿态&#xff0c;计算俯卧撑角度和计数&#xff0c;并在图像上进行可视化展示 需要有cv2库和mediapipe库 mediapipe库&#xff1a; MediaPipe是Google开源的机器学习框架&#xff0c;用于构建实时音频、视频和多媒体处理应用程序。它提供了一组预训练的…

今日早报 每日精选15条新闻简报 每天一分钟 知晓天下事 7月9日,星期二

每天一分钟&#xff0c;知晓天下事&#xff01; 2024年7月9日 星期二 农历六月初四 1、 最高检&#xff1a;对小摊小贩、小微企业处以高额罚款不符合法律精神。 2、 公安部&#xff1a;全国机动车保有量达4.4亿辆&#xff0c;驾驶人达5.32亿人。 3、 科技部&#xff1a;严禁将…