element-plus 新增一行合计。除了用summary-method还可以用append的插槽

:summary-method="getSummaries"

<el-table:data="reformtableData"style="width: 100%"show-summary:summary-method="getSummaries"ref="reformtableRef"
>
<el-table-column label="序号" type="index" width="60" align="center">
</el-table-column>
<el-table-column prop="itemType" label="改造类型" width="130" align="center"><template #default="scope">{{ reformItemStatus.filter(rs => rs.value == scope.row.itemType)[0]?.label }}</template>
</el-table-column>
</el-table>
const getSummaries=(param)=>{const { columns, data } = param;const sums = [];columns.forEach((column, index) => {if (index === 0) {sums[index] = '合计';} else {// console.log("values",values)const values = data.map(item => Number(item.price));if (!values.every(value => isNaN(value))) {sums[index] = values.reduce((prev, curr) => {const value = Number(curr);if (!isNaN(value)) {return prev + curr;} else {return prev;}}, 0);} else {sums[index] = 'N/A';}filters.totalAmount=sums[index]}});nextTick(()=>{reformtableRef.value.doLayout(); // 重新渲染表格})return sums;
}

如果想添加一行合计本来可以按照上面的方法写的。

因为我用了summary-method他在计算最后一行的时候使用

:span-method="objectSpanMethod"

根本这一行没有算进去。找了半天没有找到原因。开始以为是没有重新渲染使用了

// nextTick(()=>{
//   reformtableRef.value.doLayout(); // 重新渲染表格
// })

也不起作用。最后想的可以使用这个append插槽。而且样式还可以自己设置加个class就行了。方便很多啊

<template #append ><span>合计</span><span>{{getAllPrice}}</span>
</template>

getAllPrice用个计算属性取值就可以了

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

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

相关文章

MyBatis查询 ▎修改 ▎删除

前言: 在现代应用开发中&#xff0c;数据库操作是核心环节。MyBatis 作为一款灵活的持久层框架&#xff0c;提供了直接编写 SQL 语句的能力&#xff0c;避免了其他 ORM 框架可能带来的性能和功能限制。MyBatis 的查询、修改和删除操作是开发者必须掌握的基本技能。这些操作不仅…

go 使用 gitlab 搭建私有化模块系统

背景 本教程旨在教大家使用私有化部署的 gitlab 作为 go 的代码共享库&#xff0c;帮助团队分离代码模块&#xff0c;加强质量管控。go 官方在实现过程中就高度结合 VCS 系统&#xff0c; 可以仅通过配置相关的环境变量就实现私有库在 VCS 上的搭建。 代码分离样例 这里直接…

虚幻5|制作玩家血量,体力(还未编辑,只用于引用)

未编写&#xff0c;仅引用 优化后&#xff1a; 把增加生命&#xff0c;减少生命&#xff0c;也可以用在体力里&#xff0c;更改如下 限制浮点&#xff0c;如果血量或体力按10来扣&#xff0c;如果你的血量降低到5&#xff0c;那么就会以5的数值来扣&#xff0c;而不会扣成-5…

JVM极简教程

基础概念 1.1. Java 虚拟机 是运行 Java字节码的虚拟机 1.2. JVM跨平台原理 JVM在不同的系统&#xff08;Linux、Windows、MacOS&#xff09;上有不同的实现&#xff0c;目的是在使用相同的字节码&#xff0c;它们都会给出相同的结果 JVM跨平台本质&#xff1a;不同操作系统…

如何满足业主多元需求?开发物业APP,打造智能社区生活

随着智能科技的快速发展&#xff0c;物业管理也逐渐迈入数字化时代。物业app开发成为了提升社区管理效率、改善居民生活质量的重要途径&#xff0c;许多物业管理公司纷纷开发物业App&#xff0c;以提升管理效率、改善用户体验。一款出色的物业APP能够整合居民需求、提升企业服务…

Mybatis进阶——动态SQL

动态SQL 是Mybatis的强大特性之一&#xff0c;能够完成不同条件下的不同SQL拼接&#xff0c;可以参考官方文档&#xff1a;动态 SQL_MyBatis中文网 xml文件内容如下&#xff1a; <?xml version"1.0" encoding"UTF-8"?> <!DOCTYPE mapper PUBLI…

uniapp/uniapp x总结

uni-app组成和跨端原理 上图所诉 App的渲染引擎&#xff1a;同时提供了2套渲染引擎&#xff0c;.vue页面文件由webview渲染&#xff0c;原理与小程序相同&#xff1b;.nvue页面文件由原生渲染&#xff0c;原理与react native相同。开发者可以根据需要自主选择渲染引擎。 uniapp…

52.给定一个整数 n,实现一个算法返回 n 皇后不同的解决方案的数量

52. N-Queens II 题目 n皇后问题是指将n个皇后放置在一个nn的棋盘上,使得任意两个皇后不在同一行、同一列或同一对角线上。 给定一个整数 n,返回 n 皇后问题不同的解法数量。 示例: 输入: 4 输出: 2 解释: 4皇后问题有如下两个不同的解法: [ [“.Q…”, // 解法 1 “……

sqli-labs靶场通关攻略(36-40关)

第36关&#xff08;宽字节注入&#xff08;Bypass MySQL Real Escape String&#xff09;&#xff09; 查数据库 ?id-1%df%27%20union%20select%202,database(),3%20-- 查表 ?id-1%df union select 1,group_concat(table_name),3 from information_schema.tables where tab…

Python青少年简明教程:列表(List)、元组(tuple)和字典(dict)

Python青少年简明教程&#xff1a;列表&#xff08;List&#xff09;、元组&#xff08;tuple&#xff09;和字典&#xff08;dict&#xff09; 在Python中&#xff0c;列表&#xff08;List&#xff09;、元组&#xff08;Tuple&#xff09;和字典&#xff08;Dict&#xff09…

Ubuntu下部署Hadoop集群+Hive(三)

Hive部署 准备环境 apache-hive-4.0.0-bin.tar.gz、mysql-connector-j-8.1.0.jar 如果是离线安装的话&#xff0c;使用mysql-8.0.34-1.el7.x86_64.rpm-bundle.tar&#xff0c;在线安装的话则不用&#xff1b; hive下载地址&#xff1a;Index of /hive (apache.org) mysql …

机械学习—零基础学习日志(如何理解概率论9)

大数定律与中心定律 来看一道习题&#xff1a; 这个题目看看&#xff0c;应该是什么呢~下一章来看看解析~ 《概率论与数理统计期末不挂科|考研零基础入门4小时完整版&#xff08;王志超&#xff09;》学习笔记 王志超老师 &#xff08;UP主&#xff09;

vue3 + ElImage + nodejs 集成了看板娘(UI原生开发达99%)的响应式BLOG(个人博客)。

一、想要我的屎山代码&#xff0c;可以私聊我哟 访问地址&#xff0c;欢迎访问&#xff08;访问效果更佳&#xff09; ☂ 被你发现了&#xff01;&#xff5c; snows_ls BLOGhttp://124.223.41.220/ 欢迎互挂友链 二、做了个啥 1、看板娘&#xff08;看效果好吧&#xff09;…

【数据结构】线性表的顺序表示(顺序表的定义和基本操作)

计算机考研408-数据结构笔记本之——第二章 线性表 2.2 线性表的顺序表示&#xff08;顺序表的定义和基本操作&#xff1a;初始化/插入/删除/查找&#xff09; 2.2.1 顺序表的定义 1.定义 顺序表是线性表的顺序存储。 所谓顺序存储&#xff0c;就是把逻辑上相邻的元素存储在物…

C++ 设计模式——享元模式

C 设计模式——享元模式 C 设计模式——享元模式1. 主要组成成分2. 享元模式内部状态3. 享元模式外部状态4. 逐步构建享元模式4.1 抽象享元类定义4.2 具体享元类实现4.3 享元工厂类实现4.4 主函数 5. 享元模式 UML 图享元模式 UML 图解析 6. 享元模式的优点7. 享元模式的缺点8.…

Linux驱动学习之中断与等待队列

本篇分为设备树部分和API接口部分 设备树 想要使用中断&#xff0c;设备树中需要有两个属性&#xff1a; interrupts // 表示要使用哪一个中断, 中断的触发类型等等。 interrupt-parent // 这个中断要接到哪一个设备去? 即父中断控制器是谁 父中…

趣味算法------拯救阿拉德大陆

目录 ​编辑 题目描述&#xff1a; 思路解析&#xff1a; 具体代码&#xff1a; 总结&#xff1a; 题目描述&#xff1a; 此时一批勇士也随之而来&#xff0c;但其能力也是参差不齐&#xff0c;我们需要挑选出最优秀的勇士来守护这片大陆。每位勇士都有属于自己的编号&am…

JobSchedulerService.setRequiresCharging需充电且电量大于90%才触发的现象

一、摘要 从源码看原生JobSchedulerService.setRequiresCharging 的特性&#xff0c;该特性竞品机器华为、Oppo也是如此。 1、应用处于前台可见&#xff0c;满足充电条件&#xff0c;立刻触发 2、应用处于后台不可见&#xff0c;需要设备连接USB或AC且电量大于90%&#xff0…

挂个人-CSDN Java优秀内容博主rundreamsFly抄袭

事件起因 今天点开自己的CSDN博客&#xff0c;发现给我推了一篇文章抄袭我自己昨天18点发的文章。 就是这篇&#xff0c;一字不差&#xff0c;博主昵称是&#xff1a;rundreamsFly&#xff0c;账号是rundreams。 抄袭者文章 发布于2024-8-26 19:37:41秒&#xff0c;比我发布…

C的温故而知新:位操作(C Primer Plus第十五章)

第十五章&#xff1a;位操作 这一章的篇幅不是很长&#xff0c;但既然能单独作为一章来讲的话&#xff0c;应该蛮重要的&#xff0c;但是我貌似没有总结出多少需要注意、加强记忆的东西&#xff0c;可见在JAVA的日常开发过程中基本不太遇见有关位操作的内容&#xff0c;所以我…