antd-vue动态控制表单校验踩坑记录

业务表单中的必填规则收到其他表单选项控制，如里面的时间必填校验收到后面的待定选项控制 一开始在a-form-model-item通过prop属性控制

<a-form-model-item
  label="签到时间"
  :prop="form.fairSignInDateNeedConfirm?'':'fairSignInDate'"
>
  <a-range-picker
      v-model="form.fairSignInDate"
      :disabledDate="disabledSignInDate"
      :disabled="form.fairSignInDateNeedConfirm"
      valueFormat="YYYY-MM-DD"/>
  <a-checkbox
      style="margin-left: 10px;"
      @change="form.fairSignInDate = null"
      v-model="form.fairSignInDateNeedConfirm">待定
  </a-checkbox>
</a-form-model-item>

美滋滋，只需要在标签上写个判断，初始化也是成功的，切换也可以，但是，现实是残酷的，当初始状态是不校验时，切换状态就无法触发表单的校验了，但是必填的前缀还在（也不知道这算不算bug）

解决方案是：不通过prop控制，需主动改变rules的值，我是写了个watch，顺道把校验状态也改了，毕竟antd不会在我设置rules后主动帮我清除对应的状态

watch: {

    'form.fairSignInDateNeedConfirm': {
      handler(val) {
        if(this.$refs.fairForm){
          this.$refs.fairForm.clearValidate('fairSignInDate')
        }
        this.rules.fairSignInDate[0].required = !val;
      },
      immediate: true
    },
    
}

总结：antd-vue控制表单校验规则需要控制rules的相应属性的值，并且prop需要在初始化时指定，不能动态控制，否则会出现只有样式没有规则的诡异现象。