1,父组件
<template>
<div>
<el-button type="success" @click="handleUpdateClick">修改</el-button>
<form-one :formOne="formOne" :formOneRules="formOneRules" ref="pageFormOneRef"></form-one>
<form-two :formTwo="formTwo" :formTwoRules="formTwoRules" ref="pageFormTwoRef"></form-two>
<el-button type="primary" @click="submitForm">立即创建</el-button>
<el-button @click="resetForm">重置</el-button>
</div>
</template>
<script>
import formOne from './formOne';
import formTwo from './formTwo';
export default {
components: {
formOne,
formTwo
},
data() {
return {
formOne: {
name: '',
region: '',
resource: false,
desc: ''
},
formOneRules: {
name: [
{ required: true, message: '请输入活动名称', trigger: 'blur' }
],
region: [
{ required: true, message: '请选择活动区域', trigger: 'change' }
],
resource: [
{ required: true, message: '请选择活动资源', trigger: 'change' }
],
},
formTwo: {
name2: '',
},
formTwoRules: {
name2: [
{ required: true, message: '请输入活动名称', trigger: 'blur' }
]
}
}
},
mounted() {
},
methods: {
handleUpdateClick(){
this.formOne = {
name: '11111',
region: '222222',
resource: false,
desc: '333333'
}
this.formTwo = {
name2:'aaaaaaa'
}
},
formRulesValidate(fName,sName){
return new Promise((resolve) => {
this.$refs[fName].$refs[sName].validate(valid=>{
if(valid) resolve(valid);
})
});
},
submitForm(){
let formRulesOneRes = this.formRulesValidate('pageFormOneRef','formOneRef');
let formRulesTwoRes = this.formRulesValidate('pageFormTwoRef','formTwoRef');
Promise.all([ formRulesOneRes,formRulesTwoRes ]).then(() => {
let form = {...this.formOne,...this.formTwo};
console.log('form',form);
});
},
resetRulesValidate(fName,sName){
this.$refs[fName].$refs[sName].clearValidate();
},
resetForm(){
this.resetRulesValidate('pageFormOneRef','formOneRef');
this.resetRulesValidate('pageFormTwoRef','formTwoRef');
},
},
}
</script>
<style scoped>
</style>
2,表单一
<template>
<div>
<el-card>
<div slot="header" class="clearfix">
<span>基础信息</span>
</div>
<el-form :model="formOne" :rules="formOneRules" ref="formOneRef" label-width="100px">
<el-row>
<el-col :span="8">
<el-form-item label="活动名称" prop="name">
<el-input v-model="formOne.name" style="width:100%;" placeholder="请输入"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="活动区域" prop="region">
<el-select v-model="formOne.region" placeholder="请选择" style="width:100%;">
<!-- label:显示内容, value:绑定值 -->
<el-option label="区域一" value="绑定内容一"></el-option>
<el-option label="区域二" value="绑定内容二"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="特殊资源" prop="resource">
<el-radio-group v-model="formOne.resource">
<el-radio :label="false">线上品牌商赞助</el-radio>
<el-radio :label="true">线下场地免费</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="16">
<el-form-item label="活动形式">
<el-input type="textarea" v-model="formOne.desc" placeholder="请输入" style="width:100%;"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-card>
</div>
</template>
<script>
export default {
props: {
formOne:Object,
formOneRules:Object,
},
data() {
return {
}
},
mounted() {
},
methods: {
},
}
</script>
<style scoped></style>
3,表单二
<template>
<div>
<el-card style="margin-top: 20px;">
<div slot="header" class="clearfix">
<span>表单二</span>
</div>
<el-form :model="formTwo" :rules="formTwoRules" ref="formTwoRef" label-width="100px">
<el-row>
<el-col :span="8">
<el-form-item label="名称" prop="name2">
<el-input v-model="formTwo.name2" style="width:100%;" placeholder="请输入"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-card>
</div>
</template>
<script>
export default {
props: {
formTwo:Object,
formTwoRules:Object,
},
data() {
return {
}
},
mounted() {
},
methods: {
},
}
</script>
<style scoped></style>