外部el-form 的model数据里有一个数组 我可以在其内部嵌套一个el-form来填充这个数组吗
时间: 2024-03-16 12:45:29 浏览: 56
是的,你可以在外部的 `el-form` 中使用数组作为表单的值,然后在数组的每个元素中嵌套一个 `el-form`,用于编辑数组中的每个元素。
例如,你可以使用 `v-for` 循环渲染数组,然后在每个元素中使用 `el-form`,例如:
```html
<el-form :model="form" ref="outerForm">
<el-form-item label="数组">
<div v-for="(item, index) in form.items" :key="index">
<el-form :model="item" ref="innerForm">
<el-form-item label="名称">
<el-input v-model="item.name"></el-input>
</el-form-item>
<el-form-item label="描述">
<el-input v-model="item.description"></el-input>
</el-form-item>
</el-form>
</div>
</el-form-item>
</el-form>
```
在这个例子中,外部的 `el-form` 绑定了一个名为 `form` 的对象,其中包含一个名为 `items` 的数组。在数组的每个元素中,使用了一个内部的 `el-form`,用于编辑每个元素的属性。你可以通过 `v-for` 循环渲染数组,并为每个元素绑定一个独立的 `el-form`。在这个例子中,内部的 `el-form` 绑定了一个名为 `item` 的对象,用于编辑每个元素的属性。
需要注意的是,如果你想在提交表单时获取内部 `el-form` 的数据,需要分别在外部 `el-form` 和内部 `el-form` 上设置独立的 `ref`。例如,在这个例子中,你可以在外部的 `el-form` 上设置 `ref="outerForm"`,在内部的 `el-form` 上设置 `ref="innerForm"`。然后,你可以在提交表单时,通过这些 `ref` 获取外部 `el-form` 和内部 `el-form` 的数据,例如:
```javascript
this.$refs.outerForm.validate((valid) => {
if (valid) {
const formData = this.$refs.outerForm.model;
console.log(formData);
}
});
```
阅读全文