el-input保留两位小数

### element ui el-input 限制 输入 保留 两位 小数 实现 方法 示例

为了确保 `el-input` 组件中的输入值始终保留两位小数，可以采用多种方法。一种常见的方式是在绑定的数据模型上应用特定逻辑，以确保每次更新时都自动格式化数值。

对于直接设置精度的情况，虽然有提到使用 `precision` 属性[^1]，但实际上此属性并非适用于所有的版本或场景下的 `el-input` 组件。更可靠的方法是结合 JavaScript 来手动控制输入后的数据处理过程：

#### 方案一：通过监听器和正则表达式过滤非法输入

这种方法不仅能够保证只允许合法的小数点和数字被录入，还能进一步确保最终保存下来的值总是精确到两位小数。

<template>
  <div>
    <!-- 使用v-model双向绑定 -->
    <el-input v-model="formattedValue"></el-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rawValue: ''
    };
  },
  computed: {
    formattedValue: {
      get() {
        // 当读取value时返回带有两位小数的形式
        let value = parseFloat(this.rawValue);
        if (isNaN(value)) return '';
        return value.toFixed(2); // 返回固定两位小数字符串表示形式
      },
      set(newValue) {
        // 去除所有非数字字符, 只留下一个可能存在的小数点.
        newValue = String(newValue).replace(/[^0-9.]/g,'');
        // 如果存在多个小数点，则仅保留第一个出现的小数点之前的内容加上最后一个出现的小数点之后的内容
        var parts = newValue.split('.');
        if(parts.length>2){
          newValue=parts[0]+'.'+parts.pop();
        }
        this.rawValue = newValue;
      }
    }
  }
};
</script>

上述代码展示了如何利用计算属性来动态管理输入框内的显示内容以及实际存储的原始值之间的转换关系。每当用户修改输入框内文本时，都会触发 setter 函数执行清理操作；而 getter 则负责按照指定格式呈现给用户的视觉效果。

#### 方案二：基于事件处理器实现即时验证与修正

另一种方式则是借助于 `@input` 或者其他合适的生命周期钩子来进行实时干预，比如当检测到不符合条件的变化发生时立即作出响应并调整回合理状态。

<template>
  <div>
    <el-input v-model="number" @input="onInputChange"></el-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      number: ''
    };
  },
  methods: {
    onInputChange(event) {
      let val = event.target.value;

      // 清理掉多余的符号
      val = val.replace(/[^\d.-]/g, '');
      
      // 处理负号只能出现在最前边的情形
      if(val.indexOf('-') !== -1 && val.indexOf('-', 1)!== -1){
         val=val.substring(0,val.indexOf('-')+1)+val.substring(val.lastIndexOf('-')+1);
      }

      // 控制最多一个小数点
      while (/(\.\d*?)\./.test(val)){
           val=$1;
      }

      // 设置最大长度为整数加一位小数点再加两位小数共四位
      if(val.includes('.')){
            val=(parseFloat(val)).toFixed(Math.min((val.split('.')[1]).length,2));
      }else{
            val=(parseInt(val)).toString();  
      }

      this.number = val;
    }
  }
};
</script>

这段脚本实现了更为严格的规则检查机制，它会移除非预期之外的一切字符，并且严格限定小数部分不超过两个有效位数。同时保持了良好的用户体验——即刻反馈任何不当的操作尝试。