vue3-踩坑记录-＜el-form-item＞中包含多个内容并给其中一个增加非空校验。

1、用element-plus做的表单提交。其中有一个表单元素包含了多个内容。大体上就是需要用一个switch开关控制里面的一个时间选择组件的必填校验以及显隐。如截图👇。

普通状态：

出发非空校验：

 

 因为之前没有写过一个item里面有多个内容而且还要单独做一个元素的非空校验，所以就导致不触发校验。直到我再时间选择控件的外层套了一层<el-form-item>标签。我发现。。。他好了。。。瞬间恍然大悟！
 

        <el-form-item label="立即发布：" :rules="infoForm.publishNow ? [{ required: false }] : infoRules.specifyTime" class="formItemStyle">
          <div class="pushNowStyle">
            <el-switch v-model="infoForm.publishNow" @change="publishChange" style="--el-switch-on-color: #13ce66" />
            <div class="showPicker" v-if="!infoForm.publishNow">
              <p>指定时间</p>
              <el-form-item prop="specifyTime">
                <el-date-picker v-model="infoForm.specifyTime" type="datetime" placeholder="选择时间" format="YYYY/MM/DD HH:mm:ss" value-format="YYYY/MM/DD HH:mm:ss" />
              </el-form-item>
            </div>
          </div>
        </el-form-item>

这个问题解决了2个多小时，仅此记录。共勉。