element :el-input输入三位以,隔开并保留两位小数的数值

背景说明

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

期待效果

在这里插入图片描述

实现

基本思路:
取到input输入的值后,把这个值处理成我们想要的样子,然后再给塞回去;下面截图的input是表单中的其中一项,innerModel是表单双向绑定的model值;
element :el-input输入三位以,隔开并保留两位小数的数值_第1张图片

		// 制定金额输入规则
		// 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(',');
        }

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

你可能感兴趣的:(element :el-input输入三位以,隔开并保留两位小数的数值)