VUE+ELEMENTUI表格的表尾合计

 <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.mzph.cn/bicheng/45922.shtml

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

相关文章

FFM(Field-aware Factorization Machine -领域感知的因子分解机)解析及举例

FFM&#xff08;Field-aware Factorization Machines&#xff09;模型是一种广泛应用于推荐系统、广告点击率预测等领域的机器学习模型。与传统的因子分解机&#xff08;FM&#xff09;相比&#xff0c;FFM模型考虑了不同特征字段之间的交互关系&#xff0c;从而能够更好地捕捉…

树莓派pico入坑笔记,dht11使用及温湿度表制作

目录 关于树莓派pico和circuitpython的更多玩法&#xff0c;请看树莓派pico专栏 用到的库adafruit_dht&#xff0c;需要导入pico才能使用&#xff0c;在这里下载 样例程序 进阶玩法&#xff0c;显示信息的温湿度计 屏幕使用见树莓派pico专栏的ssd1306oled屏幕使用 代码 效…

Go 初始化一个字典

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…

4K60无缝一体矩阵 HDMI2.0功能介绍

关于GF-HDMI0808S 4K60无缝一体矩阵的功能介绍&#xff0c;由于直接针对GF-HDMI0808S型号的具体信息较少&#xff0c;我将结合类似4K60无缝HDMI矩阵的一般功能特性和可能的GF-HDMI0808系列产品的特点来进行说明。请注意&#xff0c;以下信息可能不完全针对GF-HDMI0808S型号&…

springboot+vue系统开发

链接: https://pan.baidu.com/s/1P1YpHAx9QOBPxjFZ9SAbig 提取码: u6f1

Java基础(十九):集合框架

目录 一、Java集合框架体系二、Collection接口及方法1、添加2、判断3、删除4、其它 三、Iterator(迭代器)接口1、Iterator接口2、迭代器的执行原理3、foreach循环 四、Collection子接口1&#xff1a;List1、List接口特点2、List接口方法3、List接口主要实现类&#xff1a;Array…

GuLi商城-商品服务-API-品牌管理-统一异常处理

每个方法都加这段校验太麻烦了 准备做一个统一异常处理@ControllerAdvice 后台代码: package com.nanjing.gulimall.product.exception;import com.nanjing.common.exception.BizCodeEnum; import com.nanjing.common.utils.R; import lombok.extern.slf4j.Slf4j; import org…

【Linux】任务管理

这个任务管理&#xff08;job control&#xff09;是用在bash环境下的&#xff0c;也就是说&#xff1a;【当我们登录系统获取bashshell之后&#xff0c;在单一终端下同时执行多个任务的操作管理】。 举例来说&#xff0c;我们在登录bash后&#xff0c;可以一边复制文件、一边查…

代码随想录算法训练营第五十二天(图论)| 98. 所有可达路径、深度优先搜索、广度优先搜索

邻接矩阵 邻接矩阵是一种使用二维数组来表示图的方法。矩阵中的元素表示节点之间是否存在边。如果存在边&#xff0c;则对应的矩阵元素为1&#xff08;或边的权重&#xff09;&#xff1b;否则为0。 特点&#xff1a; 空间复杂度高&#xff1a;无论图是否稀疏&#xff0c;邻…

前端Canvas入门——一些注意事项

创建渐变的三种方法&#xff1a; createLinearGradient() - 线性渐变 createRadialGradient() - 径向渐变&#xff08;放射性渐变&#xff09; createConicGradient() - 锥形渐变 这三种的核心观点都是&#xff1a; 创建一个gradient对象&#xff0c;然后调用addColorStop()方法…

【java】力扣 合并两个有序链表

文章目录 题目描述题目链接思路代码 题目描述 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 题目链接 21. 合并两个有序链表 思路 先定义一个哨兵节点dummy&#xff0c;为了方便解题 然后定义一个节点pre&#xff0…

paddlepaddle2.6,paddleorc2.8,cuda12,cudnn,nccl,python10环境

1.安装英伟达显卡驱动 首先需要到NAVIDIA官网去查自己的电脑是不是支持GPU运算。 网址是&#xff1a;CUDA GPUs | NVIDIA Developer。打开后的界面大致如下&#xff0c;只要里边有对应的型号就可以用GPU运算&#xff0c;并且每一款设备都列出来相关的计算能力&#xff08;Compu…

为二进制文件添加.gnu_debugdata调试信息

前言 在使用gcc/g编译二进制文件过程中&#xff0c;如果添加了-g参数&#xff0c;编译出来的二进制文件会带有debug信息&#xff0c;供调试使用。但是debug信息往往占用空间很大&#xff0c;导致二进制文件太大&#xff0c;在发布到生产环境时&#xff0c;一般会去掉调试信息&…

(南京观海微电子)——电容应用及选取

什么是电容器&#xff1f; 电容器是一种在内部电场中储存能量的电子器件。它与电阻器、电感器一样&#xff0c;都是基本的无源电子元件。所有电容器都具有相同的基本结构&#xff0c;两块导电极板中间由绝缘体隔开&#xff0c;该绝缘体称为电介质&#xff0c;可在施加电场后发…

时间轮算法理解、Kafka实现

概述 TimingWheel&#xff0c;时间轮&#xff0c;简单理解就是一种用来存储若干个定时任务的环状队列&#xff08;或数组&#xff09;&#xff0c;工作原理和钟表的表盘类似。 关于环形队列&#xff0c;请参考环形队列。 时间轮由两个部分组成&#xff0c;一个环状数组&…

一文了解MySQL的表级锁

文章目录 ☃️概述☃️表级锁❄️❄️介绍❄️❄️表锁❄️❄️元数据锁❄️❄️意向锁⛷️⛷️⛷️ 介绍 ☃️概述 锁是计算机协调多个进程或线程并发访问某一资源的机制。在数据库中&#xff0c;除传统的计算资源&#xff08;CPU、RAM、I/O&#xff09;的争用以外&#xff0…

Coze:如何使用团队空间?

你好&#xff0c;我是三桥君 团队空间&#xff0c;是一个允许我们组建团队并共享机器人、插件等资源的功能。 好的&#xff0c;让我们开始创建一个团队。我们将这个团队命名为“三桥君AI”&#xff0c;并在描述中也填写“这里是关于“三桥君AI”团队的描述”。点击确定后&…

VMware_centos8安装

目录 VMware Workstation Pro的安装 安装centos VMware Workstation Pro的安装 正版VMware 17百度网盘下载链接 (含秘钥) 链接&#xff1a;https://pan.baidu.com/s/16zB-7IAACM_1hwR1nsk12g?pwd1111 提取码&#xff1a;1111 第一次运行会要求输入秘钥 秘钥在上边的百度网盘…

【CUDA|CUDNN】安装

every blog every motto: You can do more than you think. https://blog.csdn.net/weixin_39190382?typeblog 0. 前言 显卡驱动安装参考之前的文章 cuda、cudnn 安装 1. cuda 安装 访问https://developer.nvidia.com/cuda-toolkit-archive 选择需要的版本&#xff1a;h…

Selenium使用注意事项:

find_element 和 find_elements 的区别 WebDriver和WebElement的区别 问题&#xff1a; 会遇到报错&#xff1a; selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element: {"method":"css selector",&…