### 如何在
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: {
validateAllForms() {
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 的响应式特性实
时同步界面变化。
---
在elemen-ui的表单验证规则中，针对employeeNo字段设置了必填要求。为了解决首次点击新增时的即时校验，文章提供了一个解决方案，即对roleIdArr的验证规则进行修改，通过调用callback()方法避免了初次校验的发生。
扫一扫
2951
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
