Ant Design of Vue form表单联动校验

背景：遇到一种情况：数值A,数值B,数值C, 他们的关系是数值B要小于数值A,数值C的结果为数值A和数值B的和

第一种方法：比较low

page.vue

<a-form-model
​​​​​​​  ref="FormData"
  layout="inline"
  :labelCol="{ span: 8 }"
  :wrapperCol="{ span: 16 }"
  :model="FormData"
  :labelAlign="'left'"
  :rules="FormDataRules">
    <a-form-model-item label="字段A" prop="fieldA">
        <a-input-number
           v-model="FormData.fieldA"
            @blur="valueChange('fieldA')"
            :precision="0"
            :step="1"
            :min="0"
             style="width:100%"
         />
    </a-form-model-item>
    <a-form-model-item label="字段B" prop="fieldB">
        <a-input-number
           v-model="FormData.fieldB"
            @blur="valueChange('fieldB')"
            :precision="0"
            :step="1"
            :min="0"
             style="width:100%"
         />
    </a-form-model-item>
    <a-form-model-item label="字段C" prop="fieldC">
        <a-input-number
           v-model="FormData.fieldC"
            @blur="valueChange('fieldC')"
            :precision="0"
            :step="1"
            :min="0"
             style="width:100%"
         />
    </a-form-model-item>
</a-form-model>

js

export default {
    data () {
        return {
            FormData: {
                fieldA: '',
                fieldB: '',
                fieldC: '',
            },
            FormDataRules: {
                fieldA: [{ required: true, message: '必填', trigger: 'change' }],
                fieldB: [{ required: true, message: '必填', trigger: 'change' }],
                fieldC: [{ required: true, message: '必填', trigger: 'change' }, {
                    validator: (rule, value, callback) => {
                        if (value < 0) {
                          callback(new Error('结果错误'))
                        }
                        return true
                      },
                    trigger: 'change'
                }],
            }
        }
    },
    methods: {
        discountNumsChange (type) {
          let validateNext = false
          switch (type) {
            case 'fieldA':
              if (this.FormData.fieldB!== '') {
                this.$refs.FormData.validateField('fieldB')
                validateNext = true
              }
              break
            case 'fieldB':
              if (this.FormData.fieldA!== '') {
                validateNext = true
              }
              break
          }
          if (validateNext) {
            this.FormData.fieldC= this.FormData.fieldA- this.FormData.fieldB
            this.$refs.FormData.validateField('fieldC')
          }
        }
    }
    
}

第二种方法:

利用计算属性computed和watch

<a-form-model
​​​​​​​  ref="FormData"
  layout="inline"
  :labelCol="{ span: 8 }"
  :wrapperCol="{ span: 16 }"
  :model="FormData"
  :labelAlign="'left'"
  :rules="FormDataRules">
    <a-form-model-item label="字段A" prop="fieldA">
        <a-input-number
           v-model="FormData.fieldA"
            :precision="0"
            :step="1"
            :min="0"
             style="width:100%"
         />
    </a-form-model-item>
    <a-form-model-item label="字段B" prop="fieldB">
        <a-input-number
           v-model="FormData.fieldB"
            :precision="0"
            :step="1"
            :min="0"
             style="width:100%"
         />
    </a-form-model-item>
    <a-form-model-item label="字段C" prop="fieldC">
        <a-input-number
           v-model="fieldC"
            :precision="0"
            :step="1"
            :min="0"
             style="width:100%"
         />
    </a-form-model-item>
</a-form-model>

js

export default {
    data () {
        return {
            FormData: {
                fieldA: '',
                fieldB: '',
                fieldC: '',
            },
            FormDataRules: {
                fieldA: [{ required: true, message: '必填', trigger: 'change' }],
                fieldB: [{ required: true, message: '必填', trigger: 'change' }],
                fieldC: [{ required: true, message: '必填', trigger: 'change' }, {
                    validator: (rule, value, callback) => {
                        if (value < 0) {
                          callback(new Error('结果错误'))
                        }
                        return true
                      },
                    trigger: 'change'
                }],
            }
        }
    },
    computed: {
        fieldC() {
          return (parseInt(this.FormData.fieldA) - parseInt(this.FormData.fieldB)).toFixed(2)
        }
    },
    watch: {
        fieldC(newVal) {
          this.FormData.fieldC= newVal
          this.$refs.FormData.validateField('fieldC')
        }
    }
}