elementui input输入框只能输入数字并保留小数点后两位

### ElementUI Input 组件实现数字校验并保留两位小数 为了使 ElementUI 的 `el-input` 输入框仅允许输入数字，并自动保留小数点后两位，可以采用以下方式： #### 方法一：通过正则表达式过滤非法字符 可以通过监听 `input` 事件，在每次用户输入时动态验证数据合法性，并利用正则表达式移除非数字字符以及多余的位数。 ```vue <template> <el-input v-model="value" @input="handleInput"></el-input> </template> <script> export default { data() { return { value: '' }; }, methods: { handleInput(value) { this.value = value.replace(/^\.+|[^\d.]/g, '').replace(/(\..*?)\..*/g, '$1'); // 移除多余的小数部分[^3] if (this.value.includes('.')) { // 如果存在小数点，则截取到最多两位小数 const parts = this.value.split('.'); if (parts[1].length > 2) { this.value = `${parts[0]}.${parts[1].slice(0, 2)}`; } } else if (!/^-?\d+$/.test(this.value)) { // 非法字符处理 this.value = ''; } } } }; </script> ``` 此方法的核心在于实时监控用户的输入行为并通过正则表达式清理不符合条件的内容。它能够有效防止用户手动输入非数字字符或超出规定范围的小数位数[^3]。 --- #### 方法二：使用 `el-input-number` 控制精度 如果希望更简单地控制数值的最小值、最大值和精确度（即保留几位小数），可以直接使用 `el-input-number` 组件替代普通的 `el-input`。该组件内置了对数值的操作支持，适合用于需要严格限制输入场景的情况。 ```vue <template> <el-form-item label="金额"> <el-input-number v-model="amount" :min="0" :max="999999.99" :step="0.01" :precision="2" controls-position="right" ></el-input-number> </el-form-item> </template> <script> export default { data() { return { amount: 0, }; } }; </script> ``` 上述代码片段展示了如何配置 `el-input-number` 来限定输入值为非负浮点数，并且强制保留至多两位小数。其中参数解释如下： - `v-model`: 数据绑定变量； - `:min`, `:max`: 定义可接受数值区间； - `:step`: 步长设置，默认增量单位； - `:precision`: 小数点后的固定长度； - `controls-position`: 调整增减按钮位置[^2]。 这种方法无需额外编写逻辑来管理格式化规则，因此更加简洁高效，但可能不适用于某些特定需求下的高度自定义功能开发。 --- ### 性能对比分析 | **特性** | **方法一 (`el-input`) 自定义逻辑** | **方法二 (`el-input-number`) 内置控件** | |------------------------|-------------------------------------------------------|-----------------------------------------------| | 易用性 | 较低 | 高 | | 灵活性 | 极高 | 中等 | | 开发成本 | 增加 | 减少 | | 用户体验优化 | 支持完全定制化的交互 | 默认样式较为局限 | 对于大多数常规业务而言，推荐优先选用第二种方案以减少不必要的复杂性和维护负担；而对于特殊情况下需进一步增强用户体验或者满足独特规格的要求，则可以选择第一种基于原生 `el-input` 扩展的方式完成目标[^4]。