dom

表格校验是直接写在dom里

  <el-form :model="dailyDetailtForm" :rules="dailyDetailtFormrules" ref="dailyDetailtForm" label-width="120px" class="demo-ruleForm"  @submit.native.prevent>
        <el-table :data="dailyDetailtForm.tbDDailysettlementShifthandoverList" border stripe style="width: 100%" class="addTable" :summary-method="getSummaries" show-summary  >
          <el-table-column prop="shiftHandoverNumber" label="交班单号" min-width='80' align="center" show-overflow-tooltip />
          <el-table-column prop="cashPayable" label="应缴金额" header-align="center" min-width='80' align="right" >
            <template slot-scope="scope">
              <span>{{scope.row.cashPayable|NumFormat}}</span>
            </template>
          </el-table-column>         
          <el-table-column prop="cashReceived" label="实收现金" header-align="center"  align="right">
            <template slot-scope="scope">           
              <span v-if="dailyDetailFlag">{{scope.row.cashReceived}}</span>
              <el-form-item v-else  :prop="'tbDDailysettlementShifthandoverList.'+scope.$index+'.cashReceived'" :rules='dailyDetailtFormrules.cashReceived'>
              <el-input v-model="scope.row.cashReceived" placeholder="请输入实收现金"  maxlength="12" @blur="inputMoney($event,scope.row,'cashReceived',true)"
                  @focus="onFocusMoneyTable(scope.row,'cashReceived')"/>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="shortOverflowNumberCash" label="短 溢" header-align="center"    align="right" >
            <template slot-scope="scope">
              <span>{{comdifyFn(delcommafy(scope.row.cashPayable) -  delcommafy(scope.row.cashReceived))}}</span> 
               <span v-show="false">{{delcommafy(scope.row.shortOverflowNumberCash=delcommafy(scope.row.cashPayable) - delcommafy(scope.row.cashReceived))}}</span>      
            </template>
          </el-table-column>
          <el-table-column prop="shortOverflowCaseReason" label="短溢理由" header-align="center" show-overflow-tooltip align="center" />
        </el-table>
  </el-form>
  

js

data(){
    retrun{
          dailyDetailtFormrules: {
            cashReceived: [
              { required: true, message: '请输入实收金额', trigger: 'blur' },
              { validator: validateNumberNoComdify, trigger: "blur" },
            ],
            paperCouponsReceived: [
              { required: true, message: '请输入实收纸质券', trigger: 'blur' },
              { validator: validateStockNumber, trigger: "blur" },
            ],
      }
    }
}




  methods: {
    //实时改变输入框的值计算
     inputMoney(el, row, name, bol) {
      row[name] = this.getInputValue(el, bol)
    }
    // 输入框聚焦清楚千分位
    onFocusMoneyTable(row, name) {
        row[name] = this.delcommafy(row[name], true);
    },

   // 获取输入框的值
    getInputValue(el, bol) {
        let inputVal = el.target.value || "";
        inputVal = inputVal.trim()
        return this.comdify(this.delcommafy(inputVal, bol));
    },
    
    // 金额添加千分位
    comdify(n) {
        if (!n) return n;
        let numberReg = /^(([1-9]\d{0,2}|0)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/
        if (!numberReg.test(n)) {
            return n
        }
        let index = n.lastIndexOf(".");
        let num = n.indexOf("-");
        let max = 18;
        max = num == 0 ? 19 : 18;
        let str = n.split(".");
        let re = /\d{1,3}(?=(\d{3})+$)/g;
        if (index == -1 || index > max) {
            index = max;
        }
        str[0] = str[0].substring(0, index);
        if (str[1] && str[1].length == 1) {
            str[1] = str[1] + "0";
        } else if (str[1] && str[1].length > 2) {
            str[1] = str[1].substring(0, str[1].length);
        }
        // console.log("str[1]", str[1]);
        let n1 = str[0].replace(re, "$&,");

        return str.length > 1 && str[1] ? `${n1}.${str[1]}` : `${n1}.00`;
        // return n;
    },
        // 金额整数不限校验
    validateNumberNoComdify(rule, value, callback) {
        if (value !== '') {
            if (!value) return value;
            value = value.toString();
            value = value.replace(/,/gi, "");
            let numberReg = /^(([1-9]\d{0,12})|(([0]\.\d{1,2}|0|[1-9][0-9]{0,11}\.\d{1,2})))$/
            if (!numberReg.test(value)) {
                callback(new Error('整数12位,小数2位'))
            } else {
                callback()
            }
        } else {
            callback()
        }
    },
    //去除千分位中的‘，'
    delcommafy(num, bol) {
        if (!num) return num;
        num = num.toString();
        num = num.replace(/,/gi, "");
        // 如果true不包含小数点
        if (!bol) {
            let index = num.indexOf(".")
            if (index != -1) {
                num = num.substring(0, index)
            }
        }
        return num;
    }
}