vue表格中显示金额格式化与保存时格式化为数字并校验!

最近项目中遇到了成本计算的,需要显示金额,保存一下,以后方便直接拿来用!

一 数字转金额格式显示

        //数字转金额格式
        format:function(s){
            if(/[^0-9\.]/.test(s)) return "invalid value";
            s=s.replace(/^(\d*)$/,"$1.");
            s=(s+"00").replace(/(\d*\.\d\d)\d*/,"$1");
            s=s.replace(".",",");
            var re=/(\d)(\d{3},)/;
            while(re.test(s))
                    s=s.replace(re,"$1,$2");
            s=s.replace(/,(\d\d)$/,".$1");
            return s.replace(/^\./,"0.")
        },

　　直接用此方法转换即可,对于项目中表格中的数据,可以直接用过滤器,把每一条数据的数字金额转换成这种格式,效果大概就是下面这中:

这种显示出来的是字符串类型,所以在保存的时候又需要再进行一次转换,并且必要的校验是必不可少的!

我这里在vue中使用的过滤器,直接在表格中使用这个就行了

        //金额过滤显示
        moneyformat:function(data){
            if(!data.cost){
                data.cost='';
            }
            data.cost=data.cost+'';
            if(!data.cost==undefined || data.cost=="" || data.cost==null){
                data.cost="0.00";
            }else{
                data.cost=this.format(data.cost);
            }
            return true;
        },

　

二 金额格式转数字

       //金额转数字
        moneyToNumFiled:function(money) {
            var num=money.trim();
            var ss=num.toString();
            if(ss.length==0){
              return 0.00;
            }
            num=new Number(ss.replace(/,/g, ""));
            money=num;
        },

　　这种比较简单,就是把字符串中的, 替换成空就行了,接着就是校验了!

三 金额校验

金额检验一般是数字且必须保留两位小数且不能为空,直接用正则就可以!

for(let value of me.olddatas){
         me.moneyToNumFiled(value.cost);
         if(value.cost==undefined || value.cost=="" || value.cost==null){
                   gyz.tools.alert({ header: '请输入金额！', content: '' });
                   return false;
         }
         var reg=/^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/;
          if(!reg.test(value.cost)){
                alert({ '请输入正确金额,必须是数字型,且小数位最多保留两位！' });
                 return false;
        }
}

　　注意:

在实际开发中还碰到一个蛋疼的问题就是由于表格是自己封装的一个组件,在实际开发中,当你在当前js中操作这个表格中的值的某个属性时(我说的当然就是金额啦,哈哈哈),页面值是不会变的,

究其原因,当然还是共享状态的问题了,由于不是自己的项目,是公司项目,决定还是不自己修改,直接在程序里多一步处理,直接结构赋值就行,找个中间变量,不要直接操作某个属性,直接整体赋值就可以了,

这样的话,保存,create,还有刷新等等,只要涉及到数值会变的,都需要这样处理:

//转换赋值
let newdata=me.olddatas;
me.olddatas=[];
//操纵本页面的对象,进行数据处理
//我这里就是赋值金额,当然没有变化就直接结构赋值更简单
newdata.forEach(function(value,index){
value.cost='';
for(let value1 of data){
     if(value.id==value1.postLevel){
           value.cost=value1.cost;
     }
}
});
//最后整体赋值回来就好
me.olddatas=newdata;

　　其实还有一种更简单的,mysql查询的时候直接使用format函数转换即可,数字格式化函数

第二个参数为保留几位小数,四舍五入策略,不过保存的时候还是需要转数字的