### Vue 中使用 `el-input` 组件实现千分位格式化并
保留两位小数的方法
在 Vue 和 Element Plus（或旧版的 Element UI）中，可以通过自定义逻辑来实现在 `el-input` 输入框中显示带有千分位格式化的数值，并且确保该值的小数部分始终
保留两位。以下是详细的解决方法。
---
### 方法概述
为了满足需求，可以分为以下几个方面进行处理：
1. **输入内容的实时监听与校验**：通过 `@input` 或者 `watch` 来捕获用户输入的内容，并对其进行必要的清洗和格式化操作。
2. **前端展示与后端传输分离**：确保传递给后端的
数据是一个标准的数字类型，而
不是经过格式化后的字符串。
3. **光标位置保护**：在对输入框中的内容进行修改时，注意
保存和恢复用户的光标位置，以免影响用户体验。
---
### 实现代码
以下是一个完整的实现示例：
#### HTML 部分
```html
<template>
<div>
<el-input
v-model="displayValue"
@input="formatInput
($event
)"
placeholder="请输入数字"
/>
</div>
</template>
```
#### JavaScript 部分
```javascript
<script>
export default {
data
() {
return {
rawValue: null, // 后端使用的原始数值
displayValue: '', // 前端展示的带千分位格式的值
cursorPosition:
0 // 记录光标位置
};
},
methods: {
formatInput
(value
) {
//
保存当前光标位置
const inputElement = this.$refs.elInput?.$el.querySelector
('input'
);
if
(inputElement
) {
this.cursorPosition = inputElement.selectionStart;
}
let cleanedValue = value.replace
(/,/g, ''
); // 移除所有逗号
cleanedValue = cleanedValue.replace
(/[^\d.]/g, ''
); // 只允许数字和
小数点
cleanedValue = cleanedValue.replace
(/\.{2,}/g, '.'
); // 处理连续的
小数点
cleanedValue = cleanedValue.replace
(/^\./, '
0.'
); // 如果首位是
小数点则补充前导
零
cleanedValue = cleanedValue.match
(/^\d*\.?\d{
0,2}$/
) ? cleanedValue : ''; // 确保最多两位小数
// 更新原始值
this.rawValue = parseFloat
(cleanedValue
);
// 格式化为千分位表示法
if
(cleanedValue.includes
('.'
)) {
const [integerPart, decimalPart] = cleanedValue.split
('.'
);
this.displayValue = integerPart.replace
(/\B
(?=
(\d{3}
)+
(?!\d
))/g, ','
) + '.' + decimalPart.padEnd
(2, '
0'
).slice
(0, 2
);
} else {
this.displayValue = cleanedValue.replace
(/\B
(?=
(\d{3}
)+
(?!\d
))/g, ','
) + '.
00';
}
// 恢复光标位置
setTimeout
(() => {
if
(inputElement && !isNaN
(this.cursorPosition
)) {
inputElement.setSelectionRange
(this.cursorPosition, this.cursorPosition
);
}
},
0);
}
}
};
</script>
```
---
### 功能解析
1. **清理输入内容**
- 使用正则表达式移除非数字字符以及多余的逗号[^1]。
- 确保
小数点的数量
不超过一个，并且
不允许非法输入组合。
2. **转换为千分位格式**
- 利用正则表达式 `\B
(?=
(\d{3}
)+
(?!\d
))` 插入千分位符号 `,`[^2]。
- 对整数部分应用千分位分割，同时
保留小数部分固定为两位。
3. **前后端
数据一致性**
- 在内部存储未格式化的纯数字版本
(`rawValue`
)，用于后续提交给服务器。
- 显示层面上提供更友好的视觉效果
(`displayValue`
)。
4. **光标位置管理**
- 在每次更新输入框内容之前记录下当前光标的索引位置。
- 修改完成后利用 `setTimeout` 异步回调重新设置光标回到原先的位置。
---
### 注意事项
- 此方案假设用户只会输入合法范围内的数值。如果存在恶意攻击或者极端情况下的异常输入，可能还需要额外增加边界条件判断。
- 浏览器兼容性问题也需要考虑清楚，尤其是涉及到一些较新的 ES 特性和 CSS 属性支持程度
不同的场景之下。
---
### 总结
通过上述方式可以在 Vue 应用程序中轻松实现基于 `el-input` 的千分位格式化功能，既保证了良好的用户体验又兼顾到了服务端对接的要求。整个过程涉及到了正则匹配、字符串操作等多个知识点的应用实践。
---
博客展示了JavaScript中parseFloat函数的使用示例，分别对整数1、小数1.1和1.0进行parseFloat转换操作，体现了该函数在不同数值类型下的转换结果。
扫一扫
1759
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
