el-form表单联动校验提示文案问题

 

 

如上述三图所示，

 两个提问类型下拉框为联动关系，当未选择时，直接点击提交，会校验提示“请选择提问类型”；

当一级类型未选，点击二级类型，二级类型的校验为“请先选择一级类型”；

当无论哪种情况二级类型有校验文案出现时，这时选择一级类型后，二级类型的校验提示消失；

    var checkQuestionTwo = (rule, value, callback) => {
      if (!value) {
        if (this.isrequired) {
          return callback(new Error("请先选择一级类型"));
        } else {
          return callback(new Error("请先选择提问类型"));
        }
      } else {
        return callback();
      }
    };

在data中写二级类型的校验；

isrequires表示是否触发（请先选择一级类型的提示）

isrequired: false,

 <el-form-item prop="questionTypeTwo" class="questionTypeTwo">

                <el-select v-model="EditRuleForm.questionTypeTwo" placeholder="不限" @focus="handleFocusTwo" @change="handleSelectTypeTwo">
                  <el-option v-for="item in questionTypeTwooptions" :key="item.id" :label="item.dictLabel" :value="item.dictValue">
                  </el-option>
                </el-select>
              </el-form-item>

    handleFocusTwo() {
      if (!this.EditRuleForm.questionTypeOne) {
        this.isrequired = true;
        this.$refs.EditRuleForm.validateField("questionTypeTwo");
      }
    },

    //提问类型第一个选择
    handleSelectType(val) {
     
      if (this.EditRuleForm.questionTypeOne) {
        this.$refs.EditRuleForm.clearValidate("questionTypeTwo");
      }
    },

@focus触发事件，handleFocusTwo表示，点击二级类别，发现一级类别还未选，那么isrequired为true，触发二级类别的校验；

在二级类别的校验方法中可看到，isrequired为true才触发（请选择一级类别的提示）

handleSelecttype是选择一级类别的方法，当选择值后，二级类别之前提示的校验清空；