vue+elementUI多表單同時(shí)提交及表單校驗(yàn)最新解決方案
更新時(shí)間：2024年03月08日 09:35:04 作者：垃圾俠
假設(shè)有一個(gè)頁(yè)面,需要分三步填寫三個(gè)表單,且每個(gè)表單位于獨(dú)立的組件中,然后最后保存同時(shí)提交,如何進(jìn)行表單必填項(xiàng)校驗(yàn),下面小編給大家介紹vue+elementUI多表單同時(shí)提交及表單校驗(yàn)最新解決方案,感興趣的朋友一起看看吧
問：
假設(shè)有一個(gè)頁(yè)面，需要分三步填寫三個(gè)表單，且每個(gè)表單位于獨(dú)立的組件中，然后最后保存同時(shí)提交，如何進(jìn)行表單必填項(xiàng)校驗(yàn)？
答：
1. 為每個(gè)組件設(shè)置ref，值分別為ref1，ref2，ref3，再為各個(gè)組件中的el-form設(shè)置獨(dú)立的ref和rules，三個(gè)表單的ref值分別為form1，form2，form3.
// 組件1 <Component1 ref="ref1"></Component1>
<template>
<div>
<el-form ref="form1"></el-form>
</div>
</template>
// 組件2 <Component2 ref="ref2"></Component2>
<template>
<div>
<el-form ref="form2"></el-form>
</div>
</template>
// 組件3 <Component3 ref="ref3"></Component3>
<template>
<div>
<el-form ref="form3"></el-form>
</div>
</template>2. 父級(jí)組件引入三個(gè)子組件
<Component1 ref="ref1"></Component1> <Component2 ref="ref2"></Component2> <Component3 ref="ref3"></Component3> <button @click="onSave">保存</button>
3. 保存方法實(shí)現(xiàn)
<script>
...
methods: {
onSave(){
let formData1 = this.$refs.ref1.$refs.form1;
let formData2 = this.$refs.ref2.$refs.form2;
let formData3 = this.$refs.ref3.$refs.form3;
Promise.all([formData1, formData2 ,formData3].map(this.getFormPromise)).then(res=>{
const validateResult = res.every((item) => !!item);
if (validateResult) {
// 校驗(yàn)通過，獲取各個(gè)組件中的表單內(nèi)容，提交后臺(tái)
}else {
this.$message.warning('必填內(nèi)容未填寫');
}
})
},
getFormPromise(form) {
return new Promise((resolve) => {
form.validate((res) => {
resolve(res);
});
});
},
}
</script>到此這篇關(guān)于vue+elementUI多表單同時(shí)提交及表單校驗(yàn)解決方案的文章就介紹到這了,更多相關(guān)vue elementUI多表單內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue項(xiàng)目打包之后生成一個(gè)可修改IP地址的文件(具體操作)
這篇文章主要介紹了vue項(xiàng)目打包之后生成一個(gè)可修改IP地址的文件(具體操作),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-03-03
基于Vue.js 2.0實(shí)現(xiàn)百度搜索框效果
這篇文章主要為大家詳細(xì)介紹了基于Vue.js 2.0實(shí)現(xiàn)百度搜索框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09
Vue如何將當(dāng)前窗口截圖并將數(shù)據(jù)base64轉(zhuǎn)為png格式傳給服務(wù)器
這篇文章主要介紹了Vue如何將當(dāng)前窗口截圖并將數(shù)據(jù)base64轉(zhuǎn)為png格式傳給服務(wù)器,通過實(shí)例代碼介紹了將當(dāng)前窗口截圖,并將數(shù)據(jù)存儲(chǔ)下來(lái),需要的朋友可以參考下2023-10-10
這篇文章主要介紹了vue如何封裝Axios的get、post請(qǐng)求，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
vite打包出現(xiàn)?"default"?is?not?exported?by?"
這篇文章主要給大家介紹了關(guān)于vite打包出現(xiàn)?"default"?is?not?exported?by?"node_modules/...問題的解決辦法,文中通過代碼將解決的辦法介紹的非常詳細(xì),對(duì)同樣遇到這個(gè)問題的朋友具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-06-06
源碼分析Vue.js的監(jiān)聽實(shí)現(xiàn)教程
這篇文章主要通過源碼分析介紹了Vue.js的監(jiān)聽實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，相信對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-04-04
詳解如何優(yōu)雅運(yùn)用Vue中的KeepAlive組件
在Vue中,KeepAlive組件是一種特殊的組件,用于緩存已經(jīng)渲染過的組件實(shí)例,本文主要為大家詳細(xì)介紹了KeepAlive組件的用法,需要的小伙伴可以參考下2023-09-09
Vue如何獲取url路由地址和參數(shù)簡(jiǎn)單示例
這篇文章主要給大家介紹了Vue如何獲取url路由地址和參數(shù)的相關(guān)資料,通過簡(jiǎn)單的代碼示例,幫助讀者快速掌握Vue路由的基本用法,需要的朋友可以參考下2023-03-03
vue?使用mescroll.js框架實(shí)現(xiàn)下拉加載和上拉刷新功能
這篇文章主要介紹了vue?使用mescroll.js框架?實(shí)現(xiàn)下拉加載和上拉刷新功能,本文通過示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-07-07
這篇文章主要為大家詳細(xì)介紹了在vue項(xiàng)目中如何使用emoji表情,包括font-awesome圖標(biāo),v-emoji-picker,vue-emoji等emoji表情庫(kù),需要的可以參考下2025-03-03