您好,登錄后才能下訂單哦!
一、介紹
簡介:在使用elementUI el-form 中,對于業(yè)務(wù)不同的時候可能會產(chǎn)生不同表單結(jié)構(gòu),但是都是存在同一個表單控件el-form中。
圖片介紹:
1、在用戶選擇單選或多選時會有A,B,C,D,E五個選項
2、在用戶選擇簡答題時只會題干,答案以及解析選項(主要是通過v-if來進(jìn)行判斷)
問題引入:當(dāng)用戶選擇不同的題庫時會產(chǎn)生不同的form表單選項,這個時候在進(jìn)行表單提交驗證的時候就需要根據(jù)不同試題類型進(jìn)行判斷,這個時候就需要兩個rules來動態(tài)進(jìn)行表單校驗。
解決方法:在頁面加載的時候在computed方法中進(jìn)行動態(tài)判斷直接返回賦值。
代碼介紹:
// elementui信息 <el-form :model="addQueTable" ref="addQueTable" :rules="addQueRulesList"> <el-form> // data中定義rules updateQusRulesSel:[]; updateQusRules:[]; // computed方法 computed: { // this.updateQusTable.showSelect自己定義的標(biāo)識 updateQusRulesList: function() { if (this.updateQusTable.showSelect) { return this.updateQusRulesSel; } else { return this.updateQusRules; } }
總結(jié):在computed中進(jìn)行值綁定,當(dāng)該表單顯示的時候就會觸發(fā)(一開始是隱藏的),如果一開始頁面加載的時候就觸發(fā)會無法進(jìn)行值判斷,從而報錯。其實能解決問題,通過該種方法。
二、最簡單解決方法
在el-form中定義的rules檢驗字段,如果你的rules中有字段通過v-if進(jìn)行隱藏,rules是不會對隱藏的字段選項進(jìn)行判斷,只要定義一個完整的rules就行,v-if隱藏的部分不會進(jìn)入校驗方法中。
把簡單的問題復(fù)雜化了?。。。?!
感謝該用戶:
總結(jié)
以上所述是小編給大家介紹的vue elementui el-form rules動態(tài)驗證的實例代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對億速云網(wǎng)站的支持!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。