vue2 el-input-number 千分位显示的支持（不影响v-model的数值取值）

<!-- 增加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>

 

vue element el-input格式化显示自定义指令；支持千分位格式化、百分比格式化，支持自定义格式化

el-input自定义格式化展示指令示例，自定义格式化可修改formatter格式化函数与parse解析函数

 
// el-input格式化自定义指令
/**
 * @name inputFormatter
 * @msg: el-input格式化自定义指令
 * @param {Function} formatter 格式化函数
 * @param {Function} parser 解析函数
 * @param {Function} limit 输入限制函数
 * @param {Boolean} watchInput 是否监听input事件格式化显示
 * @param {Boolean} isNumber 是否为数字类型输入框(小数)
 * @returns 返回自定义指令生命周期函数
 */
const inputFormatter = ({ formatter = (e) => e, parser = (e) => e, limit = (e) => e, watchInput = true, isNumber = false }) => {
    return (el, binding, vnode) => {
        let watchVal = true
        const input = $(el).find(".el-input__inner")[0]
        // 获取记录光标位置
        let selectionSite
        let getSelectionSite = (event) => {
            let oldVal = event.target.value || ''
            let selectionStart = event.target.selectionStart
            selectionSite = oldVal.length - selectionStart
        }
        // 点击、键盘事件更新光标位置
        el.addEventListener("click", getSelectionSite)
        el.addEventListener("keyup", getSelectionSite)
        //为input绑定值赋值
        const assignment = (val) => {
            vnode.componentInstance.$emit('input', parser(val))
        }
        // 更改显示的值
        const upShow = (val) => {
            vnode.context.$nextTick(() => {
                input.value = val
            })
        }
        // 监听绑定值变化
        vnode.componentInstance.$watch('value', val => {
            if (watchVal) { upShow(formatter(val)) }
        }, { deep: true, immediate: true })
        // 数字格式化
        let toNumber = (val) => {
            val = val.toString().replace(/[^\d^\.^\-]+/g, "") // 第二步：把不是数字，不是小数点、-的过滤掉
                .replace(/^0+(\d)/, "$1") // 第三步：第一位0开头，0后面为数字，则过滤掉，取后面的数字
                .replace(/^\./, "0.") // 第四步：如果输入的第一位为小数点，则替换成 0. 实现自动补全
                .replace(".", "$#$").replace(/\./g, "").replace("$#$", ".") // 只保留第一个".", 清除多余的"."
            // .match(/^\d*(\.?\d{0,9})/g)[0] || ""; // 第五步：最终匹配得到结果 以数字开头，只有一个小数点，而且小数点后面只能有1到9位小数
            return val
        }
        // 处理最后一位非法字符
        const handlerIllegalStr = (str) => {
            while (!(/^[0-9]+.?[0-9]*/.test(str.charAt(str.length - 1))) && str) {
                str = str.substr(0, str.length - 1)
            }
            return str || ''
        }
        // 监听input事件，可添加操作
        el.addEventListener("input", (event) => {
            let selectionStart = input.selectionStart
            let val = event.target.value
            if (binding.modifiers.number || isNumber) {
                val = toNumber(val)
            }
            let inp = limit(val)
            event.target.value = inp
            if (binding.modifiers.watchInput || watchInput) {
                assignment(inp)
                upShow(formatter(parser(val)))
            }
            setTimeout(() => {
                if (selectionSite && input.value.length != selectionStart) {
                    input.selectionStart = input.selectionEnd = input.value.length - selectionSite
                }
            }, 0)
        })
        if (input) {
            input.addEventListener("blur", (event) => {
                watchVal = true
                let val = event.target.value;
                if (binding.modifiers.number || isNumber) {
                    val = handlerIllegalStr(val)
                }
                assignment(val)
            })
            input.addEventListener("focus", (event) => {
                watchVal = false
            })
        }
    }
}
使用方式

千分位显示指令
// 千分位指令
Vue.directive('thousands', {
    inserted: inputFormatter({
        // 格式化函数
        formatter(num) {
            num = num.toString()
            let num1 = num.split(".")[0], num2 = num.split(".")[1];
            let c = num1.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
            return num.toString().indexOf(".") !== -1 ? c + "." + num2 : c;
        },
        // 解析函数
        parser(val) {
            val = val.toString().replace(/,/g, "")
            return val
        },
        isNumber: true
    })
});
百分比显示指令 
// 百分比指令
Vue.directive('percentage', {
    inserted: inputFormatter({
        // 格式化函数
        formatter(val) {
            val = val.toString()
            let m = 0
            try { m = val.split(".")[1].length } catch (e) { }
            return Number(val.replace(".", "") * 100) / Math.pow(10, m)
        },
        // 解析函数
        parser(val) {
            val = val.toString()
            let l1 = 0, m
            try { l1 = val.split(".")[1].length; } catch (e) { }
            m = Math.pow(10, l1);
            return Number(val.replace(".", "")) / (100 * m);
        },
        watchInput: false,
        isNumber: true
    })
});
//千分位
<el-input v-model="paramFormData.initSpotPrice" v-thousands></el-input>
//百分比
<el-input v-model="paramFormData.initSpotPrice" v-percentage></el-input>