vue3的elementPlus中使用el-input控制用户输入正确金额，el-input-number遇到的一系列问题

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

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

javascript 复制代码

<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

javascript 复制代码

<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，如果不需要小数点，可以在后面添加

javascript 复制代码

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.对于需要最多三位小数后不能输入

javascript 复制代码

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.为了保险，在失去焦点之后再次使用正则进行校验

javascript 复制代码

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