只循环遍历 el-input 不循环el-form-item

### 解决方案 在 Vue 和 Element-UI 中，可以通过动态生成 `el-input` 组件并将其嵌套到单一的 `el-form-item` 容器中实现目标。以下是具体的实现方式： #### 使用插槽机制 通过将多个 `el-input` 动态渲染为子组件的方式，可以避免重复创建 `el-form-item`。利用 Vue 的 `v-for` 指令绑定数据源，并结合模板语法完成。 ```html <template> <el-form :model="formData"> <!-- 单一的 el-form-item --> <el-form-item label="动态输入框组"> <div v-for="(item, index) in formData.inputs" :key="index" class="dynamic-input-container"> <!-- 循环生成 el-input --> <el-input v-model="item.value" placeholder="请输入内容" @keyup.enter.native="handleEnter(index)" /> </div> </el-form-item> </el-form> </template> <script> export default { data() { return { formData: { inputs: [ { value: '' }, { value: '' } ] } }; }, methods: { handleEnter(index) { console.log(`第 ${index} 个输入框按下了 Enter 键`, this.formData.inputs[index].value); } } }; </script> <style scoped> .dynamic-input-container { margin-bottom: 10px; } </style> ``` 上述代码实现了以下功能： 1. **单一 `el-form-item`**：所有的 `el-input` 都被包裹在一个单独的 `el-form-item` 下[^4]。 2. **动态生成 `el-input`**：通过 `v-for` 将数组中的每一项映射成一个独立的 `el-input` 输入框[^5]。 3. **事件处理**：每个 `el-input` 可以监听键盘事件（如回车键），并通过传递索引来区分不同的输入框[^2]。 --- #### 样式优化 为了增强用户体验，可以根据需求调整样式。例如设置统一宽度或间距： ```css .selectTree-input { width: 300px; height: 40px; line-height: 40px; } .dynamic-input-container { display: flex; align-items: center; margin-bottom: 8px; } ``` 以上样式基于引用[3]进行了扩展，确保所有输入框保持一致外观[^3]。 --- #### 处理禁用状态下的样式 如果某些 `el-input` 需要处于禁用状态，则可通过条件判断控制其属性值。同时，使用深度选择器覆盖默认样式： ```html <el-input v-model="item.value" :disabled="item.disabled" /> ``` 对应 CSS 如下： ```css ::v-deep .el-input.is-disabled .el-input__inner { background-color: #f5f7fa; color: #c0c4cc; cursor: not-allowed; } ``` 此部分逻辑参考了引用[1]的内容[^1]。 --- ### 总结 该解决方案的核心在于分离结构与行为——即通过单一的 `el-form-item` 包裹多组动态生成的 `el-input`，从而满足题目要求的同时保留灵活性和可维护性。 ---