Element UI 里的表单验证的required必填的属性不能动态响应？

Question

现在遇到的问题：在一个表单里，有A、B 2个select下拉框，当A下拉框里面为某个特定的值的时候B下拉框为必填项，否则为可选项。我试过在rules里面这样写：

    rules:{    
        overseasStudents:[{ required:!this.overseasStatus,message:'请选择留学人员',trigger:'blur' }] 
    }

通过操作this.overseasStatus这个的布尔值来实现required这个属性的值，但是不行，好想只识别初始化的值，初始化是true的话那就是必填，后面改动的时候是不响应的。（我用的ElementUI的版本是1.4的）

怎么解呢？希望各位能给出思路，遇到过的大佬，麻烦指点一二。小老弟感激不尽。

Answer 1

已经解决。（直接上代码）

                     <el-form-item label="机构级别1" prop="govtOrgLevel" :required="newBasicForm.isGovtWork == '1'? true:false">
                         <el-select v-model="newBasicForm.govtOrgLevel" placeholder="请选择机构级别" :disabled="newBasicForm.isGovtWork == '1'? false:true">
                            <el-option
                              v-for="item in orgLevelOptions"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                          </el-select>
                      </el-form-item>

你需要在监听这个属性 另外一定要加$nextTick() 不加的话切换必选属性的时候会触发框架自带的验证会出现 XX is required。

  'newBasicForm.isGovtWork'(val){
    this.$nextTick(()=>{
    if(val !== '1'){
        this.$refs.newBasicForm.validateField('govtOrgLevel');
        this.newBasicForm.govtOrgLevel='';// 政府机构级别,

    }
    })
  },

在rules里面可以不用加 requied

Answer 2

<el-form-item label="机构级别1" prop="govtOrgLevel" :rules="{required:newBasicForm.isGovtWork == '1'? true:false,message:'请选择留学人员'}">
     <el-select v-model="newBasicForm.govtOrgLevel" placeholder="请选择机构级别" :disabled="newBasicForm.isGovtWork == '1'? false:true">
        <el-option
          v-for="item in orgLevelOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
</el-form-item>

Answer 3

    trigger: ["blur", "change"]

Answer 4

change时时候：

this.rules.overseasStudents = [].contact(this.rules.overseasStudents)

Answer 5

我也遇到这个问题，从表单校验换成自定义校验就可以了，记得要写else { callback() }

Answer 6

你需要在e-form 添加 :model="这个对象"就可以实现element-ui自动验证了

Answer 7

prop属性

Answer 8

兄弟，你直接把rules写内部不就行了，搞这么麻烦还监听！

Answer 9

rules使用computed计算