vue+elementUI多表單同時(shí)提交及表單校驗(yàn)最新解決方案
問:
假設(shè)有一個(gè)頁面,需要分三步填寫三個(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-cli3.0+element-ui上傳組件el-upload的使用
這篇文章主要介紹了vue-cli3.0+element-ui上傳組件el-upload的使用,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12vite+vue3不清除瀏覽器緩存直接下載最新代碼的解決方案
vite+vue3項(xiàng)目發(fā)布后,瀏覽器上還是舊代碼,沒有及時(shí)更新到最新代碼,下面通過本文給大家分享vite+vue3不清除瀏覽器緩存直接下載最新代碼的解決方案,感興趣的朋友一起看看吧2024-06-06vue實(shí)現(xiàn)滑塊拖拽校驗(yàn)功能的全過程
vue驗(yàn)證滑塊功能,在生活中很多地方都可以見到,使用起來非常方便,這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)滑塊拖拽校驗(yàn)功能的相關(guān)資料,需要的朋友可以參考下2021-08-08vue-element-admin關(guān)閉eslint的校驗(yàn)方式
這篇文章主要介紹了vue-element-admin關(guān)閉eslint的校驗(yàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08vue項(xiàng)目中存儲(chǔ)與使用后端傳遞過來的token
vue作為一個(gè)單頁面應(yīng)用,vuex作為它的狀態(tài)管理工具,它至少是可以很好的保存這個(gè)token值,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中存儲(chǔ)與使用后端傳遞過來的token的相關(guān)資料,需要的朋友可以參考下2023-03-03Vue.js實(shí)現(xiàn)對(duì)視頻預(yù)覽的示例代碼
本文主要介紹了Vue.js實(shí)現(xiàn)對(duì)視頻預(yù)覽的示例代碼,通過監(jiān)聽文件選擇事件和使用FileReader API,可以實(shí)現(xiàn)視頻文件的預(yù)覽功能,感興趣的可以了解一下2025-01-01vue3+ElementPlus封裝函數(shù)式彈窗組件詳解
這篇文章主要為大家詳細(xì)介紹了如何利用vue3和ElementPlus封裝函數(shù)式彈窗組件,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下2023-08-08