Element通過v-for循環(huán)渲染的form表單校驗(yàn)的實(shí)現(xiàn)
普通的form表單校驗(yàn)
日常業(yè)務(wù)開發(fā)中，對(duì)于中后臺(tái)管理系統(tǒng)，form表單校驗(yàn)是一個(gè)很常見的問題。
查閱Element官方文檔，我們了解到，form表單校驗(yàn)是這樣的，需要給所校驗(yàn)的el-form-item添加prop屬性值，這個(gè)屬性值便就是當(dāng)前元素v-model 所綁定的值。如圖所示：
v-for 循壞的表單校驗(yàn)
那么問題來了，通過v-for 遍歷循環(huán)渲染的form表單怎么添加校驗(yàn)?zāi)?？主要問題就在于其prop了。
再次閱讀官方文檔，發(fā)現(xiàn)這樣一個(gè)行字，動(dòng)態(tài)增減表單項(xiàng)，誒，動(dòng)態(tài)增減，好像和我的需求差不多呢，也有校驗(yàn)，點(diǎn)開看看。這是鏈接
如圖：v-for 循壞的el-form-item，區(qū)分他們的是index，domain是一個(gè)數(shù)組對(duì)象，每個(gè)el-form-item 中綁定的值是每一項(xiàng)的value，設(shè)置每個(gè)prop為圖中標(biāo)識(shí)的那樣，從而實(shí)現(xiàn)校驗(yàn)。
實(shí)現(xiàn)的代碼
官網(wǎng)中通過字符串拼接的方式添加prop，看著稍稍比較繁瑣，可以通過ES6中的模版字符串替換。
效果圖：
到此這篇關(guān)于Element通過v-for循環(huán)渲染的form表單校驗(yàn)的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Element v-for循環(huán)渲染的form表單校驗(yàn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- element的表單校驗(yàn)證件號(hào)規(guī)則及輸入“無”的情況校驗(yàn)通過(示例代碼)
- elementUI動(dòng)態(tài)嵌套el-form表單校驗(yàn)舉例詳解
- ElementPlus表單rules校驗(yàn)的方法步驟
- Vue Element UI 表單自定義校驗(yàn)規(guī)則及使用
- Vue如何使用ElementUI對(duì)表單元素進(jìn)行自定義校驗(yàn)及踩坑
- element表單使用校驗(yàn)之校驗(yàn)失效問題詳解
- Vue系列之Element?UI表單自定義校驗(yàn)規(guī)則
- element表單驗(yàn)證如何清除校驗(yàn)提示語
- element?ui?From表單校驗(yàn)不生效問題解決
相關(guān)文章
在Vue.js中,計(jì)算屬性（computed properties）是組件的重要組成部分,它們根據(jù)組件的數(shù)據(jù)自動(dòng)計(jì)算新的值,并在數(shù)據(jù)變化時(shí)自動(dòng)更新,本文將探討計(jì)算屬性的緩存機(jī)制,并通過有趣的示例展示如何利用計(jì)算屬性緩存結(jié)果,提升應(yīng)用性能,需要的朋友可以參考下2025-03-03
解決vue.js提交數(shù)組時(shí)出現(xiàn)數(shù)組下標(biāo)的問題
今天小編就為大家分享一篇解決vue.js提交數(shù)組時(shí)出現(xiàn)數(shù)組下標(biāo)的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Vue.directive 實(shí)現(xiàn)元素scroll邏輯復(fù)用
這篇文章主要介紹了Vue.directive 實(shí)現(xiàn)元素scroll邏輯復(fù)用功能，文中給大家提到元素實(shí)現(xiàn)滾動(dòng)的條件有兩個(gè)，具體內(nèi)容詳情大家參考下本文2019-11-11
這篇文章主要給大家介紹了關(guān)于vue上傳圖片文件的相關(guān)資料，介紹了利用原始input標(biāo)簽form表單上傳、elementui自帶的el-upload上傳以及elementui實(shí)現(xiàn)一次性上傳多張圖片等方法，需要的朋友可以參考下2021-05-05
vue?cli2?和?cli3去掉eslint檢查器報(bào)錯(cuò)的解決
這篇文章主要介紹了vue?cli2?和?cli3去掉eslint檢查器報(bào)錯(cuò)的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue3插槽:el-table表頭插入tooltip及更換表格背景色方式
這篇文章主要介紹了vue3插槽:el-table表頭插入tooltip及更換表格背景色方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
使用proxy實(shí)現(xiàn)一個(gè)更優(yōu)雅的vue【推薦】
Proxy 用于修改某些操作的默認(rèn)行為，等同于在語言層面做出修改，所以屬于一種“元編程”。這篇文章主要介紹了用proxy實(shí)現(xiàn)一個(gè)更優(yōu)雅的vue,需要的朋友可以參考下2018-06-06
Vue中實(shí)現(xiàn)路由跳轉(zhuǎn)的三種方式(超詳細(xì)整理)
這篇文章給大家詳細(xì)的整理了Vue中實(shí)現(xiàn)路由跳轉(zhuǎn)的三種方式,使用vue-router,聲明式-router-link,編程式這三種方法,分別有詳細(xì)的代碼示例,需要的朋友可以參考下2023-09-09
如何利用Vue3管理系統(tǒng)實(shí)現(xiàn)動(dòng)態(tài)路由和動(dòng)態(tài)側(cè)邊菜單欄
通常我們?cè)趘ue項(xiàng)目中都是前端配置好路由的,但在一些項(xiàng)目中我們可能會(huì)遇到權(quán)限控制,這樣我們就涉及到動(dòng)態(tài)路由的設(shè)置了,下面這篇文章主要給大家介紹了關(guān)于如何利用Vue3管理系統(tǒng)實(shí)現(xiàn)動(dòng)態(tài)路由和動(dòng)態(tài)側(cè)邊菜單欄的相關(guān)資料,需要的朋友可以參考下2022-02-02
詳解vue-cli項(xiàng)目中用json-sever搭建mock服務(wù)器
這篇文章主要介紹了詳解vue-cli項(xiàng)目中用json-sever搭建mock服務(wù)器，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11