el-table vue3统计计算数字

devtools/2024/11/25 6:20:37/

固定合计在最下列

父组件

<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.ppmy.cn/devtools/136767.html

相关文章

蓝桥杯每日真题 - 第20天

题目&#xff1a;&#xff08;机房&#xff09; 题目描述&#xff08;13届 C&CG题&#xff09; 解题思路&#xff1a; 这道题目可以看作在一个无向图中查找两点之间的最短路径。题目中的 n 台电脑和 n−1 根网线形成了一棵树&#xff0c;树是一个特殊的无向图&#xff0c…

el-select 和el-tree二次封装

前言 本文章是本人在开发过程中&#xff0c;遇到使用树形数据&#xff0c;动态单选或多选的需求&#xff0c;element中没有这种组件&#xff0c;故自己封装一个&#xff0c;欢迎多多指教 开发环境&#xff1a;element-UI、vue2 组件效果 单选 多选 组件引用 <treeselec…

C++知识整理day2类与对象(上)——类的定义、实例化、this指针、构造、析构、拷贝构造函数

文章目录 1.类的定义1.1 类定义的格式1.2 访问限定符1.3 类域 2.实例化2.2 对象大小 3.this指针4.类的默认成员函数5.构造函数6. 析构函数7.拷贝构造函数 1.类的定义 1.1 类定义的格式 class为定义类的关键字&#xff0c;Stu为类的名字&#xff0c;{}中为类的主体&#xff0c;…

C++ 编程指南06 - 不要泄漏任何资源

一&#xff1a;概述 资源泄漏是指程序在运行过程中分配了某些资源&#xff08;如内存、文件句柄、网络连接等&#xff09;&#xff0c;但未正确释放或归还&#xff0c;导致这些资源持续占用&#xff0c;无法被其他部分使用。 例如&#xff1a; 动态分配的内存未释放。打开的文…

理解设计模式与 UML 类图:构建稳健软件架构的基石

在软件开发的广阔天地里&#xff0c;设计模式与 UML&#xff08;统一建模语言&#xff09;类图犹如两座灯塔&#xff0c;为开发者照亮前行的道路&#xff0c;指引着我们构建出高质量、可维护且易于扩展的软件系统。今天&#xff0c;就让我们一同深入探索单一职责、开闭原则、简…

SouVR Feedback force7 力反馈设备

Feedback force7力反馈的末端执行器涵盖了人类手部的自然运动范围&#xff0c;设计与双手控制的操作台兼容。 全重力补偿和无漂移校准相结合有助于提高用户的舒适度和准确性&#xff0c;专为对于性能和可靠性至关重要的苛刻应用而设计。 产品的可靠性、可操作性、先进性 独特的…

读写分库分表

主数据库负责写&#xff0c;从数据库负责读&#xff0c;主库和从库间会进行数据同步&#xff0c;以保证库中数据的准确性。 读写分离&#xff08;极客时间Mysql45讲读写分离&#xff09; 如何实现&#xff1f; 步骤&#xff1a; 部署多台数据库&#xff0c;选择其中的一台作…

Perforce《2024游戏技术现状报告》Part3:生成式AI、版本控制、CI/CD等游戏技术的未来趋势与应用

游戏开发者一直处于创新前沿。他们的实践、工具和技术受到各行各业的广泛关注&#xff0c;正在改变着组织进行数字创作的方式。 近期&#xff0c;Perforce发布了《2024游戏技术现状报告》&#xff0c;通过收集来自游戏、媒体与娱乐、汽车和制造业等高增长行业的从业者、管理人…