vue 3 中动态增减表单行的核心是响应式联动：绑定下拉值并监听变化，用数组管理行数据、v-for 渲染，配合 v-if 控制控件类型，校验需确保 prop 路径唯一可追踪。

在 Vue 3 中，根据下拉选择动态增减表单行，核心是“响应式联动”：选中某个值（比如“其他”“自定义项”“添加设备”等）后，触发新增或移除一组字段。不靠硬编码判断，而是用数据驱动视图更新。

绑定选择值 + 监听变化触发增删

把下拉框的 v-model 绑定到一个响应式变量（如 selectedOption），再用 watch 或 @change 监听它的变化：

• 当选中 "other"、"custom"、"add_more" 等特定值时，向表单项数组 push 一条新对象；
• 当切换回常规选项时，可清空或保留已输入内容（按业务决定）；
• 注意避免重复添加：建议加个防重逻辑，比如检查当前是否已有“其他”行，或限制最多 N 行。

用数组管理动态行，v-for 渲染

不要为每种情况写固定几组 input，而是用一个响应式数组（如 dynamicFields = ref([])）存所有行数据：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

• 每一项是一个对象，含 id、type（如 'select' / 'input'）、value、label 等字段；
• 模板中用 v-for="(field, i) in dynamicFields" :key="i" 渲染每行；
• 配合 v-if/v-else 控制不同控件：比如 type === 'other' 时显示 el-input，否则显示 el-select。

校验与表单集成要对齐索引

Element Plus 的 el-form-item 校验依赖 prop 路径。动态行需确保每个 item 的 :prop 唯一且可追踪：

• 例如：:prop="`dynamicFields.${i}.value`"，配合 rules 中对应路径的规则；
• 调用 formRef.validate() 时，它会自动遍历所有带 prop 的 el-form-item；
• 删除某行时，记得同步从数组中 splice 掉，并确保后续索引不变（避免校验错位）。

支持“其他”类选项的典型结构

常见场景是下拉选“其他”后出现文本框。这时不必增行，而是切换控件类型：

• data 中定义 selectedType: ref('') 和 customInput: ref('')；
• 模板中用 <el-select v-model="selectedType">...</el-select>；
• 紧接一个 <el-input v-if="selectedType === 'other'" v-model="customInput"></el-input>；
• 提交时统一收口：若 selectedType 是 'other'，就取 customInput 的值，否则取 selectedType。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！