### 如何在 Element UI 的 Form 表单中通过循环生成 Input 输入框 在 Vue 和 Element UI 中，可以通过 `v-for` 指令来动态渲染多个表单项。以下是具体实现方法： #### 动态生成表单输入框的示例代码 以下是一个完整的示例，展示了如何通过数组数据驱动的方式，在 Element UI 的 Form 组件中动态生成多个 Input 输入框。 ```vue <template> <el-form :model="dynamicFormData" :rules="rules" ref="dynamicForm"> <!-- 使用 v-for 循环生成多个 el-form-item --> <el-form-item v-for="(item, index) in dynamicFormData.inputs" :key="index" :label="'输入项 ' + (index + 1)" :prop="'inputs.' + index + '.value'" > <el-input v-model="item.value"></el-input> </el-form-item> <!-- 添加按钮 --> <el-button type="primary" @click="addInput">新增输入框</el-button> <!-- 提交按钮 --> <el-button type="success" @click="submitForm">提交</el-button> </el-form> </template> <script> export default { data() { return { // 动态表单的数据模型 dynamicFormData: { inputs: [ { value: '' }, // 初始默认一个输入框 ], }, // 校验规则 rules: { 'inputs.0.value': [{ required: true, message: '请输入内容', trigger: 'blur' }], }, }; }, methods: { addInput() { this.dynamicFormData.inputs.push({ value: '' }); }, submitForm() { this.$refs.dynamicForm.validate((valid) => { if (valid) { alert('提交成功'); } else { console.log('验证失败'); return false; } }); }, }, }; </script> ``` --- #### 关键点解析 1. **动态绑定表单项** - 使用 `v-for` 遍历 `dynamicFormData.inputs` 数组中的每一项。 - 设置唯一的 `:key` 属性以确保列表渲染的稳定性[^1]。 2. **校验规则配置** - 在 `rules` 对象中，针对每个输入框设置对应的校验规则。 - 如果需要对特定索引位置的输入框单独设置规则，则可以使用 `'inputs.${index}.value'` 这样的路径表达式[^4]。 3. **添加新输入框** - 调用 `addInput` 方法向 `dynamicFormData.inputs` 数组追加新的对象 `{ value: '' }`，从而触发视图更新[^1]。 4. **表单提交与校验** - 使用 `$refs.dynamicForm.validate()` 执行整个表单的校验逻辑。 - 只有当所有输入框都满足校验条件时，才允许执行后续操作[^4]。 --- #### 性能优化建议 如果动态生成的输入框数量较多，可能会导致页面性能下降。此时可以考虑以下优化措施： - 使用虚拟滚动技术减少 DOM 元素的数量。 - 将不常用的输入框折叠隐藏，仅显示当前编辑区域的内容[^3]。 --- ###