elementui form-item中多个字段校验

preface

前两天 太忙了， 今天重新整理了下

需求

实现

方法一

再套一层 el-form-item 即可实现
外层的 * 号 可以通过 使用 elementUI 类名 或者 slot=label 来实现
弊端， 在数据校验的时候会有 bug

<!-- is-required 是直接使用了 elementui 中的 *， 也可以通过slot 自己添加 * -->
        <el-form-item class="is-required" label="固定时间段">
          <div class="add__coupon-pkg__duration-wrapper">
            <el-form-item prop="durationStart">
              <el-time-picker
                v-model="form.durationStart"
                range-separator="至"
                format="HH:mm"
                value-format="HH:mm"
                placeholder="开始时间"
                :picker-options="{format: 'HH:mm'}"
              ></el-time-picker>
            </el-form-item>
            <div class="add__coupon-pkg__duration-dash">至</div>
            <el-form-item prop="durationEnd">
              <el-time-picker
                v-model="form.durationEnd"
                range-separator="至"
                format="HH:mm"
                value-format="HH:mm"
                placeholder="结束时间"
                :picker-options="{format: 'HH:mm'}"
              ></el-time-picker>
            </el-form-item>
            <!--    <div class="add__coupon-pkg__duration">
           
            </div>-->
          </div>
        </el-form-item>

方法二（推荐）

只对 durationStart 字段进行校验
在 durationStart 校验规则中对 durationEnd 进行校验

<el-form-item label="固定时间段" prop="durationStart">
          <div class="add__coupon-pkg__duration-wrapper">
            <div class="add__coupon-pkg__duration">
              <el-time-picker
                v-model="form.durationStart"
                range-separator="至"
                format="HH:mm"
                value-format="HH:mm"
                placeholder="开始时间"
                :picker-options="{format: 'HH:mm'}"
              ></el-time-picker>
            </div>
            <div class="add__coupon-pkg__duration-dash">至</div>
            <div class="add__coupon-pkg__duration">
              <el-time-picker
                v-model="form.durationEnd"
                range-separator="至"
                format="HH:mm"
                value-format="HH:mm"
                placeholder="结束时间"
                :picker-options="{format: 'HH:mm'}"
              ></el-time-picker>
            </div>
          </div>
        </el-form-item>

rules 中 校验代码

  durationStart: [
          {
            required: true,
            validator: (rules, value, cb) => {
              let { durationEnd } = this.form;
              if (!value || !durationEnd) {
                return cb(new Error("固定时间段不能为空!"));
              }

              return cb();
            },
            trigger: "change"
          }
        ],

效果