场景
一个页面中tab栏切换多个form表单组件,只有一个保存按钮。需要把各组件下的表达数据合并校验提交。
思路
- 父组件通过两次调用$refs获取子组件的dom元素以及组件内部form的dom元素。
- 通过循环表单项获取validate值获取校验结果,通过Promise.all合并表单。
- 子组件内部getData方法返回表单数据,父调用子组件的getData方法获取子组件的表单值
代码
父页面:
<template>
<div>
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
<el-tab-pane label="form1" name="first">
<form-comp-one ref="formComp1" />
</el-tab-pane>
<el-tab-pane label="form2" name="second">
<form-comp-two ref="formComp2" />
</el-tab-pane>
</el-tabs>
<el-button class="submit-btn" size="small" @click="submit">提交</el-button>
</div>
</template>
<script>
import FormCompOne from '@/components/FormCompOne.vue';
import FormCompTwo from '@/components/FormCompTwo.vue';
export default {
components: {
FormCompOne,
FormCompTwo
},
data() {
return {
activeName: 'first'
};
},
methods: {
handleClick(tab, event) {
console.log(tab, event);
},
submit() {
const _this = this
const formData1 = _this.$refs.formComp1.$refs.formData
const formData2 = _this.$refs.formComp2.$refs.formData
Promise.all([formData1,formData2].map(_this.getFormPromise)).then(res => {
console.log(res)
const validateResult = res.every(item => !!item);
if(validateResult) {
const params = {
..._this.$refs.formComp1.getData(),
..._this.$refs.formComp2.getData(),
}
console.log(params)
alert('提交成功')
} else {
alert('必填内容未填写')
}
})
},
getFormPromise(form) {
return new Promise(resolve => {
form.validate(res => {
resolve(res);
})
})
},
}
};
</script>
<style>
.submit-btn {
position: absolute;
right: 10px;
top: 60px
}
</style>
子组件1
<template>
<el-form
ref="formData"
:model="formData"
:rules="formRules"
label-width="80px"
style="width: 450px;"
>
<el-form-item label="名称" prop="name">
<el-input class="f-input" v-model="formData.name"></el-input>
</el-form-item>
<el-form-item label="活动区域" prop="region">
<el-input class="f-input" v-model="formData.region"></el-input>
</el-form-item>
<el-form-item label="活动形式" prop="type">
<el-input class="f-input" v-model="formData.type"></el-input>
</el-form-item>
</el-form>
</template>
<script>
class formData {
constructor() {
this.name='';
this.region = '';
this.type = '';
}
static getRule() {
return {
name: [{ required: true, message: '请填写名称', trigger: 'blur' }],
region: [{ required: true, message: '请填写活动区域', trigger: 'blur' }],
type: [{ required: true, message: '请填写活动形式', trigger: 'blur' }],
}
}
}
export default {
data() {
return {
formData: new formData,
formRules: formData.getRule(),
};
},
methods: {
getData() {
// 返回子组件的form
return this.formData;
},
}
}
</script>
<style scoped>
</style>
子组件2文章来源:https://www.toymoban.com/news/detail-509259.html
<template>
<el-form ref="formData" label-width="80px" :model="formData" :rules="formRules" style="width: 450px;">
<el-form-item label="地址" prop="address">
<el-input class="f-input" v-model="formData.address"></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input class="f-input" v-model="formData.age"></el-input>
</el-form-item>
<el-form-item label="性别" prop="sex">
<el-input class="f-input" v-model="formData.sex"></el-input>
</el-form-item>
</el-form>
</template>
<script>
class formData {
constructor() {
this.address='';
this.age = '';
this.sex = '';
}
static getRule() {
return {
address: [{ required: true, message: '请填写名称', trigger: 'blur' }],
age: [{ required: true, message: '请填写活动区域', trigger: 'blur' }],
sex: [{ required: true, message: '请填写活动形式', trigger: 'blur' }],
}
}
}
export default {
data() {
return {
formData: new formData,
formRules: formData.getRule(),
};
},
methods: {
getData() {
// 返回子组件的form
return this.formData;
},
}
}
</script>
<style scoped>
</style>
源码
github代码地址:https://github.com/qi-Ruofan/formsMerge文章来源地址https://www.toymoban.com/news/detail-509259.html
到了这里,关于【实操】vue+element UI tab页多表单合并校验提交的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!