vue3.0中使用element UI表單遍歷校驗問題解決
問題
在使用vue3.0寫項目的時候遇到一個需要遍歷的表單,可以增加刪除表單對象
不考慮校驗問題的話,就是簡單的數(shù)組包form對象。涉及校驗的時候,按照以往的寫法就是綁定ref值,然后調(diào)用組件的validate方法【form表單中配置rule規(guī)則】。
解決方法就是將數(shù)組內(nèi)嵌在一個對象中,對象的結(jié)構(gòu)跟我們定義的form對象結(jié)構(gòu)一致
//我們需要遍歷的form對象數(shù)組 const arr = [ { name:'', sex:'', age:'', },{ name:'', sex:'', age:'', } ] //處理后的對象 const afterForm = { name:'', sex:'', age:'', child:arr,//這里的arr就是我們需要遍歷的數(shù)組【這個key值可以隨便取,不一定非得是‘child',盡量不要出現(xiàn)歧義就好】 }
然后就是html中的dom結(jié)構(gòu)寫法
<el-dialog v-model="addPageVisible" width="1000px" title="新增頁面參數(shù)配置" @closed="closeDialog"> <el-form :model="form" label-width="120px" :inline="true" ref="ruleFormRef" :rules="rules"> <el-card v-for="(item, index) in form.child" :key="index" shadow="hover" class="mb20"> <el-form-item label="頁面名稱:" :prop="`child[${index}].pageName`" :rules="rules.pageName"> <el-input v-model.trim="item.pageName" class="length-limit"></el-input> </el-form-item> <el-form-item label="頁面路由:" :prop="`child[${index}].routerName`" :rules="rules.routerName"> <el-input v-model.trim="item.routerName" class="length-limit"></el-input> </el-form-item> <el-form-item label="頁面類型:" :prop="`child[${index}].businessType`" :rules="rules.businessType"> <el-select v-model.trim="item.businessType" class="length-limit"> <el-option v-for="item in bussinessOptions" :value="item.value" :label="item.label" :key="item.value" ></el-option> </el-select> </el-form-item> <div class="pageManage__dialog-foot"> <el-button type="primary" round @click="addNewForm" v-if="index === allForm.length - 1" >新增配置表單</el-button > <el-button round :disabled="allForm.length === 1 && index === 0" @click="deleteForm(index)" >刪除表單</el-button > </div> </el-card> </el-form> <template #footer> <span class="dialog-footer"> <el-button round @click="addPageVisible = false">取 消</el-button> <el-button round type="primary" @click="submitNewPage">提交</el-button> </span> </template> </el-dialog> //這是我實際項目的頁面,所以定義的參數(shù)名可能不太一樣
寫法上跟一般的form表達(dá)差不多,只是我們el-form綁定的model值應(yīng)該是我們處理過的對象,主要有兩個地方需要注意
el-form-item上面綁定的prop值應(yīng)該寫成 :prop="child[${index}].pageName
",rules也要綁定到對應(yīng)的值。
const rules = reactive({ pageName: [{ required: true, message: '請輸入頁面名稱', trigger: 'blur' }], routerName: [{ required: true, message: '請輸入路由名稱', trigger: 'blur' }], businessType: [{ required: true, message: '請選擇頁面類型', trigger: 'change' }], })
考慮到我們需要用的數(shù)組會有數(shù)量變化,可以直接用computed計算屬性去得到處理后的數(shù)組
const form = computed(() => { return { pageName: 'string', routerName: 'string', businessType: 'string', child: allForm.value } })
然后就能成功了??!
總結(jié)
我自己的理解,就是將我們需要校驗的值在一個偽造的form對象中處理,然后內(nèi)層遍歷的的真實form對象可以用指定值的方式去綁定校驗規(guī)則。
到此這篇關(guān)于vue3.0中使用element UI表單遍歷校驗問題解決的文章就介紹到這了,更多相關(guān)element表單遍歷校驗內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue導(dǎo)入excel文件,vue導(dǎo)入多個sheets的方式
這篇文章主要介紹了vue導(dǎo)入excel文件,vue導(dǎo)入多個sheets的方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-08-08vue3+ts+element-plus實際開發(fā)之統(tǒng)一調(diào)用彈窗封裝的詳細(xì)過程
這篇文章主要介紹了vue3+ts+element-plus實際開發(fā)之統(tǒng)一調(diào)用彈窗封裝的詳細(xì)過程,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-03-03