### 如何在
Element-UI 中实现
多个表单以及添加
表单备注
#### 1
. 多个表单的实现
在
Element-UI 中，可以通过动态渲染的方式创建
多个表单实例。通常的做法是利用 `v
-for` 指令来遍历一组数据对象，并为每个对象生成一个独立的
表单结构。
以下是通过 Vue 和
Element-UI 动态生成
多个表单的一个简单示例：
```html
<template>
<div>
<!
-- 遍历 formList 数组
-->
<el
-form v
-for="
(item, index
) in formList" :key="index" :model="item">
<el
-form
-item label="姓名">
<el
-input v
-model="item
.name"></el
-input>
</el
-form
-item>
<el
-form
-item label="年龄">
<el
-input v
-model="item
.age"></el
-input>
</el
-form
-item>
<el
-button type="primary" @click="addRemark
(index
)">添加备注</el
-button>
</el
-form>
<el
-button type="success" @click="addForm">新增
表单</el
-button>
</div>
</template>
<script>
export default {
data
() {
return {
formList: [
{ name: "", age: "" }, // 初始
表单
],
};
},
methods: {
addForm
() {
this
.formList
.push
({ name: "", age: "" }
);
},
addRemark
(index
) {
console
.log
(`为第 ${index} 个
表单添加备注`
);
this
.$set
(this
.formList[index], "remark", "这是一个备注"
);
},
},
};
</script>
```
上述代码展示了如何通过数组管理
多个表单，并提供了一个按钮用于向特定索引位置的
表单添加备注[^1]。
---
#### 2
. 添加
表单备注的功能
为了支持
表单备注功能，可以扩展每个
表单的数据模型，在其中加入一个新的字段（如 `remark`）。当用户触发某个操作时（例如点击“添加备注”按钮），程序会更新该字段的内容。
下面是一个完整的例子，展示如何结合
表单验证机制和备注功能：
```html
<template>
<div>
<el
-form
v
-for="
(item, index
) in formList"
:key="index"
:model="item"
:rules="rules"
ref="formRefs"
>
<el
-form
-item label="姓名" prop="name">
<el
-input v
-model="item
.name"></el
-input>
</el
-form
-item>
<el
-form
-item label="年龄" prop="age">
<el
-input v
-model="item
.age"></el
-input>
</el
-form
-item>
<el
-form
-item label="备注">
<span>{{ item
.remark || '无' }}</span>
</el
-form
-item>
<el
-button type="primary" @click="addRemark
(index
)">编辑备注</el
-button>
</el
-form>
<el
-dialog title="编辑备注" :visible
.sync="dialogVisible">
<el
-input v
-model="currentRemark"></el
-input>
<el
-button type="primary" @click="saveRemark">保存</el
-button>
</el
-dialog>
<el
-button type="success" @click="addForm">新增
表单</el
-button>
</div>
</template>
<script>
export default {
data
() {
return {
formList: [{ name: "", age: "", remark: "" }],
rules: {
name: [{ req
uired: true, message: "请输入姓名", trigger: "blur" }],
age: [{ req
uired: true, message: "请输入年龄", trigger: "blur" }],
},
dialogVisible: false,
currentRemarkIndex: null,
currentRemark: "",
};
},
methods: {
addForm
() {
this
.formList
.push
({ name: "", age: "", remark: "" }
);
},
addRemark
(index
) {
this
.currentRemarkIndex = index;
this
.currentRemark = this
.formList[index]
.remark || "";
this
.dialogVisible = true;
},
saveRemark
() {
this
.formList[this
.currentRemarkIndex]
.remark = this
.currentRemark;
this
.dialogVisible = false;
},
},
};
</script>
```
在这个例子中，
使用了 `el
-dialog` 组件弹出对话框以便于用户输入备注内容[^2]。
---
#### 3
. 表单验证与备注的关系
如果希望在提交整个页面之前
校验所有
表单的有效性，则可以在父组件中调用子
表单的验证方法。具体来说，可以通过 `$refs` 获取所有的
表单引用并逐一执行其 `validate` 方法。
以下是一个简单的批量验证逻辑：
```
javascript
methods: {
validate
AllForms
() {
const
promises = [];
this
.$refs
.formRefs
.forEach
((formRef
) => {
if
(formRef
) {
promises
.push
(formRef
.validate
());
}
}
);
Promise.all(promises
).then
(() => {
console
.log
("所有
表单均有效！"
);
}
).catch
(() => {
console
.error
("存在无效
表单！"
);
}
);
},
},
```
此函数会在每次调用时返回一个布尔值表示整体有效性状态。
---
#### 总结
以上介绍了如何在
Element-UI 中实现
多个表单及其备注功能的具体方法。核心思路在于维护一个包含各
表单数据的对象列表，并借助 Vue 的响应式特性实时同步界面变化。
---
该博客内容涉及JavaScript中Promise.all的使用，特别是在表单验证场景下。作者展示了如何利用Promise.all同时校验多个表单，并根据校验结果控制提交过程。通过Promise.all，可以确保所有表单验证完成后才进行下一步操作，提高了代码的异步处理能力。
扫一扫
2339
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
