项目场景:
在element 表单中我们需要校验,当表单中有数据变动时,会触发检验。
问题描述
提示:这里描述项目中遇到的问题:
在项目中,提交时下拉菜单没有选,会触发校验提示,去选中下拉菜单的数据,不会再次触发校验,导致校验提示文字依然存在
原因分析:
一般来说遇到了校验失效问题,有值的情况下,校验规则并没有对应消失,有几个易错的地方
- 表单使用了v-model,而不是model,我这里ok的
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="100px"
label-position='left'
size="small">
- 对应的下来菜单是否添加了prop属性,发现我的有
<el-form-item label="问题类型" prop="feedBackType" v-if="roleType === 'jgRole'">
<el-select v-model="ruleForm.feedBackType" placeholder="请选择问题类型" >
<el-option label="数据问题(数据缺失或不正确)" value="dataProblem"></el-option>
<el-option label="功能问题(BUG)" value="functionalProblem"></el-option>
<el-option label="业务咨询" value="businessConsulting"></el-option>
<el-option label="功能建议" value="functionalAdvise"></el-option>
</el-select>
- 检查rules,里面校验提示的事件是否正确,发现了问题,el-select校验规则里面的trigger应该是change,我写成了rule
rules: {
description: [
{required: true, message: '内容不能为空', trigger: 'blur'},
],
feedBackType: [
{required: true, message: '请选择问题类型', trigger: 'change'},
],
file: [
{message: '请上传附件', trigger: 'change', required: true,}
]
},
- 我百度到了其他两种常见情况。因为嵌套太深入,导致from检测不到ruleForm的变化
解决方案:
上面出现的几种情况。前三种细心一点就可以避免发生,第四种问题相较于最难的
第四种情况解决方案
- 添加change事件在里面强制更新dom触发(视图更新)
change(val){
this.$set(this.addForm,'tableName',val)
this.$forceUpdate()
}
- 再change事件里面对form表单绑定的数据进行拷贝 this.ruleForm= JSON.parse(JSON.stringify(this.ruleForm));或者 像这样描述下 this.ruleForm= { …this.ruleForm};
change(val){
this.addForm={...this.addForm}
}