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

效果