在el-form中嵌套另一个el-form进行表单校验和添加规则,首先,需要确保每个嵌套的el-form
都有自己的model
、rules
和ref。
以下是一个简化的示例:
<template>
<el-form :model="parentForm" :rules="parentRules" ref="parentForm">
<!-- 父表单字段 -->
<el-form-item label="父字段" prop="parentField">
<el-input v-model="parentForm.parentField"></el-input>
</el-form-item>
<!-- 嵌套的子表单 -->
<el-form :model="childForm" :rules="childRules" ref="childForm">
<el-form-item label="子字段" prop="childField">
<el-input v-model="childForm.childField"></el-input>
</el-form-item>
</el-form>
<!-- 提交按钮 -->
<el-button type="primary" @click="submitForm">提交</el-button>
</el-form>
</template>
<script>
export default {
data() {
return {
parentForm: {
parentField: ''
},
childForm: {
childField: ''
},
parentRules: {
parentField: [
{ required: true, message: '请输入父字段', trigger: 'blur' }
]
},
childRules: {
childField: [
{ required: true, message: '请输入子字段', trigger: 'blur' }
]
}
};
},
methods: {
submitForm() {
// 分别验证父表单和子表单
this.$refs.parentForm.validate(validParent => {
if (!validParent) return;
this.$refs.childForm.validate(validChild => {
if (!validChild) return;
// 如果都验证通过,则处理提交逻辑
console.log('父表单和子表单都已验证通过');
// ...提交逻辑代码...
});
});
}
}
};
</script>
注意:在el-form中嵌套另一个el-form进行表单校验和添加规则,通常不是Vue或Element UI推荐的做法,因为这可能导致一些意料之外的行为,特别是在处理表单验证和提交时。