vue2实现在el-table里修改数据,插入输入框,并且根据输入数据,影响该行其他关联数据

news/2025/3/14 5:49:03/
   <div class="content-all"><div class="content-tit">填写内容</div><div class="content-text"><el-radio v-model="radio" label="1">计划负荷</el-radio><el-radio v-model="radio" label="2">申报量</el-radio><el-button type="primary" @click="modification()">批量修改</el-button><el-table:data="tableDataFill"height="290"style="width: 99%; margin-top: 20px"><el-table-columnprop="runDate"label="响应日"width="110"></el-table-column><el-table-columnprop="period"label="响应时段"></el-table-column><el-table-column prop="tag" label="需求类型"><template slot-scope="scope"><el-tag:type="scope.row.demandFlag === '1' ? 'primary' : 'success'"disable-transitions>{{ scope.row.demandFlag === "1" ? "削峰" : "填谷" }}</el-tag></template></el-table-column><el-table-columnprop="baseLine"label="基线负荷(MW)"></el-table-column><el-table-columnv-if="radio === '2'"prop="planeLine"label="计划负荷(MW)"></el-table-column><el-table-column label="计划负荷(MW)" v-if="radio === '1'"><template slot-scope="scope"><el-inputv-model="scope.row.planeLine"placeholder="输入计划负荷"type="number"@input="updateDemandResp(scope.row)"oninput="if(value<0)value=0"></el-input></template></el-table-column><el-table-columnprop="typicalLine"label="典型负荷(MW)"></el-table-column><el-table-columnprop="tradeCount"label="历史交易量(MW)"></el-table-column><el-table-columnprop="demandResp"label="申报量(MW)"v-if="radio === '1'"></el-table-column><el-table-columnv-if="radio === '2'"prop="demandResp"label="申报量(MW)"><template slot-scope="scope"><el-inputv-model="scope.row.demandResp"placeholder="输入申报量"@input="updatePlaneLine(scope.row)"></el-input></template></el-table-column></el-table></div></div>

js块

 methods: {updateDemandResp(row) {const baseLine = +row.baseLine || 0;const tradeCount = +row.tradeCount || 0;const plannedLoad = +row.planeLine || 0;//  申报量row.demandResp = plannedLoad - baseLine - tradeCount;console.log("111", row.demandResp);if (row.demandFlag === "1" && row.demandResp > 0) {row.demandResp = 0;} else if (row.demandFlag === "1" && row.demandResp < 0) {row.demandResp = row.demandResp.toFixed(2);} else if (row.demandFlag === "-1" && row.demandResp > 0) {row.demandResp = +row.demandResp.toFixed(2);} else if (row.demandFlag === "-1" && row.demandResp < 0) {row.demandResp = 0;}this.updateTableDataFill(row);},updatePlaneLine(row) {const baseLine = +row.baseLine || 0;const tradeCount = +row.tradeCount || 0;const declaredAmount = +row.demandResp || 0;//  计划负荷row.planeLine = baseLine + tradeCount + declaredAmount;if (row.planeLine < 0) {row.planeLine = 0;}this.updateTableDataFill(row);},updateTableDataFill(row) {const index = this.tableDataFill.findIndex((item) => item.runDate === row.runDate && item.period === row.period);if (index !== -1) {this.$set(this.tableDataFill, index, {...this.tableDataFill[index],...row,});}},

比如,实现申报量 根据填写的计划负荷计算,数值=计划负荷-基线负荷-历史交易量,并且校验填谷申报量≥0,削峰申报量≤0,计划负荷根据填写的申报量计算,数值=基线负荷+历史交易量+申报量,并且校验计划负荷≥0

输入为来自输入字段的字符串保留。
无论何时进行计算,都会使用parseFloat()对值进行转换。这有效地处理任何非数字输入,确保只对有效数字进行计算。无效输入将默认为0。
处理非数字字符串:

parseFloat()函数的作用是将字符串转换为浮点数。如果解析失败(例如,输入为空或不是数字),我们将通过返回到0来优雅地处理它。
动态更新:

updateDemandResp()和updatePlaneLine()中的逻辑保持不变,确保在用户输入后立即进行重新计算。
空字符串初始化:

tableDataFill属性planeLine和demandasp被初始化为空字符串,允许用户输入初始处理为字符串的值。
 


http://www.ppmy.cn/news/1554774.html

相关文章

二十七、Tomcat专题总结与拓展

文章目录 一、Tomcat设计思路总结1、Tomcat整体架构2、Tomcat设计思路 二、Tomcat源码设计精髓三、拓展&#xff1a;SpringBoot整合Tomcat源码分析四、拓展&#xff1a;SpringBoot整合Undertow实战1、Undertow概述2、SpringBoot集成Undertow2.1、引入依赖2.2、application.prop…

C++类的应用和构造函数的调用

矩形的周长面积 定义一个矩形类Rec&#xff0c;包含私有属性length、width&#xff0c;包含公有成员方法&#xff1a; void set_length(int l); //设置长度void set_width(int w); //设置宽度int get_length(); //获取长度&#xff0c;将长度的值返回给调用处int get_width();…

Ubuntu22.04搭建FTP服务器保姆级教程

在网络环境中&#xff0c;文件传输是一项至关重要的任务。FTP&#xff08;文件传输协议&#xff09;是一种基于客户端/服务器模式的协议&#xff0c;广泛用于在互联网上传输文件。Ubuntu作为一款流行的Linux发行版&#xff0c;因其稳定性和易用性而广受开发者和系统管理员的喜爱…

scala的泛型2

package test55 //隐式转换 //1.隐式函数 //2.隐式类 //3.隐式对象 //4.函数的隐式参数//泛型&#xff1a;类型参数化。 //Pair 约定一对数据 class Pair[T](var x:T, var y:T) //泛型的应用场景&#xff1a; //1.泛型函数 //2.泛型类 //3.泛型特质 object test2 {def main(arg…

网络安全法-附则

第七章 附 则 第七十六条 本法下列用语的含义&#xff1a; &#xff08;一&#xff09;网络&#xff0c;是指由计算机或者其他信息终端及相关设备组成的按照一定的规则和程序对信息进行收集、存储、传输、交换、处理的系统。 &#xff08;二&#xff09;网络安全&#xff…

联强优创HT550超高频rfid手持终端如何实现远距离多标签读取

超高频rfid手持终端远距离读取是指一种集成了RFID读写功能&#xff0c;并能在较远距离内读取多个电子标签信息的便携式pda设备‌。 其主要特点包括‌&#xff1a; ‌远距离读取‌&#xff1a;采用先进的RFID技术&#xff0c;支持超高频段&#xff0c;读取距离可达数20米(视标签…

用Python开发数独游戏

本文将带你一步步实现一个简单的数独游戏,玩家可以自己解谜或生成数独谜题进行挑战,提升逻辑思维能力。 一、功能描述 随机生成数独棋盘:生成一个可解的数独谜题。玩家交互:玩家可以在界面上输入数字进行解答。解谜验证:自动判断玩家输入的答案是否正确。二、开发环境 语言…

【C++算法】39.模拟_提莫攻击

文章目录 题目链接&#xff1a;题目描述&#xff1a;解法C 算法代码&#xff1a; 题目链接&#xff1a; 495. 提莫攻击 题目描述&#xff1a; 解法 这里我们要看提莫攻击事件的差值。 如果提莫连续两次攻击的时间差比中毒秒数高或相等&#xff0c;那么tduration 如果提莫连续两…