最新简易解决方案,先贴出来(保留五位小数)
<el-input
size="mini"
type="text"
placeholder="上限"
@input="handleInputUpper(itemName)"
v-model="TestStandardThreshold[itemName].Upper"
>
</el-input>
handleInputUpper(itemName) {
// 只允许输入数字和一个小数点
this.TestStandardThreshold[itemName].Upper = this.TestStandardThreshold[
itemName
].Upper.replace(/[^\d.]/g, "");
// 只保留一个小数点
let pointIndex = this.TestStandardThreshold[itemName].Upper.indexOf(".");
if (pointIndex !== -1) {
this.TestStandardThreshold[itemName].Upper =
this.TestStandardThreshold[itemName].Upper.slice(0, pointIndex + 1) +
this.TestStandardThreshold[itemName].Upper.slice(
pointIndex + 1
).replace(/\./g, "");
}
// 保留五位小数
let parts = this.TestStandardThreshold[itemName].Upper.split(".");
if (parts.length > 1) {
parts[1] = parts[1].slice(0, 5);
this.TestStandardThreshold[itemName].Upper = parts.join(".");
}
},
今天在做项目的时候,本来顺顺利利就能上线,但是突然上面给了个任务,在输入框输入金额时,小数点后面位数超过三位就不能在输入了。当时我天真的以为这很好解决,接下来发生的事情让我措不及防。
首先,我原先使用的组件是el-input-number,这个确实是一个非常好的组件,但是在某些方面,他却隐含着巨大的隐患。
<el-input-number
v-model="scope.row.UnitPrice"
:precision="3"
placeholder="(单位:元)"
:step="1"
:min="0"
:controls="false"
style="width: 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-input
ref="elinput_number"
v-model="scope.row.UnitPrice"//此处如果:number,便输入不了0.00等
placeholder="(单位:元)"
//type="number"//此处若添加,用户依然可以输入e,通过敲击eee打出中文后添加,不建议添加,但是最终的值将不会是数字类型,需要在传值的时候更改
style="width: 100px"
@input="(currentValue: number)=>changeThree(currentValue,scope.$index)"
@blur="blurchange(scope.row.UnitPrice, scope.$index)"
@keydown="handleInput"
/>
提示:
v-model="scope.row.UnitPrice"//此处如果后面添加:number,便输入不了0.00等
//type="number"//此处若添加,用户依然可以输入e,通过敲击eee打出中文后添加,不建议添加,但是最终的值将不会是数字类型,需要在传值的时候更改
1.指定type="number"使得不允许输入中英文字符,但是发现可以输入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.至此,终于解决了,其中可能有更简单的方法,如果大佬有,请评论区批评指正