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

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);

相关文章:

el-table vue3统计计算数字

固定合计在最下列 父组件 <template><el-tablev-loading"loading"tooltip-effect"light":data"list"style"width: 100%":max-height"maxHeight"element-loading-text"拼命加载中...":header-cell-styl…...

IDE应当具备的功能

IDE 是辅助编程的工具&#xff0c;应当具备以下功能 语法高亮 显示注释 显示光键词 显示括号 matlab 自带的 IDE 没有这个功能 显示缩进 matlab 自带的 IDE 没有这个功能 显示字符串 显示数字常量 定位到函数的定义位置 Matlab 自带的集成开发环境&#xff08;IDE&am…...

Stable Diffusion初步见解(二)

Stable Diffusion 是一种先进的深度学习模型&#xff0c;用于生成高质量的图像和艺术作品。它基于扩散模型&#xff08;Diffusion Models&#xff09;&#xff0c;并结合了潜在扩散模型&#xff08;Latent Diffusion Models&#xff09;以及条件生成技术&#xff08;如文本到图…...

前端框架 react 性能优化

目录 一、不使用任何性能优化API进行优化 二、通过性能优化API优化 1、React.memo 2、useCallback 3、useMemo 4、PureComponent 三、总结​ 总览&#xff1a;react的优化核心思想就是让react跳过重新渲染那个些没有改变的Component&#xff0c;而只重新渲染发生变化的C…...

RK3568平台开发系列讲解(Input子系统篇)输入子系统介绍

🚀返回专栏总目录 文章目录 一、什么是输入子系统?二、输入设备和节点的关系沉淀、分享、成长,让自己和他人都能有所收获!😄 一、什么是输入子系统? 在 Linux 中,input 子系统是专门为处理输入类设备而设计的一个子系统或框架。它提供 了一套通用的接口和机制,用于驱…...

准备阶段 Profiler性能分析工具的使用(一)

Unity 性能分析器 (Unity Profiler) 性能分析器记录应用程序性能的多个方面并显示相关信息。使用此信息可以做出有关应用程序中可能需要优化的事项的明智决策&#xff0c;并确认所做的优化是否产生预期结果。 默认情况下&#xff0c;性能分析器记录并保留游戏的最后 300 帧&a…...

go-rod vs Selenium:自动化测试工具的比较与选择

自动化测试是软件开发过程中的关键环节&#xff0c;它能够帮助我们发现缺陷、验证功能并提高软件质量。随着Web技术的快速发展&#xff0c;市场上出现了多种自动化测试工具&#xff0c;其中Selenium和go-rod是两个备受关注的选择。本文将从多个维度对这两个工具进行比较&#x…...

探索免费的Figma中文版:开启高效设计之旅

在当今数字化设计的浪潮中&#xff0c;Figma以其强大的云端协作功能和出色的设计能力&#xff0c;成为了众多设计师的心头好。而对于国内的设计师来说&#xff0c;能够免费使用Figma中文版更是一大福音&#xff0c;下面就来一起探索一下吧。 一、Figma中文版的获取途径 虽然F…...

功能齐全,支持协作 | Docker部署一款支持多人共享的私密浏览器『n.eko』

功能齐全&#xff0c;支持协作 | Docker部署一款支持多人共享的私密浏览器『n.eko』 哈喽小伙伴们好&#xff0c;我是Stark-C~ 玩NAS的朋友基本都会在本地部署一款浏览器用来远程访问内网的网络设备&#xff0c;或者偶尔拿来浏览一些私密网站都是很方便的。 今天为大家分享的…...

部署实战(二)--修改jar中的文件并重新打包成jar文件

一.jar文件 JAR 文件就是 Java Archive &#xff08; Java 档案文件&#xff09;&#xff0c;它是 Java 的一种文档格式JAR 文件与 ZIP 文件唯一的区别就是在 JAR 文件的内容中&#xff0c;多出了一个META-INF/MANIFEST.MF 文件META-INF/MANIFEST.MF 文件在生成 JAR 文件的时候…...

Ubuntu24.04——软件包系统已损坏

如果你在使用 Ubuntu 时遇到“软件包系统已损坏”的问题&#xff0c;可以尝试以下步骤来修复它&#xff1a; 更新软件包列表&#xff1a; 打开终端&#xff0c;运行以下命令以更新软件包列表&#xff1a; sudo apt update修复损坏的软件包&#xff1a; 运行以下命令来修复损坏的…...

2024年华为OD机试真题-空栈压数-C++-OD统一考试(E卷)

最新华为OD机试考点合集:华为OD机试2024年真题题库(E卷+D卷+C卷)_华为od机试题库-CSDN博客 每一题都含有详细的解题思路和代码注释,精编c++、JAVA、Python三种语言解法。帮助每一位考生轻松、高效刷题。订阅后永久可看,发现新题及时跟新。 题目描述: 向一个空栈压入…...

嵌入式Linux基于IMX6ULL tslib学习总结

目录 1. tslib开源库介绍1.1 tslib主要功能1.2 架构 2. tslib代码简单分析2.1 ts_print_mt.c分析代码2.2 ts_setup代码分析2.3 ts_open代码分析2.4 ts_config代码分析2.5 ts_read_mt代码分析2.6 tslib中4个模块的含义 3. 使用tslib库打印触摸屏2点之间的距离 基于韦东山IMX6ULL…...

go中的参数传递是值传递还是引用传递?

在Go语言中&#xff0c;参数传递机制是一个重要的概念&#xff0c;它决定了函数内部对参数的修改是否会影响到原始数据。关于Go中的参数传递是值传递还是引用传递的问题&#xff0c;可以从以下几个方面进行解答。 一、值传递与引用传递的定义 值传递&#xff1a;在值传递中&a…...

记录一种在内核空间向用户空间通知中断的方法

记录一种在内核空间向用户空间通知中断的方法 0.前言1.代码实现1)内核设备驱动实现2)消息通知实现3)测试程序 2.解析 参考文章&#xff1a;Linux驱动实践&#xff1a;中断处理函数如何【发送信号】给应用层&#xff1f; 0.前言 最近在项目中遇到一个需求&#xff0c;需要将一个…...

.NetCore 过滤器和拦截器 的区别

Asp.NET Core 中的过滤器&#xff08;Filter&#xff09;和拦截器&#xff08;Interceptor&#xff09;是两个不同的概念&#xff0c;但它们在某些方面有相似之处&#xff0c;也有明显的区别。 &#x1f511;过滤器&#xff08;Filter&#xff09; 过滤器是Asp.NET Core中用于…...

【笔记】自动驾驶预测与决策规划_Part7_数据驱动的预测方法

文章目录 0. 前言1. 多模态传感器的编码方式1.1 栅格化表示1.2 向量化表示 Vectornet1.3 基于点云或者多模态输入的预测1.4 基于Transformer的方法 2. 网络输出的表达形式2.1 多模态轨迹回归2.2 轨迹分类2.3 轨迹回归轨迹分类2.4 目标点预测 3.场景级别的预测和决策3.1 论文&am…...

React渲染相关内容——渲染流程API、Fragment、渲染相关底层API

React渲染过程依次遇到的函数 在React的渲染流程中&#xff0c;从组件的创建到其UI最终呈现到屏幕上&#xff0c;会经历一系列的生命周期方法和函数。这些方法和函数对于类组件&#xff08;Class Components&#xff09;和函数组件&#xff08;Function Components&#xff09…...

Python中dict支持多个key的方法

在Python中&#xff0c;字典&#xff08;dict&#xff09;是一种非常强大的数据结构&#xff0c;它允许我们通过键&#xff08;key&#xff09;来存储和检索值&#xff08;value&#xff09;。有时候&#xff0c;我们可能想要根据多个键来检索或操作字典中的数据。虽然Python的…...

丹摩 | 基于PyTorch的CIFAR-10图像分类实现

从创建实例开始的新项目流程 第一步&#xff1a;创建实例 登录 DAMODEL 平台。创建一个 GPU 实例&#xff1a; GPU 配置&#xff1a;选择 NVIDIA H800 或其他可用高性能 GPU。 系统配置&#xff1a;推荐使用 Ubuntu 20.04&#xff0c;内存 16GB&#xff0c;硬盘 50GB。 启…...

【AI+实战】零基础部署私人ChatGPT网站:从NextChat到功能定制

1. 为什么你需要一个私人ChatGPT网站&#xff1f; 最近两年AI对话机器人的火爆程度&#xff0c;相信大家都有目共睹。但你是否遇到过这些问题&#xff1a;公共平台经常排队、担心隐私泄露、或者想要定制专属功能&#xff1f;这就是为什么越来越多的个人和小团队开始搭建自己的C…...

AI驱动3D骨骼绑定:从3天到3分钟的自动化革命

AI驱动3D骨骼绑定&#xff1a;从3天到3分钟的自动化革命 【免费下载链接】UniRig One Model to Rig Them All: Diverse Skeleton Rigging with UniRig 项目地址: https://gitcode.com/gh_mirrors/un/UniRig 3D骨骼绑定是动画制作流程中的关键环节&#xff0c;传统手工绑…...

Phi-3-mini-4k-instruct-gguf一文详解:从网页问答到摘要改写的全流程应用

Phi-3-mini-4k-instruct-gguf一文详解&#xff1a;从网页问答到摘要改写的全流程应用 1. 认识Phi-3-mini-4k-instruct-gguf Phi-3-mini-4k-instruct-gguf是微软Phi-3系列中的轻量级文本生成模型GGUF版本。这个模型特别适合处理问答、文本改写、摘要整理和简短创作等任务。想象…...

基于H5的初学开发

目标&#xff1a;​ 1.能搭出页面​ 2.能看懂基本标签​ 3.能做表单​ 4.能放图片、音频、视频​ 5.能做简单画布效果​ 6.能做一个 AI Photo Booth 静态演示页​ 7.每个实验做完都能看到结果&#xff0c;不容易卡死 开发工具&#xff1a;VS Cod 本实验覆盖哪些 H5 内容​ 1.h…...

THE LEATHER ARCHIVE快速体验:一键生成杂志级AI皮衣大片,小白也能当设计师

THE LEATHER ARCHIVE快速体验&#xff1a;一键生成杂志级AI皮衣大片&#xff0c;小白也能当设计师 1. 项目介绍与核心价值 想象一下&#xff0c;你不需要专业的设计技能&#xff0c;就能创造出媲美时尚杂志封面的皮衣设计作品。THE LEATHER ARCHIVE正是这样一个让创意触手可及…...

LVGL V8项目实战:手把手教你用CLion配置CMake,集成Gui Guider生成的UI文件(含避坑指南)

LVGL V8项目实战&#xff1a;CLion与CMake深度集成Gui Guider UI文件的完整指南 当你在嵌入式GUI开发中频繁往返于设计工具与代码编辑器之间时&#xff0c;是否经历过这样的困境&#xff1a;在Gui Guider中精心设计的界面&#xff0c;移植到LVGL项目后却遭遇编译错误、资源路径…...

Ostrakon-VL-8B功能体验:图文对话模型在零售场景的真实表现

Ostrakon-VL-8B功能体验&#xff1a;图文对话模型在零售场景的真实表现 1. 零售场景下的AI助手需求 在零售行业&#xff0c;每天都有大量需要人工处理的视觉任务&#xff1a;商品识别、货架检查、库存盘点、价格标签核对等。传统方法要么依赖人工检查效率低下&#xff0c;要么…...

Qwen3-Reranker-0.6B一文详解:轻量0.6B参数如何实现SOTA级重排序性能

Qwen3-Reranker-0.6B一文详解&#xff1a;轻量0.6B参数如何实现SOTA级重排序性能 1. 引言&#xff1a;为什么你需要关注这个0.6B的小模型&#xff1f; 如果你用过搜索引擎&#xff0c;肯定有过这样的体验&#xff1a;输入一个问题&#xff0c;搜出来一堆结果&#xff0c;但真…...

Kafka消费者组避坑指南:从位移提交到重平衡的实战经验

Kafka消费者组实战避坑指南&#xff1a;从位移管理到重平衡优化 在分布式消息系统中&#xff0c;Kafka消费者组的稳定性直接决定了数据处理的可靠性。我曾亲眼见证过一个电商大促场景下&#xff0c;由于消费者组配置不当导致百万级订单积压的故障。本文将分享七个关键场景的深度…...

提升开发效率:Android Studio零障碍IDE本地化配置指南

提升开发效率&#xff1a;Android Studio零障碍IDE本地化配置指南 【免费下载链接】AndroidStudioChineseLanguagePack AndroidStudio中文插件(官方修改版本&#xff09; 项目地址: https://gitcode.com/gh_mirrors/an/AndroidStudioChineseLanguagePack 开发人员在使用…...