### Vue3 中使用 Element Plus 实现 Form 表单动态生成 Input 控件的方法 在 Vue3 和 Element Plus 中，可以通过响应式数据结合 `v-for` 指令实现表单的动态渲染。以下是详细的解决方案。 --- #### 示例代码：动态生成 Input 输入框 ```vue <template> <el-form :model="formData" :rules="rules" ref="formRef"> <!-- 使用 v-for 循环生成多个 el-form-item --> <el-form-item v-for="(item, index) in formData.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> import { reactive, ref } from 'vue'; import { ElMessage } from 'element-plus'; export default { setup() { const formRef = ref(null); // 定义表单数据模型 const formData = reactive({ inputs: [ { value: '' }, // 默认初始化一个输入框 ], }); // 定义校验规则 const rules = reactive({ 'inputs.0.value': [{ required: true, message: '请输入内容', trigger: 'blur' }], }); // 新增输入框方法 function addInput() { formData.inputs.push({ value: '' }); } // 提交表单方法 async function submitForm() { try { await formRef.value.validate(); // 触发表单校验 ElMessage.success('提交成功'); } catch (error) { console.error(error); ElMessage.warning('请完善表单内容后再提交'); } } return { formData, rules, formRef, addInput, submitForm, }; }, }; </script> ``` --- #### 关键点解析 1. **响应式数据管理** - 在 Vue3 中，推荐使用 Composition API 来定义组件逻辑。 - 使用 `reactive` 创建响应式的表单数据对象 `formData`[^1]。 2. **动态绑定表单项** - 使用 `v-for` 遍历 `formData.inputs` 数组中的每一项。 - 设置唯一的 `:key` 属性以确保列表渲染的稳定性[^1]。 3. **校验规则配置** - 在 `rules` 对象中，针对每个输入框设置对应的校验规则。 - 如果需要对特定索引位置的输入框单独设置规则，则可以使用 `'inputs.${index}.value'` 这样的路径表达式[^4]。 4. **添加新输入框** - 调用 `addInput` 方法向 `formData.inputs` 数组追加新的对象 `{ value: '' }`，从而触发视图更新。 5. **表单提交与校验** - 使用 `await formRef.value.validate()` 执行整个表单的校验逻辑。 - 校验通过后执行业务逻辑；如果未通过则提示用户完成填写[^4]。 --- #### 性能优化建议 如果动态生成的输入框数量较多，可能会导致页面性能下降。此时可以考虑以下优化措施： - 使用虚拟滚动技术减少 DOM 元素的数量。 - 将不常用的输入框折叠隐藏，仅显示当前编辑区域的内容[^3]。 --- ###