el-table合计行更新问题

devtools/2025/1/8 8:27:23/

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

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

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

完整代码:

 // show-summary:展示合计行// summary-method:自定义合计方法// ref="inventorySumTable":绑定表格<el-tableborderheight="100%":data="tableList"v-loading="tableLoading"show-summary:summary-method="getSummaries"ref="inventorySumTable":cell-style="changeCellStyle"><el-table-columnlabel="序号"prop="index"type="index"width="55"align="center"header-align="center"></el-table-column><el-table-columnlabel="使用单位(科室)"prop="useDept"align="center"header-align="center"show-overflow-tooltip></el-table-column><el-table-columnlabel="资产分类"prop="typeName"align="center"header-align="center"show-overflow-tooltip></el-table-column><el-table-columnlabel="折旧合计"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.ppmy.cn/devtools/148479.html

相关文章

【Stable Diffusion】用AI给老照片上色,岁月不改它模样

在最近新上线的controlnet模型中&#xff0c;除了我们之前测试过的一众适配sdxl的模型以外&#xff0c;还增加了一款名为Recolor的新模型&#xff0c;它的作用是可以将黑白的图片进行重新上色。 看到这个功能&#xff0c;我首先想到的就是可以用它来修复那些已经年代久远的老照…

计算机网络——数据链路层-功能、组帧和差错控制

一、数据链路层 数据链路层传送的是帧 数据链路层的功能&#xff1a; 提供给网络层服务组帧、帧同步与透明传输差错控制流量控制可靠传输机制链路管理 二、组帧 组帧的关键问题是能够让接收端在接收到物理层上交的比特流后&#xff0c; 就可以根据首部和尾部的标记&#xff…

[Qt] 万字详解 | 常用控件 | Button | Label | LCD | ProgressBar

目录 按钮类控件 1、Push Button 按钮 2、Radio Buttion 单选 click、press、release、toggled 的区别 3、Check Box 复选 4、Tool Button 显示类控件 1、Label 2、LCD Number 3、ProgressBar 4、Calendar Widget 按钮类控件 1、Push Button 按钮 概述&#xff1a…

安卓漏洞学习(十八):Android加固基本原理

APP加固技术发展历程 APK加固整体思路 加固整体思路&#xff1a;先解压apk文件&#xff0c;取出dex文件&#xff0c;对dex文件进行加密&#xff0c;然后组合壳中的dex文件&#xff08;Android类加载机制&#xff09;&#xff0c;结合之前的apk资源&#xff08;解压apk除dex以外…

[CTF/网络安全] 攻防世界 PHP2 解题详析

翻译&#xff1a;你能给这个网站进行身份验证吗&#xff1f; index.php index.php是一个常见的文件名&#xff0c;通常用于Web服务器中的网站根目录下。它是默认的主页文件名&#xff0c;在访问一个网站时&#xff0c;如果没有特别指定页面文件名&#xff0c;则服务器会自动加…

U盘提示格式化?原因、恢复方案与预防措施全解析

一、U盘提示格式化现象概述 在日常使用U盘的过程中&#xff0c;我们有时会遇到一个令人头疼的问题——U盘插入电脑后&#xff0c;系统却弹出一个提示框&#xff0c;告知我们U盘需要格式化才能访问。这个提示往往伴随着数据的潜在丢失风险&#xff0c;让我们不禁为之心焦。U盘提…

Oracle删除归档日志

Oracle删除归档日志 1.运行环境2.检查数据库的归档配置3.使用RMAN删除归档文件4.归档状态不匹配 1.运行环境 操作系统&#xff1a;Windows Server 2019  Oracle版本&#xff1a;11gr2&#xff0c;即11.2 2.检查数据库的归档配置 打开CMD或POWERSHELL(win键R键后输入对应名称)…

掌握机器学习与MySQL集成实战Ruby和JavaScript辅助Redis缓存策略

掌握机器学习与MySQL集成实战Ruby和JavaScript辅助Redis缓存策略 文章导读 本文将深入探讨掌握机器学习与MySQL集成实战Ruby和JavaScript辅助Redis缓存策略的技术实践和创新方法。 掌握机器学习与MySQL集成实战&#xff1a;利用Ruby和JavaScript辅助Redis缓存策略 引言 随…