vue elementUi form表单 配合v-show指令以及自定义校验方法 实现隐藏元素不校验

表单中通过开关控制项目是否显示，且项目显示时需要做必填校验，而项目隐藏时不做必填校验

代码：

data() {
  // 校验选择项
  const validateSelect = (rule, value, callback) => {
    if (rule.field === 'measureParamLevelId' && this.qualityCheckType.measureFlag && !value) {
      callback(new Error(rule.message))
    } else if (rule.field === 'pdcaMeasureParamLevelId' && this.qualityCheckType.pdcaFlag && !value) {
      callback(new Error(rule.message))
    } else if (rule.field === 'pdcaFeedbackParamFeedbackId' && this.qualityCheckType.measureFlag && this.qualityCheckType.feedbackFlag && this.qualityCheckType.pdcaFlag && !value) {
      callback(new Error(rule.message))
    } else {
      callback()
    }
  }
  return {
    rules: {
      typeName: [
        { required: true, message: '请输入质控类型名称！', trigger: 'blur' }
      ],
      measureParamLevelId: [
        { required: true, validator: validateSelect, message: '请选择严重程度级别！' }
      ],
      pdcaMeasureParamLevelId: [
        { required: true, validator: validateSelect, message: '请选择严重程度级别！' }
      ],
      pdcaFeedbackParamFeedbackId: [
        { required: true, validator: validateSelect, message: '请选择追踪结果！' }
      ]
    },
    originalName: null, // 未修改之前的名字
    loading: false,
    dialogVisible: false,
    isUpdate: false,
    qualityCheckType: { ...DEFAULT_QUALITYCHECKTYPE },
    paramLevelList: [],
    paramFeedbackList: []
  }
}

<el-form ref="qualityCheckTypeForm" :model="qualityCheckType" class="form" :rules="rules">
  <el-col :span="24">
    <el-form-item label="质控类型:" label-width="90px" prop="typeName">
      <el-input
        v-model.trim="qualityCheckType.typeName"
        maxlength="15"
        placeholder="请输入质控类型名称"
        class="width180"
      />
    </el-form-item>
  </el-col>
  <el-col :span="24">
    <el-form-item label="是否整改:" label-width="90px">
      <el-switch v-model="qualityCheckType.measureFlag" active-color="#13ce66" />
    </el-form-item>
  </el-col>
  <el-col v-show="qualityCheckType.measureFlag" :span="24">
    <el-form-item label="启用条件:" label-width="90px" prop="measureParamLevelId">
      <span>质控问题</span>
      <el-select ref="measureParamLevelId" v-model="qualityCheckType.measureParamLevelId" class="width180" placeholder="请选择严重程度" @change="chageTextColor($event,'measureParamLevelId')">
        <el-option v-for="item in paramLevelList" :key="item.id" :label="item.levelName" :value="item.id" v-html="'<span style=color:'+item.color+'>'+item.levelName+'</span>'" />
      </el-select>
      <span>级别以上</span>
    </el-form-item>
  </el-col>
  <el-col v-show="qualityCheckType.measureFlag" :span="24">
    <el-form-item label="是否追踪:" label-width="90px">
      <el-switch v-model="qualityCheckType.feedbackFlag" active-color="#13ce66" />
    </el-form-item>
  </el-col>
  <el-col :span="24">
    <el-form-item label="PDCA循环:" label-width="90px">
      <el-switch v-model="qualityCheckType.pdcaFlag" active-color="#13ce66" />
    </el-form-item>
  </el-col>
  <el-col v-show="qualityCheckType.pdcaFlag" :span="17">
    <el-form-item label="启用条件:" label-width="90px" class="pdcaCls" prop="pdcaMeasureParamLevelId">
      <span>质控问题</span>
      <el-select ref="pdcaMeasureParamLevelId" v-model="qualityCheckType.pdcaMeasureParamLevelId" class="width180" placeholder="请选择严重程度" @change="chageTextColor($event,'pdcaMeasureParamLevelId')">
        <el-option v-for="item in paramLevelList" :key="item.id" :label="item.levelName" :value="item.id" v-html="'<span style=color:'+item.color+'>'+item.levelName+'</span>'" />
      </el-select>
      <span>级别以上(且)</span>
    </el-form-item>
  </el-col>
  <el-col v-show="qualityCheckType.measureFlag && qualityCheckType.pdcaFlag && qualityCheckType.feedbackFlag" :span="5">
    <el-form-item prop="pdcaFeedbackParamFeedbackId">
      <el-select ref="pdcaFeedbackParamFeedbackId" v-model="qualityCheckType.pdcaFeedbackParamFeedbackId" class="width180" multiple placeholder="请选择追踪结果">
        <el-option v-for="item in paramFeedbackList" :key="item.id" :label="item.feedbackName" :value="item.id" />
      </el-select>
    </el-form-item>
  </el-col>
  <el-col :span="24" style="text-align:center;">
    <el-button v-stop-reClick="2000" type="primary" class="save" :loading="loading" round @click.native.prevent="submitForm">保 存</el-button>
  </el-col>

</el-form>

1、form表单绑定:rules="rules"规则

2、在data中编写rules规则

3、添加自定义校验方法validateSelect

const validateSelect = (rule, value, callback) => {
    if (rule.field === 'measureParamLevelId' && this.qualityCheckType.measureFlag && !value) {
      callback(new Error(rule.message))
    } else if (rule.field === 'pdcaMeasureParamLevelId' && this.qualityCheckType.pdcaFlag && !value) {
      callback(new Error(rule.message))
    } else if (rule.field === 'pdcaFeedbackParamFeedbackId' && this.qualityCheckType.measureFlag && this.qualityCheckType.feedbackFlag && this.qualityCheckType.pdcaFlag && !value) {
      callback(new Error(rule.message))
    } else {
      callback()
    }
  }

根据field值判断业务逻辑 根据data中的数据值判断当前元素是否显示 根据value值判断是否有值

不满足条件时，返回callback(new Error(rule.message))

满足条件时，返回callback()