el-form表单嵌套el-form
时间: 2023-10-11 22:11:05 浏览: 169
详细讲解—表单验证框架的实现
可以使用`el-form`表单组件嵌套另一个`el-form`表单组件。这种嵌套可以用于更复杂的表单布局和组织。
以下是一个示例代码,演示了如何嵌套`el-form`表单:
```vue
<template>
<el-form ref="outerForm" :model="outerForm" label-width="100px">
<el-form-item label="外层表单项">
<el-input v-model="outerForm.field1"></el-input>
</el-form-item>
<el-form ref="innerForm" :model="innerForm" label-width="100px">
<el-form-item label="内层表单项">
<el-input v-model="innerForm.field2"></el-input>
</el-form-item>
</el-form>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
outerForm: {
field1: ''
},
innerForm: {
field2: ''
}
};
},
methods: {
submitForm() {
this.$refs.outerForm.validate((validOuterForm) => {
if (validOuterForm) {
// 外层表单校验通过
this.$refs.innerForm.validate((validInnerForm) => {
if (validInnerForm) {
// 内层表单校验通过,提交数据
console.log(this.outerForm);
console.log(this.innerForm);
} else {
// 内层表单校验不通过
return false;
}
});
} else {
// 外层表单校验不通过
return false;
}
});
}
}
};
</script>
```
在上面的示例中,外层表单和内层表单都使用了`el-form`组件,并且分别定义了自己的数据模型(`outerForm`和`innerForm`)。你可以根据实际需要添加更多的表单项。
请注意,在提交表单时,需要先校验外层表单的有效性,然后再校验内层表单的有效性。只有当两个表单都校验通过时,才会提交数据。
希望这个例子对你有所帮助!如果你还有其他问题,请随时提问。
阅读全文