<!-- 增加v-thousands指令 --> <el-input-number v-model="row.money" v-thousands :controls="false" :min="0" :precision="2" style="width: 100%"
// 添加全局指令或局部指令 directives: { thousands: { inserted: function (el) { // 获取input节点 if (el.tagName.toLocaleUpperCase() !== 'INPUT') { el = el.getElementsByTagName('input')[0] } // 初始化时,格式化值为千分位 const numberValue = parseFloat(el.value.replace(/,/g, '')) if (!isNaN(numberValue)) { el.value = numberValue.toLocaleString('zh', { minimumFractionDigits: 2, maximumFractionDigits: 2, }) } // 聚焦时转化为数字格式(去除千分位) el.onfocus = () => { el.value = parseFloat(el.value.replace(/,/g, '')).toFixed(2) } // 失去焦点时转化为千分位 el.onblur = () => { const onBlurValue = parseFloat(el.value.replace(/,/g, '')) if (!isNaN(onBlurValue)) { el.value = onBlurValue.toLocaleString('zh', { minimumFractionDigits: 2, maximumFractionDigits: 2, }) } } }, }, },
实现效果为获取焦点时显示数值,失去焦点显示千分位,获取v-model绑定的值为数值。如果想设置数值靠右显示,添加局部css:
<style lang="scss" scoped> ::v-deep .el-input-number .el-input__inner { text-align: right; } </style>
标签:el,千分,数值,number,value,input,replace From: https://www.cnblogs.com/fdxjava/p/17782479.html