千分位转化相加得出总金额,失去焦点后转换千分位,获取焦点时变为number类型

说明:以下方法仅用于单页面,就是说如果是通过props传值进来的数据需要在进行改变,详看computed计算属性

另:千分位与数值的转换网上大多数都可以使用,我在这里也是引用了网上的一些代码,仅供参考

<!-- html代码 -->
<el-form-item label="总金额">
	{{newNum(allprice)}}
</el-form-item>

<!-- 只读框 -->
<el-form-item label="账户余额">
  <el-input :value="newNum(dkowoo)" readonly></el-input>
</el-form-item>

<!-- 可输入框 -->
<el-form-item label="充值金额" prop="money">
  <el-input v-model.trim="ruleForm.money" @focus="delcommafy2(ruleForm.money)" @blur="blurmoneyformat(ruleForm.money)"></el-input>
</el-form-item>
computed: {
   allprice() {
     let that = this
     //这里的判断是为了总金额不为NAN
     if (Number.isNaN(parseInt(that.delcommafy(that.ruleForm.money)))) {
     	// 如果只读框中的值是通过父组件传进来的那么就需要在data中return一个新变量接收传过来的值
     	// 下面的dkowoo就是在data中接收传值的新变量
     	// 写法可直接写:dkowoo: this.传值变量名, 然后在这里使用,当然这只是为了渲染,如果是一个表单提交数据,那么不要改动其他的,只用变量接收传过来的值即可
       return parseInt(that.delcommafy1(that.dkowoo))
     } else {
       let kodw = JSON.parse(JSON.stringify(that.ruleForm.money))
       // console.log(kodw)
       return parseInt(that.delcommafy(kodw)) + parseInt(that.delcommafy1(that.dkowoo))
     }
   }
 },
// 注意:如果有传过来的值得话,那么需要在delcommafy字样的三个方法中加上num.toString()先转换为字符类型,避免报错
delcommafy1(num){
  	let kdwo = num.toString()
    if((kdwo+"").trim()==""){
        return"";
    }
    kdwo=kdwo.replace(/,/gi,'');
    return this.dkowoo = kdwo;
},
delcommafy2(num){
    if((num+"").trim()==""){
        return"";
    }
    num=num.replace(/,/gi,'');
    return this.ruleForm.money = num;
},
delcommafy(num){
    if((num+"").trim()==""){
        return"";
    }
    num=num.replace(/,/gi,'');
    return num;
},
blurmoneyformat(inputValue){
  //若输入框内容为空则不做处理
  console.log(typeof inputValue, inputValue)
  if(inputValue == '' || inputValue.length == 0){
    return
  }
  //判断是否有小数点
  if(inputValue.indexOf(".") != -1){
    let str = inputValue.split(".")
    if(str[0].length > 0){
      let arr = str[0].split('')
      let res = arr.every((item,index) => {
        return item == 0 || item == '0'
      })
      if(res){
        if(str[1]){
          inputValue = '0.' + str[1]
        }else{
          inputValue = '0.00'
        }
      }else{
        if(str[1]){
          inputValue = str[0].replace(/\b(0+)/g,"") + '.' + str[1]
        }else{
          inputValue = str[0].replace(/\b(0+)/g,"") + '.00'
        }
        
      }
    }
    if(str[1].length == 1){
      inputValue = inputValue + '0'
    }
  }else{
    let arr = inputValue.split('')
    let res = arr.every((item,index) => {
      return item == 0 || item == '0'
    })
    if(res){
      inputValue = '0.00'
    }else{
      inputValue = inputValue.replace(/\b(0+)/g,"") + '.00'
    }
  }
  
  //千分位格式化
  let intNum = inputValue.substring(0, inputValue.indexOf('.')).replace(/\B(?=(?:\d{3})+$)/g, ',');
  let dot = inputValue.substring(inputValue.indexOf('.'), inputValue.length);
  inputValue = intNum + dot
  // 这里是去掉了小数点,若需要小数点可以将replace去掉
  return this.ruleForm.money = inputValue.replace('.00', '')
},
newNum(num) {
    num = num.toString().split('.')[0];
    var newnumArr = [];
    var newnum = '';
    newnumArr.length = num.length;
    var flag = 0;
    for (var i = num.length - 1; i >= 0; i--) {
        ++flag;
        if (flag == 3) {
            if (i == 0) {
                newnumArr[i] = num[i];
            }
            else {
                newnumArr[i] = ',' + num[i] + '';
            }
            flag = 0;
        }
        else {
            newnumArr[i] = num[i];
        }
    }
    for (var i = 0; i < newnumArr.length; i++) {
        newnum += newnumArr[i];
    }
    return newnum;
},
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值