数字金额转大写

1、表单数据绑定

<el-row>
  <el-col :xs="24" :sm="12" :lg="6">
    <el-form-item label="金额:">
        <el-input :inline="true" v-model="form.detectCost" :disabled="form.dealStatus !== 0 || form.isCancell" style="width: 140px;" @blur="numberRules($event)"/>
     </el-form-item>
   </el-col>
   <el-col :xs="24" :sm="12" :lg="6">
      <el-form-item label-width="90px" label="其他费用:">
        <el-input :disabled="!isAdd" v-model="form.otherFees" style="width: 140px;" />
      </el-form-item>
   </el-col>
     <el-col :xs="24" :sm="12" :lg="6">
      <el-form-item label-width="90px" label="总计:">
        <el-input :disabled="!isAdd" v-model="form.totalPrice" style="width: 140px;" />
      </el-form-item>
   </el-col>
     <el-col :xs="24" :sm="12" :lg="6">
      <el-form-item label-width="90px" label="合计(大写金额):">
        <el-input :disabled="!isAdd" v-model="form.combined" style="width: 140px;" />
      </el-form-item>
   </el-col>
</el-row>

2、监听数据变化 转换大写金额

// 计算属性
  computed: {
    totalPrice() {
      return (this.form.workingHours * this.form.hoursPrice).toFixed(2)
    },
    detectCost() {
      return this.form.detectCost
    },
    otherFees() {
      return this.form.otherFees
    },
    combined() {
      return Number(this.totalPrice) + Number(this.detectCost) + Number(this.otherFees) 
    },
  },
  watch: {
    combined() {
      this.arr[0].price = Number(this.totalPrice) + Number(this.detectCost) + Number(this.otherFees) 
      let buffer = this.arr[0].price
      if (buffer === 0) {
        this.form.combined = '零'
      } else {
        let unit = '仟佰拾亿仟佰拾万仟佰拾圆角分'
        let str = ''
        buffer += '00'
        const p = buffer.indexOf('.')
        if (p >= 0) { buffer = buffer.substring(0, p) + buffer.substr(p + 1, 2) }
        unit = unit.substr(unit.length - buffer.length)
        for (let i = 0; i < buffer.length; i++) { str += '零壹贰叁肆伍陆柒捌玖'.charAt(buffer.charAt(i)) + unit.charAt(i) }
        this.form.combined = str.replace(/零(仟|佰|拾|角)/g, '零').replace(/(零)+/g, '零').replace(/零(万|亿|圆)/g, '$1').replace(/(亿)万|壹(拾)/g, '$1$2').replace(/^圆零?|零分/g, '').replace(/圆$/g, '圆整')
      }
    },
  },

3、 methods 中写正则校验方法

 // 控制金额只能输入正整数
    numberRules(e) {
      console.log(e.target.value, '金额')
      // flag值：true/false    正则/^(\+)?\d+(\.\d+)?$/ 不能为负数、字母，可以是小数
      const reg = /^(\+)?\d+(\.\d+)?$/
      const flag = reg.test(e.target.value)
      // console.log(flag, 'flag的值')
      if (!flag) {
        this.$message({
          showClose: true,
          message: '金额请输入有效数',
          type: 'warning'
        })
        // 判断后不符合正则要求，则框中数据为0
        e.target.value = 0
      }
    },