背景说明

领导想要这种效果，涉及金额的都是三位以，隔开并且保留两位小数，原来我是用el-input-number写的，因为value绑定的是number类型，而带分隔符的数字一定是string，所以必须换掉基础组件，由此变为el-input；
百度了下没有完全贴合需求的例子，所以我组合了下两位大佬的代码，在此记录一下，大佬链接在此：
vue+element 中 el-input框 限制只能输入数字及一位小数
JS 给数字加三位一逗号间隔的方法

期待效果

实现

基本思路：
取到input输入的值后，把这个值处理成我们想要的样子，然后再给塞回去；下面截图的input是表单中的其中一项，innerModel是表单双向绑定的model值；

		// 制定金额输入规则
		// value是当前input输入的值，name是表单中绑定的当前input的key值
        controlAmount(value, name) {
            value = value.replace(/[^\d.]/g, ''); // 清除"数字"和"."以外的字符
            value = value.replace(/^\./g, ''); // 验证第一个字符是数字而不是.
            value = value.replace(/\.{2,}/g, '.'); // 只保留第一个. 清除多余的
            value = value
                .replace('.', '$#$')
                .replace(/\./g, '')
                .replace('$#$', '.'); // 保证.只出现一次，而不能出现两次以上
            value = (+value).toFixed(2); // 只能输入两个小数
            let left = this.format_number(value.split('.')[0]),
                right = value.split('.')[1];
            value = left + '.' + right;
            this.$set(this.innerModel, name, value);
        },
        // 数值三位以，隔开
        format_number(n) {
            var b = parseInt(n).toString();
            var len = b.length;
            if (len <= 3) {
                return b;
            }
            var r = len % 3;
            return r > 0
                ? b.slice(0, r) +
                      ',' +
                      b
                          .slice(r, len)
                          .match(/\d{3}/g)
                          .join(',')
                : b
                      .slice(r, len)
                      .match(/\d{3}/g)
                      .join(',');
        }

希望这篇文章对你有些些用处，共勉！菜鸡不会写，但是我会抄，呜呜┭┮﹏┭┮