vue el-input 只能输入数字和小数点 需显示千分位及小数点后仅保留两位

### Vue 中使用 `el-input` 组件限制用户输入数字和小数点，同时显示千分位格式并保留两位小数 在 Vue 和 Element Plus（或旧版的 Element UI）中，可以通过自定义逻辑实现对 `el-input` 的功能扩展。具体来说，可以限制用户仅能输入数字和小数点，并动态地将输入内容格式化为千分位形式，同时确保小数部分只保留两位。 --- ### 方法概述 为了满足需求，可以从以下几个方面入手： 1. **输入验证与清理**：通过正则表达式或其他手段，确保用户只能输入有效的数字和小数点。 2. **实时格式化**：当用户输入时，立即对其内容进行千分位格式化，并保持小数部分为两位。 3. **数据同步**：维护两个变量——一个是供前端展示的格式化值，另一个是未经格式化的原始数值，以便于向后端发送。 --- ### 实现代码 以下是一个完整的解决方案： #### HTML 部分 ```html <template> <div> <el-input v-model="formattedValue" @input="handleInput" placeholder="请输入数字" /> </div> </template> ``` #### JavaScript 部分 ```javascript <script> export default { data() { return { rawNumber: null, // 存储未格式化的原始数值 formattedValue: '' // 存储前端展示的格式化数值 }; }, methods: { handleInput(input) { // 清理输入内容 let cleanedInput = input.toString().replace(/,/g, ''); // 移除所有逗号 cleanedInput = cleanedInput.replace(/[^\d.]/g, ''); // 只允许数字和小数点 cleanedInput = cleanedInput.replace(/\.{2,}/g, '.'); // 处理多个小数点的情况 cleanedInput = cleanedInput.replace(/^\./, '0.'); // 如果首位是小数点，则补充前导零 // 确保小数部分最多两位 if (cleanedInput.includes('.')) { const [integerPart, decimalPart] = cleanedInput.split('.'); cleanedInput = `${integerPart}.${decimalPart.slice(0, 2).padEnd(2, '0')}`; } // 转换为浮点数 this.rawNumber = parseFloat(cleanedInput); // 格式化为千分位 if (!isNaN(this.rawNumber)) { const integerFormatted = Math.trunc(this.rawNumber).toLocaleString(); const decimalFormatted = (this.rawNumber % 1).toFixed(2).split('.')[1]; this.formattedValue = `${integerFormatted}.${decimalFormatted}`; } else { this.formattedValue = ''; } } } }; </script> ``` --- ### 功能解析 1. **清理输入内容** - 使用正则表达式移除非数字字符以及多余的逗号[^1]。 - 确保小数点的数量不超过一个，并且不允许非法输入组合。 2. **限制小数位数** - 将输入拆分为整数部分和小数部分，分别处理。 - 截取小数部分至最多两位，并补齐不足两位的部分。 3. **千分位格式化** - 利用 `Math.trunc()` 提取消去小数部分的整数部分，并调用 `.toLocaleString()` 进行千分位分割[^2]。 - 结合小数部分拼接成最终的格式化字符串。 4. **前后端数据一致性** - 在内部存储未格式化的纯数字版本 (`rawNumber`)，用于后续提交给服务器。 - 显示层面上提供更友好的视觉效果 (`formattedValue`)。 --- ### 注意事项 - 此方案假设用户只会输入合法范围内的数值。如果存在恶意攻击或者极端情况下的异常输入，可能还需要额外增加边界条件判断。 - 浏览器兼容性问题需要注意，尤其是涉及到一些较新的 ES 特性和 CSS 属性支持程度不同的场景之下。 --- ### 总结 通过上述方式可以在 Vue 应用程序中轻松实现基于 `el-input` 的千分位格式化功能，既保证了良好的用户体验又兼顾到了服务端对接的要求。整个过程涉及到了正则匹配、字符串操作等多个知识点的应用实践。 ---