vue+elementUI多表单同时提交及表单校验最新解决方案
作者：垃圾侠
假设有一个页面,需要分三步填写三个表单,且每个表单位于独立的组件中,然后最后保存同时提交,如何进行表单必填项校验,下面小编给大家介绍vue+elementUI多表单同时提交及表单校验最新解决方案,感兴趣的朋友一起看看吧
问：
假设有一个页面，需要分三步填写三个表单，且每个表单位于独立的组件中，然后最后保存同时提交，如何进行表单必填项校验？
答：
1. 为每个组件设置ref，值分别为ref1，ref2，ref3，再为各个组件中的el-form设置独立的ref和rules，三个表单的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. 父级组件引入三个子组件
<Component1 ref="ref1"></Component1> <Component2 ref="ref2"></Component2> <Component3 ref="ref3"></Component3> <button @click="onSave">保存</button>
3. 保存方法实现
<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) {
// 校验通过，获取各个组件中的表单内容，提交后台
}else {
this.$message.warning('必填内容未填写');
}
})
},
getFormPromise(form) {
return new Promise((resolve) => {
form.validate((res) => {
resolve(res);
});
});
},
}
</script>到此这篇关于vue+elementUI多表单同时提交及表单校验解决方案的文章就介绍到这了,更多相关vue elementUI多表单内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！