ant design vue 根据条件判断是否表单验证

ant design vue 根据条件判断是否表单验证

前置说明：
本人是一个刚刚接触ant design vue 组件的小白，我会记录我工作中遇到的问题，对大佬们感觉太小儿科了，但是对我这种小白来说，已经很难了，如果感觉我那个地方说的不对的地方，欢迎指点出来。

效果展示：

因为我之前是一直使用element ui所以这次使用ant design vue也是偏向饿了么的写法，表单使用的是 FormModel 表单组件

布局验证实现思路

目前我想到的是，a-form-model-item嵌套a-form-model-item这样也可以达到验证的效果，不知道这种方法好不好

<a-form-model-item label="分发方式：" prop="resource">
	<a-radio-group v-model="form.resource">
		<a-radio value="10" :style="radioStyle">立即分发</a-radio>
        <a-radio value="20" :style="radioStyle">定时分发</a-radio>
    </a-radio-group>
    <a-form-model-item prop="dateTime">
    	<a-date-picker
        	:disabled="form.resource === '10'"
			v-model="form.dateTime"
			show-time />
	</a-form-model-item>
</a-form-model-item>

现在还是和效果有差别的，现在的情况是，无论点击的是立即分发还是定时分发都进入到验证，按道理来讲的话，立即分发是不需要要验证的，只有定时分发才有

所以我就想到了，通过判断单选框选中的值，来决定是否要验证

:prop="form.resource === '20' ? rules.dateTime : ''"

这样写就错了，本人来想的才简单了，然后我又查阅了资料，找到一种方法，是在表单项中再使用rules来验证，注意需要指定prop

<a-form-model-item
	:rules="form.resource === '20'? rules.dateTime : [ { required: false } ]"
    prop="dateTime">
   <a-date-picker
       :disabled="form.resource === '10'"
		v-model="form.dateTime"
		show-time />

rules在data里定义如下

rules: {
        dateTime: [
          { required: true, message: '请选择日期', trigger: 'change' }
        ]
      }