今天在做项目的时候，本来顺顺利利就能上线，但是突然上面给了个任务，在输入框输入金额时，小数点后面位数超过三位就不能在输入了。当时我天真的以为这很好解决，接下来发生的事情让我措不及防。

  首先，我原先使用的组件是el-input-number，这个确实是一个非常好的组件，但是在某些方面，他却隐含着巨大的隐患。

<el-input-numberv-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-inputref="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.至此，终于解决了，其中可能有更简单的方法，如果大佬有，请评论区批评指正