ElementUI 表单单个验证

ElementUI 表单单个验证

今日在工作遇到一个问题,需求是这样的,总共有12个字段,其中第四个字段如果填写了,第五个,第六个和第七个就非必填,如果第五个,第六个第七个填了,第四个就非必填

实例图

如果区域选择的是北京,则只要填写前三项就可以,
如果区域选择的是上海或者不选,则校验的是全部
如下图

解决方法

方案一
简单粗暴,好实现,技术含量低
直接将表单按字段拆分开,分成两个或者三个的表单,根据条件,校验需要的表单.
方案二
elementUI官方在表单校验文档中已经说明,取消单个校验的方法
结合这个方法使用Promise.all校验,如果最后的数量为0则表示校验通过
ElementUI官网地址

代码如下

<template lang="">
  <div>
    <el-card class="box-card" style="width: 750px;margin: auto;">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="活动名称" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="活动区域" prop="region">
          <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
            <el-option label="上海" value="上海"></el-option>
            <el-option label="北京" value="北京"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动时间" required>
          <el-col :span="11">
            <el-form-item prop="date1">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="ruleForm.date1"
                style="width: 100%;"
              ></el-date-picker>