首页 > 其他分享 >input的change事件根据placeholder计算公式计算结果

input的change事件根据placeholder计算公式计算结果

时间:2023-08-31 14:22:17浏览次数:37  
标签:const kpiList person num let input placeholder change SetData

 1 // change事件,根据公式计算
 2 const changeField = (field, data) => {
 3   // change事件 计算公式 徐文龙2023-08-17 晚
 4   let specialChars = /[-+*/)(]/;  // 正则
 5   for (let i = 0; i < person.kpiList.length; i++) {
 6     const element = person.kpiList[i];
 7       // 找到有计算公式的数据
 8     if (!!element["kpiFormula"]) {
 9        //按照正则切割字符串
10       let splitted = person.kpiList[i]["kpiFormula"].split(specialChars);
11       // 去重再大到小排序(复杂到简单排序)
12       splitted = uniqueArray(splitted).reverse();
13       let SetData = {};
14       // 遍历数组 将公式中的数据存贮在一个特殊的对象中
15       for (const iterator of splitted) {
16         for (let j = 0; j < person.kpiList.length; j++) {
17           if (person.kpiList[j]["kpiName"] == iterator) {
18             SetData[iterator] = person.kpiList[j]["name"] ? person.kpiList[j]["name"]: "0";
19             break;
20           }
21         }
22       }
23       //取出公式
24       let setkpiFormula = person.kpiList[i]["kpiFormula"];
25       // 遍历公式中的对象 取属性值和属性名
26       for (const key in SetData) {
27         if (SetData.hasOwnProperty.call(SetData, key)) {
28           // 正则替换 全部替换
29           setkpiFormula = setkpiFormula.replace(RegExp(key, "g"), SetData[key]);
30         }
31       }
32        // 计算公式中的数据
33       let result = eval(setkpiFormula);
34        // 特殊情况没有值 或者无穷大和无穷小 规则避免
35       if (!result || result == -Infinity || result == Infinity) {
36         person.kpiList[i]["name"] = "";
37       } else {
38         // 给数据赋值 为字符串格式,并且四舍五入 保留两位小数
39            person.kpiList[i]["name"] = String(Round(Number(result),2));
40       }
41     }
42   }
43 };
 1  <el-form-item
 2             :label="field.kpiName"
 3             v-for="(field, index) in person.kpiList"
 4             :key="index"
 5           >
 6            <!-- :placeholder="field.kpiFormula" -->
 7             <el-input
 8               clearable
 9               class="input_top"
10               v-model.trim="field.name"
11               placeholder=""
12               :disabled="field.disabled"
13               @change="changeField(field)"
14               oninput ="value=value.replace(/[^0-9.]/g,'')"
15             >
16               {{ field.name }}
17               <template #append style="width: 35px">
18                 <span>{{ field.kpiUnit }}</span>
19               </template>
20             </el-input>
21           </el-form-item>
 1 /**
 2  * 
 3  * @param {any} num 
 4  * @param {number} dec 
 5  * @returns 
 6  * 小数四舍五入
 7  */
 8 export const Round = (num,dec)=>{
 9   let sNum = num + "";
10   let idx = sNum.indexOf(".");
11   if (idx < 0) return num;
12   let n = sNum.length - idx - 1;
13   if (dec < n) {
14     let e = Math.pow(10, dec);
15     return Math.round(num * e) / e;
16   } else {
17     return num;
18   }
19 }

 

 

 

标签:const,kpiList,person,num,let,input,placeholder,change,SetData
From: https://www.cnblogs.com/LFxanla/p/17669465.html

相关文章

  • el-input出发回车事件时会导致页面刷新
    原因分析:当表单只有一个文本框时,按下回车将会触发表单的提交事件,导致页面的刷新。1:el-input上使用回车事件<el-inputv-model="input"@keyup.enter.native="search1">解决方法一:在el-form表单加上@submit.native.prevent<[email protected]><el-inputv-......
  • SpringAMQP--TopicExchange
             ......
  • 常用Exchange邮件统计命令汇总
    统计时间段内邮件发送情况Get-MessageTrackingLog-ResultSizeunlimited-Start"8/1/2023"-End"8/31/2023"-EventIdsend-Serverexmbx01|Measure-Object 统计某个邮箱发送情况Get-MessageTrackingLog-ResultSizeunlimited-Start"8/1/2023"-End"8/......
  • 20230621 java.io.InputStream
    介绍java.io.InputStreampublicabstractclassInputStreamimplementsCloseableFilterInputStream是典型的装饰器设计模式,很多子类继承这个类,提供额外的功能protectedvolatileInputStreamin;protectedFilterInputStream(InputStreamin){this.in=in;}装......
  • python的print和input的使用
    input前面引号里面包含的字符串会先调用print语句#1.使用input函数分别获得用户输入的个人信息#2.个人信息包含姓名,年龄,性别,爱好,职业信息等#3.使用print函数将输入的结果打印出来name=input("请输入姓名:")age=input("请输入年龄:")sex=input("请输入性别:")hobby=inp......
  • 如何通过Exchange ECP配置附件阻止策略
    背景需求通过ExchangeControlPanel(ECP)配置带特定后缀名的附件能否通过网页端Outlook(OWA)打开。操作步骤打开Exchange管理控制台,然后在控制台树中导航到服务器配置|客户端访问。接下来,从控制台的中下窗格中选择OWA(默认网站)列表,然后单击“操作”窗格中的“属性”链接。单击“自......
  • flutter升级错误“Your flutter checkout has local changes that would be erased by
    在升级FlutterSDK时可能会报如下错误:Yourfluttercheckouthaslocalchangesthatwouldbeerasedbyupgrading.Ifyouwanttokeepthesechanges,itisrecommendedthatyoustashthemvia“gitstash”orelsecommitthechangestoalocalbranch.Ifitisok......
  • wml input标记的format属性
    1、wml  input标记的format属性A从A到Z的任何大写字母,没有数字或其他字符。a从a到z的任何小写字母,没有数字和其他字符。N任何0到9的数字。X从A到Z从0到9的任何字符。x从a到z从0到9的任何字符。M任何字符,输入默认从大写开始。m任何字符,输入默认从小写开始。*f(星号)意味着......
  • 新版Jadx 加载dex报错 jadx.plugins.input.dex.DexException:Bad checksum 解决方法
    <table><tr><tdbgcolor=orange>本文所有教程及源码、软件仅为技术研究。不涉及计算机信息系统功能的删除、修改、增加、干扰,更不会影响计算机信息系统的正常运行。不得将代码用于非法用途,如侵立删!</td></tr></table>新版Jadx加载dex报错jadx.plugins.input.dex.DexException:B......
  • 新版Jadx 加载dex报错 jadx.plugins.input.dex.DexException:Bad checksum 解决方法
    本文所有教程及源码、软件仅为技术研究。不涉及计算机信息系统功能的删除、修改、增加、干扰,更不会影响计算机信息系统的正常运行。不得将代码用于非法用途,如侵立删!新版Jadx(1.6+)加载dex报错jadx.plugins.input.dex.DexException:Badchecksum解决方法环境win10Jadx1.6......