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

最新推荐文章于 2025-01-03 09:36:25 发布

niruge

最新推荐文章于 2025-01-03 09:36:25 发布

阅读量2.5k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/qq_41346332/article/details/128641659

前端专栏收录该内容

5 篇文章

订阅专栏

文章介绍了如何在Vue.js应用中优化表单元素，特别是当申请日期需要与时段拼接时。新实现使用两个独立的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()
        }
      },