vue el-input金额千分位添加逗号
时间: 2024-01-19 22:02:31 浏览: 121
vue-input-autowidth:Vue.js指令,用于调整文本输入的宽度以适合其内容
在Vue Element-UI中,可以通过自定义过滤器来实现输入框金额数字添加千分位。具体实现方法如下:
1. 在Vue组件中定义一个过滤器,用于将数字转换成千分位格式的字符串:
```
filters: {
thousands: function (value) {
if (!value) return '0.00'
let intPart = parseInt(value).toString().replace(/(\d)(?=(\d{3})+$)/g, '$1,')
let floatPart = '.00'
let valueStr = value.toString()
if (valueStr.indexOf('.') !== -1) {
floatPart = valueStr.substr(valueStr.indexOf('.'))
}
return intPart + floatPart
}
}
```
2. 在el-input组件中使用该过滤器:
```
<el-input v-model="amount" :value="amount | thousands" @input="handleInput"></el-input>
```
3. 在Vue组件中定义一个方法,用于处理用户输入:
```
methods: {
handleInput: function (value) {
let newValue = value.replace(/[^\d.]/g, '')
let reg = /^(\-)*(\d+)\.(\d\d).*$/;
if (reg.test(newValue)) {
newValue = newValue.replace(reg, '$1$2.$3')
} else {
newValue = newValue.replace(/[^\d]/g, '')
}
this.amount = newValue
}
}
```
该方法会将用户输入的内容进行过滤,只保留数字和小数点,并且限制小数点后只能输入两位小数。同时,该方法会更新Vue组件中的数据,以便在输入框中显示正确的数值。
阅读全文