項(xiàng)目場(chǎng)景：
在element 表單中我們需要校驗(yàn)，當(dāng)表單中有數(shù)據(jù)變動(dòng)時(shí)，會(huì)觸發(fā)檢驗(yàn)。
問(wèn)題描述
提示：這里描述項(xiàng)目中遇到的問(wèn)題：
在項(xiàng)目中，提交時(shí)下拉菜單沒(méi)有選，會(huì)觸發(fā)校驗(yàn)提示，去選中下拉菜單的數(shù)據(jù)，不會(huì)再次觸發(fā)校驗(yàn)，導(dǎo)致校驗(yàn)提示文字依然存在
原因分析：
一般來(lái)說(shuō)遇到了校驗(yàn)失效問(wèn)題，有值的情況下，校驗(yàn)規(guī)則并沒(méi)有對(duì)應(yīng)消失，有幾個(gè)易錯(cuò)的地方
- 表單使用了v-model，而不是model，我這里ok的
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="100px"
label-position='left'
size="small">
- 對(duì)應(yīng)的下來(lái)菜單是否添加了prop屬性，發(fā)現(xiàn)我的有
<el-form-item label="問(wèn)題類型" prop="feedBackType" v-if="roleType === 'jgRole'">
<el-select v-model="ruleForm.feedBackType" placeholder="請(qǐng)選擇問(wèn)題類型" >
<el-option label="數(shù)據(jù)問(wèn)題（數(shù)據(jù)缺失或不正確）" value="dataProblem"></el-option>
<el-option label="功能問(wèn)題（BUG）" value="functionalProblem"></el-option>
<el-option label="業(yè)務(wù)咨詢" value="businessConsulting"></el-option>
<el-option label="功能建議" value="functionalAdvise"></el-option>
</el-select>
- 檢查rules,里面校驗(yàn)提示的事件是否正確，發(fā)現(xiàn)了問(wèn)題，el-select校驗(yàn)規(guī)則里面的trigger應(yīng)該是change，我寫成了rule
rules: {
description: [
{required: true, message: '內(nèi)容不能為空', trigger: 'blur'},
],
feedBackType: [
{required: true, message: '請(qǐng)選擇問(wèn)題類型', trigger: 'change'},
],
file: [
{message: '請(qǐng)上傳附件', trigger: 'change', required: true,}
]
},
- 我百度到了其他兩種常見(jiàn)情況。因?yàn)榍短滋钊?，?dǎo)致from檢測(cè)不到ruleForm的變化
解決方案：
上面出現(xiàn)的幾種情況。前三種細(xì)心一點(diǎn)就可以避免發(fā)生，第四種問(wèn)題相較于最難的文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-520544.html
第四種情況解決方案文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-520544.html
- 添加change事件在里面強(qiáng)制更新dom觸發(fā)（視圖更新）
change(val){
this.$set(this.addForm,'tableName',val)
this.$forceUpdate()
}
- 再change事件里面對(duì)form表單綁定的數(shù)據(jù)進(jìn)行拷貝 this.ruleForm= JSON.parse(JSON.stringify(this.ruleForm));或者 像這樣描述下 this.ruleForm= { …this.ruleForm};
change(val){
this.addForm={...this.addForm}
}
到了這里，關(guān)于在vue里面，element ui，el-select表單選中校驗(yàn)失敗的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
