网站建设.pdf百度云,大连建设网信息公开,wordpress 改端口,郑州网络推广服务今天在做项目的时候#xff0c;本来顺顺利利就能上线#xff0c;但是突然上面给了个任务#xff0c;在输入框输入金额时#xff0c;小数点后面位数超过三位就不能在输入了。当时我天真的以为这很好解决#xff0c;接下来发生的事情让我措不及防。 首先#xff0c;我原先使… 今天在做项目的时候本来顺顺利利就能上线但是突然上面给了个任务在输入框输入金额时小数点后面位数超过三位就不能在输入了。当时我天真的以为这很好解决接下来发生的事情让我措不及防。 首先我原先使用的组件是el-input-number这个确实是一个非常好的组件但是在某些方面他却隐含着巨大的隐患。
el-input-numberv-modelscope.row.UnitPrice:precision3placeholder(单位:元):step1:min0:controlsfalsestylewidth: 100px/ 此处el-input-number保存三位小数最小为0等等都没有问题非常适合金额的输入。
但是el-input-number会存在一个致命的问题尤其是对于金额方面el-input-number会对输入的值进行四舍五入也就是如果用户复制了一个数为0.1689到输入框里面的值就会自动变为0.169这对于金额方面是影响非常大的虽然是0.001但是如果基数很大10000000*0.001钱的数额就会发生巨大变化。
紧接着我去找寻解决这个问题的办法发现是可以解决的但是存在一个问题就是
el-input-number的数值是不支持函数动态更改的但有方法确实是可以改的但也太过麻烦
我反复使用函数去改值发现el-input-number的值就是不变但是数组的值已经变化了差点让我原地去世此时原本一个很小的需求已经花费了一个小时还没解决我大汗淋漓。手动狗头
最后我选择放弃el-input-number转而使用el-input
el-inputrefelinput_numberv-modelscope.row.UnitPrice//此处如果:number,便输入不了0.00等placeholder(单位:元)//typenumber//此处若添加用户依然可以输入e通过敲击eee打出中文后添加,不建议添加但是最终的值将不会是数字类型需要在传值的时候更改stylewidth: 100pxinput(currentValue: number)changeThree(currentValue,scope.$index)blurblurchange(scope.row.UnitPrice, scope.$index)keydownhandleInput/
提示 v-modelscope.row.UnitPrice//此处如果后面添加:number,便输入不了0.00等 //typenumber//此处若添加用户依然可以输入e通过敲击eee打出中文后添加,不建议添加但是最终的值将不会是数字类型需要在传值的时候更改 1.指定typenumber使得不允许输入中英文字符但是发现可以输入e,,-于是使用keydown如果不需要小数点可以在后面添加
const handleInput (e: any) {console.log(eeeeeeeeeee, e);let key e.key;if (key e || key E || key || key -) {e.returnValue false;return false;}return true;
};
2.对于需要最多三位小数后不能输入
const changeThree (currentValue: number, index: Number) {console.log(gaibian, currentValue, index);if (currentValue.toString().split(.)[1]?.length 3) {// 检查值是否包含四位或更多的小数// 如果是则移除多余的小数位并设置回输入框useradd[index].UnitPrice Number(Math.trunc(Number(currentValue) * 1000) / 1000)}
}; 3.为了保险在失去焦点之后再次使用正则进行校验
const blurchange (e: any, index: any) {console.log(e, e, index);const zheng /^[1-9]\d*.\d$|^0\.\d$|^[1-9]\d*$/;if (zheng.test(e)) {console.log(通过);} else {var useradd user.Material || [];useradd[index].UnitPrice ;user.setMaterial(useradd);}
};
4.至此终于解决了其中可能有更简单的方法如果大佬有请评论区批评指正
