el-form表单验证组件如何动态修改required状态

动态绑定required值

1.el-form部分

<el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
      style="width:50%;margin:0 auto"
    >
    ...
    ...
</el-form>

2.滑块开关部分的代码

 <el-form-item 
	 label="即时发送" 
	 prop="autoSend">
        <el-switch 
        	v-model="ruleForm.autoSend" 
        	active-color="#13ce68"
        ></el-switch>
</el-form-item>

3.表单部分代码

<el-form-item prop="date1" :required="!ruleForm.autoSend">
            <el-date-picker
              format="yyyy年MM月dd日"
              value-format="yyyy年MM月dd日"
              placeholder="选择日期"
              v-model="ruleForm.date1"
              style="width: 100%;"
              :disabled="ruleForm.autoSend"
            ></el-date-picker>
</el-form-item>

主要用:required=""方式动态的判断，根据滑块开关的值判断当前是否是必须的状态。

4.data部分代码

 data() {
    return {
      ruleForm: {
        autoSend: false,
      },
      rules:{
     	 date1: [{
            		trigger: "change",
          		}],
			}
}

5.效果图

6.bug

一开始点击选择日期框和选择而时间框会出现xxx is required，再滑动滑块时提示不会消失，但是对判断表单的结果没什么影响

参考文章: Element UI 里的表单验证的required必填的属性不能动态响应？ 作者：小浩子.