el-table合计行更新问题

news2024/11/15 11:19:20

说明:在使用el-table自带的底部合计功能时,初始界面不会显示合计内容

解决方案:使用 doLayout()方法

updated() {
		this.$nextTick(() => {
			this.$refs['inventorySumTable'].doLayout();
		});
	},

完整代码:

 // show-summary:展示合计行
 // summary-method:自定义合计方法
 // ref="inventorySumTable":绑定表格
            <el-table
				border
				height="100%"
				:data="tableList"
				v-loading="tableLoading"
				show-summary
				:summary-method="getSummaries"
				ref="inventorySumTable"
				:cell-style="changeCellStyle"
			>
				<el-table-column
					label="序号"
					prop="index"
					type="index"
					width="55"
					align="center"
					header-align="center"
				></el-table-column>
				<el-table-column
					label="使用单位(科室)"
					prop="useDept"
					align="center"
					header-align="center"
					show-overflow-tooltip
				></el-table-column>
				<el-table-column
					label="资产分类"
					prop="typeName"
					align="center"
					header-align="center"
					show-overflow-tooltip
				>
				</el-table-column>
				<el-table-column
					label="折旧合计"
					prop="sumDepreciation"
					align="center"
					header-align="center"
					show-overflow-tooltip
				></el-table-column>
			</el-table>



//定义合计的方法
        getSummaries(param) {
			const { columns, data } = param;
			const sums = [];
			columns.forEach((column, index) => {
				if (index === 0) {
					sums[index] = '合计';
					return;
				}
				const values = data.map(item => Number(item[column.property]));
				if (
					!values.every(value => {
						return isNaN(value);
					})
				) {
					console.log(sums, column.property, 226);
					if (column.property == 'sumDepreciation') {
						sums[index] = values.reduce((prev, curr) => {
							const value = Number(curr);
							if (!isNaN(value)) {
								return prev + curr;
							} else {
								return prev;
							}
						}, 0);
					}
					if (column.property == 'sumDepreciation') {
						return (sums[index] = this.formatePrice(sums[index]));
					}
				} else {
					sums[index] = '';
				}
			});

			return sums;
		},

效果展示:
在这里插入图片描述

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

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

相关文章

【PyTorch】图像多分类项目部署

【PyTorch】图像多分类项目 【PyTorch】图像多分类项目部署 如果需要在独立于训练脚本的新脚本中部署模型&#xff0c;这种情况模型和权重在内存中不存在&#xff0c;因此需要构造一个模型类的对象&#xff0c;然后将存储的权重加载到模型中。 加载模型参数&#xff0c;验证模型…

人工智能与机器学习原理精解【6】

文章目录 数值优化基础理论凹凸性定义在国外与国内存在不同国内定义国外定义总结示例与说明注意事项 国内凹凸性二阶定义的例子凹函数例子凸函数例子 凸函数&#xff08;convex function&#xff09;的开口方向凸函数的二阶导数凸函数的二阶定义单变量函数的二阶定义多变量函数…

设计模式第三天|设计模式结构型:适配器模式、装饰器模式、代理模式

文章目录 设计模式的分类适配器模式概念俗话说角色具体应用(Spring MVC)图解具体步骤 装饰器模式定义核心俗话说类名表现图解具体构造代码实现简化优点缺点 代理模式(Spring AOP 面向切面)定义俗话说角色代理模式分类静态代理角色代码好处缺点实用 动态代理 AOP什么是AOP具体信…

BFF:优化前后端协作设计模式

BFF&#xff1a;优化前后端协作设计模式 BFF是什么 BFF即 Backends For Frontends (服务于前端的后端)。是一种介于前端和后端之间一种重要的通信设计模式。它旨在解决前端与后端协作中的复杂性问题。 背景 行业背景&#xff1a;传统前端应用&#xff08;如Web应用、移动应…

《深入探秘Java中的枚举:掌握Enum的魔力》

目录 &#x1f4dd; 枚举枚举的定义枚举的使用1、表示一组固定常量2、实现接口3、枚举与策略模式4、EnumSet5、EnumMap &#x1f4ce; 参考文章 &#x1f600; 准备好了吗&#xff1f;让我们一起步入这座Java神奇的城堡&#xff0c;探寻枚举&#xff08;Enum&#xff09;这个强…

Ubuntu 修改源地址

注意事项&#xff1a;版本说明&#xff01;&#xff01;&#xff01; Ubuntu24.04的源地址配置文件发生改变。 不再使用以前的 sources.list 文件&#xff0c;该文件内容变成了一行注释&#xff1a; # Ubuntu sources have moved to /etc/apt/sources.list.d/ubuntu.sources…

STM32-FreeRTOS快速学习

定义 FreeRTOS 满足实施系统对任务响应时间的要求。 实时操作系统、轻量级&#xff08;内核小&#xff0c;只需要几KB的ROM和RAM&#xff09;、 提供了一些内核功能&#xff0c;如任务管理、时间管理、内存管理和通信机制等。 和裸机的区别 裸机&#xff1a;无操作系统&…

产品系统的UI暗色系和浅色系模式切换是符合人体视觉工程学的设计

视觉革命&#xff1a;UI设计中的暗夜与黎明 UI设计如同夜空中最亮的星辰&#xff0c;引领着用户穿梭于信息的海洋。而今&#xff0c;一场视觉革命正在悄然上演&#xff0c;它关乎于我们的眼睛&#xff0c;关乎于我们的体验——那就是产品系统的UI暗色系和浅色系模式的切换。如…

【机器学习】Jupyter Notebook如何使用之基本步骤和进阶操作

引言 Jupyter Notebook 是一个交互式计算环境&#xff0c;它允许创建包含代码、文本和可视化内容的文档 文章目录 引言一、基本步骤1.1 启动 Jupyter Notebook1.2 使用 Jupyter Notebook 仪表板1.3 在笔记本中工作1.4 常用快捷键1.5 导出和分享笔记本 二、进阶用法2.1 组织笔…

Excel超级处理器,工作簿文件.xls/.xlsx/.csv相互批量转换

如何将.xlsx文件转成.csv文件&#xff0c;.xls转换成.xlsx文件&#xff0c;以及.xls文件转成.csv文件或.csv转换成.xlsx文件&#xff0c;如果是单个文件转换&#xff0c;那么将当前文件另存为&#xff0c;保存类型&#xff0c;选择即可。如下图所示&#xff1a; 如果是多个文件…

【AutoDL】AutoDL+Xftp+Xshell+VSCode配合使用教程

身边没有显卡资源或不足以训练模型时&#xff0c;可以租赁服务器的显卡。 1、AutoDL Step :注册账号->选择显卡->选择环境->开机启动 1.1 首先打开AutoDL官网&#xff0c;注册账号 1.2 租赁自己想要的显卡资源 1.3 选择基础环境。 此处&#xff0c;我们让其自动配置…

[网络通信原理]——TCP/IP模型—网络层

网络层 网络层概述 网络层位于OSI模型的第三层&#xff0c;它定义网络设备的逻辑地址&#xff0c;也就是我们说的IP地址&#xff0c;能够在不同的网段之间选择最佳数据转发路径。在网络层中有许多协议&#xff0c;其中主要的协议是IP协议。 IP数据包格式 IP数据报是可变长度…

Linux服务器配置Python+PyTorch+CUDA深度学习环境

参考博主Linux服务器配置PythonPyTorchCUDA深度学习环境_linux cuda环境配置-CSDN博客 https://blog.csdn.net/NSJim/article/details/115386936?ops_request_misc&request_id&biz_id102&utm_termlinux%E8%99%9A%E6%8B%9F%E7%8E%AF%E5%A2%83%E6%8C%89pytorch%20c…

微信答题小程序产品研发-需求分析与原型设计

欲知应候何时节&#xff0c;六月初迎大暑风。 我前面说过&#xff0c;我决意仿一款答题小程序&#xff0c;所以我做了大量的调研。 题库软件产品开发不仅仅是写代码这一环&#xff0c;它包含从需求调研、分析与构思、设计到开发、测试再到部署上线一系列复杂过程。 需求分析…

子数组和为k子数组和最大

题目1&#xff1a;子数组和为k /*给你一个整数数组 nums 和一个整数 k &#xff0c;请你统计并返回 该数组中和为 k 的子数组的个数 。子数组是数组中元素的连续非空序列。示例 1&#xff1a;输入&#xff1a;nums [1,1,1], k 2 输出&#xff1a;2 示例 2&#xff1a;输入&a…

微软蓝屏事件对企业数字化转型有什么影响?

引言&#xff1a;从北京时间2024年7月19日&#xff08;周五&#xff09;下午2点多开始&#xff0c;全球大量Windows用户出现电脑崩溃、蓝屏死机、无法重启等情况。事发后&#xff0c;网络安全公司CrowdStrike称&#xff0c;收到大量关于Windows电脑出现蓝屏报告&#xff0c;公司…

make2exe:自动集成测试

模板Makefile&#xff0c;生成多个C/C模块的集成测试程序。

算法学习day19

一、通过删除字母匹配到字符字典中的最大值 给你一个字符串 s 和一个字符串数组 dictionary &#xff0c;找出并返回 dictionary 中最长的字符串&#xff0c;该字符串可以通过删除 s 中的某些字符得到。 如果答案不止一个&#xff0c;返回长度最长且字母序最小的字符串。如果…

花几千上万学习Java,真没必要!(二十六)

1、成员内部类&#xff1a; package internalclass.com; //在Java中&#xff0c;成员内部类&#xff08;也称为非静态内部类&#xff09;是定义在另一个类&#xff08;外部类&#xff09;内部的类。 //成员内部类可以访问外部类的所有成员&#xff08;包括私有成员&#xff09…

【计算机网络】网络层——IPv4地址(个人笔记)

学习日期&#xff1a;2024.7.24 内容摘要&#xff1a;IPv4地址&#xff0c;分类编址&#xff0c;子网&#xff0c;无分类编址 IPv4地址概述 在TCP/IP体系中&#xff0c;IP地址是一个最基本的概念&#xff0c;IPv4地址就是给因特网上的每一台主机的每一个接口分配一个在全世界…