el-input-number支持千分位吗
时间: 2023-08-18 12:12:17 浏览: 539
vue element-ui实现input输入框金额数字添加千分位
是的,Element UI 的 `el-input-number` 组件支持千分位显示,你可以使用 `formatter` 和 `parser` 属性来实现。
`formatter` 属性用于格式化显示值,可以自定义一个函数实现千分位分隔符的添加。例如:
```html
<el-input-number v-model="num" :formatter="formatNum"></el-input-number>
```
```js
export default {
data() {
return {
num: 1234567.89
}
},
methods: {
formatNum(value) {
return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
}
}
}
```
`parser` 属性用于解析用户输入的值,将其转换为合法的数字类型。例如:
```html
<el-input-number v-model="num" :parser="parseNum"></el-input-number>
```
```js
export default {
data() {
return {
num: 0
}
},
methods: {
parseNum(value) {
return parseFloat(value.replace(/,/g, ''))
}
}
}
```
在这个例子中,我们使用 `replace` 函数将用户输入的千分位分隔符去掉,然后使用 `parseFloat` 函数将其转换为浮点数类型。
阅读全文