vue3.0中使用element UI表單遍歷校驗問題解決
更新時間：2022年04月01日 09:04:01 作者：saligia28
本文主要介紹了vue3.0中使用element UI表單遍歷校驗問題解決，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
問題
在使用vue3.0寫項目的時候遇到一個需要遍歷的表單，可以增加刪除表單對象
不考慮校驗問題的話，就是簡單的數(shù)組包form對象。涉及校驗的時候，按照以往的寫法就是綁定ref值，然后調用組件的validate方法【form表單中配置rule規(guī)則】。
解決方法就是將數(shù)組內嵌在一個對象中，對象的結構跟我們定義的form對象結構一致
//我們需要遍歷的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結構寫法
<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表達差不多，只是我們el-form綁定的model值應該是我們處理過的對象，主要有兩個地方需要注意
el-form-item上面綁定的prop值應該寫成 :prop="child[${index}].pageName"，rules也要綁定到對應的值。
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 }
})然后就能成功了?。?/p>
總結
我自己的理解，就是將我們需要校驗的值在一個偽造的form對象中處理，然后內層遍歷的的真實form對象可以用指定值的方式去綁定校驗規(guī)則。
到此這篇關于vue3.0中使用element UI表單遍歷校驗問題解決的文章就介紹到這了,更多相關element表單遍歷校驗內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Vue-DPlayer是一個易于使用、高性能的基于Vue.js的視頻播放器組件,本文給大家介紹Vue DPlayer詳細使用,本文將從四個方面對Vue-DPlayer進行詳細的闡述,感興趣的朋友一起看看吧2023-10-10
這篇文章主要介紹了vue中遇到的坑之變化檢測問題（數(shù)組相關） ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要給大家介紹了關于vue3使用base64加密的兩種方法,我們在vue項目中有時會使用到Base6464轉碼,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-07-07
這篇文章給大家介紹了基于vue封裝一個帶眼睛的密碼子組件的方法,文章中有詳細的代碼講解,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2023-09-09
這篇文章主要為大家詳細介紹了Vue 2.0雙向綁定原理的實現(xiàn)方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
vue-router2.0 組件之間傳參及獲取動態(tài)參數(shù)的方法
下面小編就為大家?guī)硪黄獀ue-router2.0 組件之間傳參及獲取動態(tài)參數(shù)的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
computed是vue的配置選項,它的值是一個對象,其中可定義多個計算屬性,每個計算屬性就是一個函數(shù),下面這篇文章主要給大家介紹了關于vue中計算屬性computed的詳細講解,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了vue實現(xiàn)用v-bind給src和href賦值，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
解決父組件將子組件作為彈窗調用只執(zhí)行一次created的問題
這篇文章主要介紹了解決父組件將子組件作為彈窗調用只執(zhí)行一次created的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
在Vue核心中除了響應式原理外,視圖渲染也是重中之重,下面這篇文章主要給大家介紹了關于Vue組件的渲染流程,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-06-06