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",
          		}],
			}
}

6.bug

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

经验分享 程序员 微信小程序 职场和发展