elementUI一条el-form-item控制两个必填项

实现效果
申请日期是日期跟时段拼接的
在这里插入图片描述

        <el-form-item label="申请类型" prop="applyType" :rules="[{ required: true, message: '必选', trigger: 'change' }]">
          <el-select v-model="ruleForm.applyType" filterable  placeholder="申请类型" style="width: 100%;">
            <el-option v-for="(value,key) of {1:'日常居家' ,2:'春节居家'}" :value="key" :label="value" :key="key" />
          </el-select>
        </el-form-item>
        <el-form-item label="申请日期" prop="applyDate" :rules="[{ required: true, message: '必选', trigger: 'change' }]" v-if="ruleForm.applyType == 2">
          <el-date-picker v-model="ruleForm.applyDate" type="dates"  placeholder="请选择日期" value-format="yyyy-MM-dd" style="width:100%"  :picker-options="pickerOptions" />
        </el-form-item>
        <el-form-item label="申请日期" v-if="ruleForm.applyType == 1" :class="{'is-required':ruleForm.applyType == 1}">
          <div style="display:flex;justify-content: flex-start;">
          <el-form-item prop="applyDate" :rules="[{required: true, message: '日期必选',trigger:'change'}]">
            <el-date-picker v-model="ruleForm.applyDate" type="date" placeholder="请选择日期" value-format="yyyy-MM-dd"
              style="width:100%" @input="forceUpdate()" :picker-options="pickerOptions" />
          </el-form-item>
          <el-form-item prop="time"  :rules="[{required: true, message: '时段必选',trigger:'change'}]">
            <el-select v-model="ruleForm.time" filterable clearable placeholder="请选择时段" style="width: 100%;">
              <el-option v-for="(item,index) in ['08:30:00','09:00:00','13:30:00']" :key="index" :label="item"
                :value="item" />
            </el-select>
          </el-form-item>
          </div>
        </el-form-item>

需要注意
在这里插入图片描述
el-form-item里面是可以继续套el-form-item的，好处是调用重置方法resetFields()可以将两个表单控件都重置掉
另外需要注意外层的el-form-item 必须加上class属性is-required才会有*号必填显示，is-required是系统定义好的css

原有的实现方式不推荐
原有代码示例

        <el-form-item label="申请日期" prop="applyDate" :rules="[{required: true, validator: validTime,trigger:'change'}]" v-if="ruleForm.applyType == 1">
          <div style="display:flex;justify-content: flex-start;">
            <el-date-picker v-model="ruleForm.applyDate" type="date" placeholder="请选择日期" value-format="yyyy-MM-dd"
              style="width:100%" @input="forceUpdate()" :picker-options="pickerOptions" /> 
            <el-select v-model="ruleForm.time" filterable clearable placeholder="请选择时段" style="width: 100%;">
              <el-option v-for="(item,index) in ['08:30:00','09:00:00','13:30:00']" :key="index" :label="item"
                :value="item" />
            </el-select>
          </div>
        </el-form-item>

      validTime(rule, value, callback) {
        if (!this.ruleForm.applyDate) {
          return callback(new Error('请选择日期!'))
        } else if (!this.ruleForm.time) {
          return callback(new Error('请选择时段!'))
        } else {
          callback()
        }
      },

存在以下不友好地方
在这里插入图片描述

1.填写了一个日期就触发了必填提示，且提示项提示位置不太对（时段应该在后面）
2.调用重置方法resetFields()无法将时段字段置空

elementUI一条el-form-item控制两个必填项

悦读