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

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

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

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

怎么解呢?希望各位能给出思路,遇到过的大佬,麻烦指点一二。小老弟感激不尽。
阅读 36.8k
9 个回答

已经解决。(直接上代码)

                     <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

<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>
    trigger: ["blur", "change"]

change时时候:

this.rules.overseasStudents = [].contact(this.rules.overseasStudents)
新手上路,请多包涵

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

新手上路,请多包涵

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

新手上路,请多包涵

prop属性
image.png

image.png

新手上路,请多包涵

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

新手上路,请多包涵

rules使用computed计算

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题