多个el-form校验

最新推荐文章于 2024-08-08 10:04:09 发布

原创最新推荐文章于 2024-08-08 10:04:09 发布 · 716 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#elementui

该代码示例展示了在Vue.js中如何进行组件化开发，包括创建两个表单组件（formOne和formTwo），处理表单数据的修改、验证以及重置功能。通过`handleUpdateClick`方法更新表单数据，`submitForm`方法调用子组件的验证并提交完整数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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(() => {
					// console.log('校验成功')
					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>