Element通過v-for循環(huán)渲染的form表單校驗的實現(xiàn)
更新時間：2022年04月24日 15:32:23 作者：無語聽梧桐
日常業(yè)務(wù)開發(fā)中，form表單校驗是一個很常見的問題，本文主要介紹了Element通過v-for循環(huán)渲染的form表單校驗的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
普通的form表單校驗
日常業(yè)務(wù)開發(fā)中，對于中后臺管理系統(tǒng)，form表單校驗是一個很常見的問題。
查閱Element官方文檔，我們了解到，form表單校驗是這樣的，需要給所校驗的el-form-item添加prop屬性值，這個屬性值便就是當(dāng)前元素v-model 所綁定的值。如圖所示：
v-for 循壞的表單校驗
那么問題來了，通過v-for 遍歷循環(huán)渲染的form表單怎么添加校驗?zāi)?？主要問題就在于其prop了。
再次閱讀官方文檔，發(fā)現(xiàn)這樣一個行字，動態(tài)增減表單項，誒，動態(tài)增減，好像和我的需求差不多呢，也有校驗，點開看看。這是鏈接
如圖：v-for 循壞的el-form-item，區(qū)分他們的是index，domain是一個數(shù)組對象，每個el-form-item 中綁定的值是每一項的value，設(shè)置每個prop為圖中標(biāo)識的那樣，從而實現(xiàn)校驗。
實現(xiàn)的代碼
官網(wǎng)中通過字符串拼接的方式添加prop，看著稍稍比較繁瑣，可以通過ES6中的模版字符串替換。
效果圖：
到此這篇關(guān)于Element通過v-for循環(huán)渲染的form表單校驗的實現(xiàn)的文章就介紹到這了,更多相關(guān)Element v-for循環(huán)渲染的form表單校驗內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue3組件化開發(fā)之可復(fù)用性的應(yīng)用實例詳解
不斷把公共的、可以獨立拆分出來的抽出來作為一個獨立可復(fù)用的組件來向上提供調(diào)用,這樣讓我們的代碼更加方便組織和管理,并且擴展性也更強,下面這篇文章主要給大家介紹了關(guān)于vue3組件化開發(fā)之可復(fù)用性應(yīng)用的相關(guān)資料,需要的朋友可以參考下2022-06-06
這篇文章主要為大家介紹了命令行CLI一鍵生成各種煩人的lint配置實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
這篇文章主要介紹了Vue引入高德地圖實現(xiàn)流程，實現(xiàn)步驟是通過vue的方法引入地圖，初始化地圖，設(shè)置寬和高，本文通過實例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-12-12
這篇文章主要介紹了vue實現(xiàn)購物車拋物線小球動畫效果的方法,結(jié)合實例形式較為詳細(xì)的分析了vue.js實現(xiàn)拋物線動畫效果購物車功能相關(guān)原理與操作注意事項,需要的朋友可以參考下2019-02-02
vue2.0 watch里面的 deep和immediate用法說明
這篇文章主要介紹了vue2.0 watch里面的 deep和immediate用法說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
vue指令只能輸入正數(shù)并且只能輸入一個小數(shù)點的方法
這篇文章主要介紹了vue指令只能輸入正數(shù)并且只能輸入一個小數(shù)點的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
本篇文章主要介紹了VsCode新建VueJs項目的詳細(xì)步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
目前vite主要默認(rèn)是支持給vue3使用的,并且如果使用官方的cli創(chuàng)建的項目一樣會默認(rèn)使用vue3去構(gòu)建項目,此時對于一些vue2的老項目就顯得不友好了,下面這篇文章主要給大家介紹了關(guān)于vue2老項目vite升級改造的相關(guān)資料,需要的朋友可以參考下2022-12-12
本篇文章主要介紹了VUE餓了么樹形控件添加增刪改功能的示例代碼，非常具有實用價值，有興趣的可以了解一下2017-10-10
這篇文章主要介紹了vue中mixins的工具的封裝方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05