<template>
<el-form :model="formData" :rules="formRules" ref="form" label-width="100px">
<el-form-item label="对象1">
<el-input v-model="formData.object1.prop1" placeholder="属性1"></el-input>
<el-input v-model="formData.object1.prop2" placeholder="属性2"></el-input>
</el-form-item>
<el-form-item label="对象2">
<el-input v-model="formData.object2.prop1" placeholder="属性1"></el-input>
<el-input v-model="formData.object2.prop2" placeholder="属性2"></el-input>
</el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
</el-form>
</template>
<script>
export default {
data() {
return {
formData: {
object1: {
prop1: '',
prop2: ''
},
object2: {
prop1: '',
prop2: ''
}
},
formRules: {
object1: {
prop1: [
{ required: true, message: '属性1不能为空', trigger: 'blur' }
// 可以根据需要添加其他验证规则
],
prop2: [
{ required: true, message: '属性2不能为空', trigger: 'blur' }
// 可以根据需要添加其他验证规则
]
},
object2: {
prop1: [
{ required: true, message: '属性1不能为空', trigger: 'blur' }
// 可以根据需要添加其他验证规则
],
prop2: [
{ required: true, message: '属性2不能为空', trigger: 'blur' }
// 可以根据需要添加其他验证规则
]
}
}
};
},
methods: {
submitForm() {
this.$refs.form.validate((valid) => {
if (valid) {
// 表单验证通过,可以在这里提交表单数据
console.log('表单验证通过');
} else {
// 表单验证不通过
console.log('表单验证未通过');
return false;
}
});
}
}
};
</script>