element-ui 表单验证同表单一个值不能小于另一个输入值

效果截图

图片.png

html代码

<el-row>
  <el-col :span="6">
    <el-form-item label="收款金额" prop="amount" :rules="[
        { required: true, message: '请输入', trigger: 'blur' },
        { validator: this.numberRule, trigger: 'blur'}
      ]">
      <el-input type="number" v-model="voucherForm.amount" placeholder="收款金额"></el-input>
    </el-form-item>
  </el-col>
  <el-col :span="6">
    <el-form-item label="核销金额">
      <el-input v-model="voucherForm.writeoffAmount" disabled placeholder="核销金额"></el-input>
    </el-form-item>
  </el-col>
</el-row>

data部分

  data() {
    const numberRule = (rule, value, callback) => {
      if (Number(value) >= this.voucherForm.writeoffAmount) {
        if (Number.isInteger(Number(value)) && Number(value) > 0) {
          callback()
        } else {
          callback(new Error('请输入大于零的正整数'))
        }
      } else {
        callback(new Error('收款金额不能小于核销金额'))
      }
    }
    return {
      numberRule: numberRule,
      voucherForm: {
        voucher: 'R',
        custName: null,
        currCode: null,
        writeoffAmount: null
      },
    }