<!-- 增加v-thousands指令 --> <el-input-numberv-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>