项目场景：
在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的变化
解决方案：
上面出现的几种情况。前三种细心一点就可以避免发生，第四种问题相较于最难的文章来源：https://www.toymoban.com/news/detail-520544.html
第四种情况解决方案文章来源地址https://www.toymoban.com/news/detail-520544.html
- 添加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}
}
到了这里，关于在vue里面，element ui，el-select表单选中校验失败的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
