el-select两级联动

最新推荐文章于 2024-07-25 11:21:59 发布

RAY_CHEN.

最新推荐文章于 2024-07-25 11:21:59 发布

阅读量3k

点赞数 2

文章标签： elementui

本文链接：https://blog.csdn.net/weixin_44707050/article/details/120954892

版权

如图，当第一个选择框未选，选择第二个会弹出提示”请先选择第一个框“，然后选择了第一个框后，第二个框的提示消失；

 <el-form-item label="提问类型：">
                <el-form-item prop="questionTypeOne">
                  <el-select v-model="EditRuleForm.questionTypeOne" placeholder="不限" @change='handleSelectQuestionType(1)'>
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item prop="questionTypeTwo" class="questionTypeTwo">
                  <el-select v-model="EditRuleForm.questionTypeTwo" placeholder="不限" >
                    <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-form-item>

 questionTypeOne: [
          { required: true, validator: checkQuestionOne, trigger: "change" },
        ],
        questionTypeTwo: [
          { required: true, validator: checkQuestionTwo, trigger: "change" },
        ],

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

    
    };
        var checkQuestionOne = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请先选择提问类型"));
      } else {
        if (this.EditRuleForm.questionTypeTwo) {
        
          this.$refs.EditRuleForm.validateField("questionTypeTwo");
         
        } else {
          return callback();
        }
      }