el-table vue3统计计算数字

固定合计在最下列

父组件

<template><el-tablev-loading="loading"tooltip-effect="light":data="list"style="width: 100%":max-height="maxHeight"element-loading-text="拼命加载中...":header-cell-style="{backgroundColor: '#d3d7e3',color: '#303030',}"><!-- 此处省略 --></el-table><!-- 合计固定最下面 --><div v-if="sum.length !== 0" style="height: calc(100vh - 320px); padding-top: 11px"><tables :sum="sum"></tables></div>
</template>
<script lang="ts" setup>
const sum = ref<any>([])
const list = ref<any>([])
const loading = ref(false)
onMounted(() => {createdTable()
})
const createdTable = () => {sum.value = []loading.value = truelist.value = [{num1: 0,num2: 0,id: '001',num3: 0,num4: 0,num5: 0,num6: 0,nonum6: 2,name: 'y杨妮',num7: 0,num8: 2,taskObjectivesLoading: false,},{num1: 0,num2: 0,id: '002',num3: 0,num4: 0,num5: 0,num6: 0,nonum6: 1,name: '乌鸦你',num7: 0,num8: 1,taskObjectivesLoading: false,},{num1: 1,num2: 0,id: '00G01',num3: 0,num4: 0,num5: 0,num6: 0,nonum6: 1,name: '菜百',num7: 0,num8: 1,taskObjectivesLoading: false,},]if (list.value.length !== 0) {const sums = reactive({num8: 0,num6: 0,nonum6: 0,num1: 0,num4: 0,num2: 0,num3: 0,num7: 0,num5: 0,name: '合计',})list.value.forEach((item: any) => {sums.num8 += item.num8sums.num6 += item.num6sums.nonum6 += item.nonum6sums.num1 += item.num1sums.num4 += item.num4sums.num2 += item.num2sums.num3 += item.num3sums.num7 += item.num7sums.num5 += item.num5})sum.value = [sums]}loading.value = false
}
</script>

子组件

<template><el-tabletooltip-effect="light":data="props.sum"style="width: 100%":show-header="false":row-style="getRowStyle":highlight-current-row="false"class="table-style"><!-- 此处省略 --></el-table>
</template>
<script lang="ts" setup>
const props = defineProps({sum: {type: Array,},
})
const getRowStyle = (row: any) => {const v = rowif (v.rowIndex === 0) {return {backgroundColor: '#f5f7fa',}}
}
</script>
<style scoped>
.el-table tr {background: #d3d7e3 !important;
}
::v-deep .el-table__row:hover {background: rgba(14, 95, 255, 0.5) !important;
}::v-deep.el-table .el-table__row:hover {background-color: inherit !important;
}
.table-color .el-table__body .el-table__row.hover-row td {background-color: #eec591 !important;
}
</style>

数据

const ui = [{num1: 0,num2: 0,id: '001',num3: 0,num4: 0,num9: 0,num6: 0,nonum6: 2,name: '兔鳄',num7: 0,num10: 2,taskObjectivesLoading: false,},{num1: 0,num2: 0,id: '002',num3: 0,num4: 0,num9: 0,num6: 0,nonum6: 1,name: '以恶',num7: 0,num10: 1,taskObjectivesLoading: false,},{num1: 1,num2: 0,id: '00G01',num3: 0,num4: 0,num9: 0,num6: 0,nonum6: 1,name: '后世',num7: 0,num10: 1,taskObjectivesLoading: false,},
]
计算num10,num6,nonum6,num1,num4,num2,num3,num7,num9// 初始化总和对象
const sums = {num10: 0,num6: 0,nonum6: 0,num1: 0,num4: 0,num2: 0,num3: 0,num7: 0,num9: 0,
};// 遍历数组并累加每个字段的值
ui.forEach(item => {sums.num10 += item.num10;sums.num6 += item.num6;sums.nonum6 += item.nonum6;sums.num1 += item.num1;sums.num4 += item.num4;sums.num2 += item.num2;sums.num3 += item.num3;sums.num7 += item.num7;sums.num9 += item.num9;
});// 输出总和
console.log(sums);

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

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

相关文章

【大数据学习 | Spark-Core】详解分区个数

RDD默认带有分区的&#xff0c;那么创建完毕rdd以后他的分区数量是多少&#xff1f; 从hdfs读取文件的方式是最正规的方式&#xff0c;我们通过计算原理可以推出blk的个数和分区数量是一致的&#xff0c;本地化计算。 我们可以发现数据的读取使用的是textInputFormat&#xff…

Mysql的加锁情况详解

最近在复习mysql的知识点&#xff0c;像索引、优化、主从复制这些很容易就激活了脑海里尘封的知识&#xff0c;但是在mysql锁的这一块真的是忘的一干二净&#xff0c;一点映像都没有&#xff0c;感觉也有点太难理解了&#xff0c;但是还是想把这块给啃下来&#xff0c;于是想通…

Java基础-Java多线程机制

(创作不易&#xff0c;感谢有你&#xff0c;你的支持&#xff0c;就是我前行的最大动力&#xff0c;如果看完对你有帮助&#xff0c;请留下您的足迹&#xff09; 目录 一、引言 二、多线程的基本概念 1. 线程与进程 2. 多线程与并发 3. 多线程的优势 三、Java多线程的实…

【LeetCode面试150】——202快乐数

博客昵称&#xff1a;沈小农学编程 作者简介&#xff1a;一名在读硕士&#xff0c;定期更新相关算法面试题&#xff0c;欢迎关注小弟&#xff01; PS&#xff1a;哈喽&#xff01;各位CSDN的uu们&#xff0c;我是你的小弟沈小农&#xff0c;希望我的文章能帮助到你。欢迎大家在…

详细教程-Linux上安装单机版的Hadoop

1、上传Hadoop安装包至linux并解压 tar -zxvf hadoop-2.6.0-cdh5.15.2.tar.gz 安装包&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1u59OLTJctKmm9YVWr_F-Cg 提取码&#xff1a;0pfj 2、配置免密码登录 生成秘钥&#xff1a; ssh-keygen -t rsa -P 将秘钥写入认…

Python 获取微博用户信息及作品(完整版)

在当今的社交媒体时代&#xff0c;微博作为一个热门的社交平台&#xff0c;蕴含着海量的用户信息和丰富多样的内容。今天&#xff0c;我将带大家深入了解一段 Python 代码&#xff0c;它能够帮助我们获取微博用户的基本信息以及下载其微博中的相关素材&#xff0c;比如图片等。…

07-SpringCloud-Gateway新一代网关

一、概述 1、Gateway介绍 官网&#xff1a;https://spring.io/projects/spring-cloud-gateway Spring Cloud Gateway组件的核心是一系列的过滤器&#xff0c;通过这些过滤器可以将客户端发送的请求转发(路由)到对应的微服务。 Spring Cloud Gateway是加在整个微服务最前沿的防…

MyBatis基本使用

一、向SQL语句传参: 1.MyBatis日志输出配置: mybatis配置文件设计标签和顶层结构如下: 可以在mybatis的配置文件使用settings标签设置&#xff0c;输出运过程SQL日志,通过查看日志&#xff0c;可以判定#{}和${}的输出效果 settings设置项: logImpl指定 MyBatis 所用日志的具…

实验二 系统响应及系统稳定性

实验目的 &#xff08;1&#xff09;学会运用Matlab 求解离散时间系统的零状态响应&#xff1b; &#xff08;2&#xff09;学会运用Matlab 求解离散时间系统的单位取样响应&#xff1b; &#xff08;3&#xff09;学会运用Matlab 求解离散时间系统的卷积和。 实验原理及实…

秋招面试基础总结,Java八股文基础(串联知识),四万字大全

目录 值传递和引用传递 静态变量和静态代码块的执行顺序 Java​​​​​​​集合的框架&#xff0c;Set,HashSet,LinkedHashSet这三个底层是什么 多线程篇 Java实现多线程的方式 假设一个线程池&#xff0c;核心线程数是2&#xff0c;最大线程数是3&#xff0c;阻塞队列是4…

C# 数据结构之【图】C#图

1. 图的概念 图是一种重要的数据结构&#xff0c;用于表示节点&#xff08;顶点&#xff09;之间的关系。图由一组顶点和连接这些顶点的边组成。图可以是有向的&#xff08;边有方向&#xff09;或无向的&#xff08;边没有方向&#xff09;&#xff0c;可以是加权的&#xff…

如何在WPF中嵌入其它程序

在WPF中嵌入其它程序&#xff0c;这里提供两种方案 一、使用WindowsFormHost 使用步骤如下 1、添加WindowsFormsIntegration和System.Windows.Forms引用 2、在界面上放置WindowsFormHost和System.Windows.Forms.Panel 1 <Grid> 2 <WindowsFormsHost> 3…

丹摩|丹摩智算平台深度评测

1. 丹摩智算平台介绍 随着人工智能和大数据技术的快速发展&#xff0c;越来越多的智能计算平台涌现&#xff0c;为科研工作者和开发者提供高性能计算资源。丹摩智算平台作为其中的一员&#xff0c;定位于智能计算服务的提供者&#xff0c;支持从数据处理到模型训练的全流程操作…

[pdf,epub]162页《分析模式》漫谈合集01-35提供下载

《分析模式》漫谈合集01-35的pdf、epub文件&#xff0c;已上传至本号的CSDN资源。 如果CSDN资源下载有问题&#xff0c;可到umlchina.com/url/ap.html。 已排版成适合手机阅读&#xff0c;pdf的排版更好一些。 ★UMLChina为什么叒要翻译《分析模式》&#xff1f; ★[缝合故事…

Charles抓包工具-笔记

摘要 概念&#xff1a; Charles是一款基于 HTTP 协议的代理服务器&#xff0c;通过成为电脑或者浏览器的代理&#xff0c;然后截取请求和请求结果来达到分析抓包的目的。 功能&#xff1a; Charles 是一个功能全面的抓包工具&#xff0c;适用于各种网络调试和优化场景。 它…

C语言练习.if.else语句.strstr

今天在做题之前&#xff0c;先介绍一下&#xff0c;新学到的库函数strstr 想要使用它&#xff0c;要先给它一个头文件<string.h> char *strstr(const char*str1,const char*str2); 首先&#xff1a;1.strstr的返回值是char&#xff0c;字符类型的。 2.两个实参&#xff…

WebRTC音视频同步原理与实现详解(上)

第一章、RTP时间戳与NTP时间戳 1.1 RTP时间戳 时间戳&#xff0c;用来定义媒体负载数据的采样时刻&#xff0c;从单调线性递增的时钟中获取&#xff0c;时钟的精度由 RTP 负载数据的采样频率决定。 音频和视频的采样频率是不一样的&#xff0c;一般音频的采样频率有 8KHz、…

uni-app 发布媒介功能(自由选择媒介类型的内容) 设计

1.首先明确需求 我想做一个可以选择媒介的内容&#xff0c;来进行发布媒介的功能 &#xff08;媒介包含&#xff1a;图片、文本、视频&#xff09; 2.原型设计 发布-编辑界面 通过点击下方的加号&#xff0c;可以自由选择添加的媒介类型 但是因为预览中无法看到视频的效果&…

详细探索xinput1_3.dll:功能、问题与xinput1_3.dll丢失的解决方案

本文旨在深入探讨xinput1_3.dll这一动态链接库文件。首先介绍其在计算机系统中的功能和作用&#xff0c;特别是在游戏和输入设备交互方面的重要性。然后分析在使用过程中可能出现的诸如文件丢失、版本不兼容等问题&#xff0c;并提出相应的解决方案&#xff0c;包括重新安装相关…

Ubuntu,openEuler,MySql安装

文章目录 Ubuntu什么是Ubuntu概述Ubuntu版本简介桌面版服务器版 部署系统新建虚拟机安装系统部署后的设置设置root密码关闭防火墙启用允许root进行ssh安装所需软件制作快照 网络配置Netplan概述配置详解配置文件DHCP静态IP设置 软件安装方法apt安装软件作用常用命令配置apt源 d…