嗨，我来帮你搞定这个Vue项目里的动态表单需求！针对多选下拉框选中多个选项时自动添加对应表单行的功能，我整理了一套完整的实现思路和代码示例，你可以直接参考适配：

1. 调整核心数据结构 #

首先我们需要两个关键数据来支撑联动逻辑：

• selectedType：绑定多选下拉框的数组（因为是多选场景，必须用数组类型，不能是单个值）
• formRows：存储每个选中类型对应的表单行数据，每个元素包含类型标识和对应表单字段

data() {
  return {
    selectedType: ['1'], // 初始默认选中类型1
    formRows: [{ type: '1', field1: '', field2: '' }] // 初始对应一行表单
  }
}

2. 修改模板结构 #

给下拉框加上multiple属性开启多选，然后用v-for循环渲染formRows数组，每一项对应一个选中类型的表单行：

<form id="addForm">
  <!-- 多选下拉框（调整样式让多选更直观） -->
  <select v-model="selectedType" multiple style="height: 100px; width: 200px;">
    <option value="1">类型1</option>
    <option value="2">类型2</option>
    <option value="3">类型3</option>
  </select>

  <!-- 动态生成的表单行 -->
  <div v-for="row in formRows" :key="row.type" class="form-row" style="margin-top: 15px; padding: 10px; border: 1px solid #eee;">
    <h5>★ {{ getTypeName(row.type) }} 表单</h5>
    <div style="margin: 8px 0;">
      <label>字段1：</label>
      <input v-model="row.field1" placeholder="请输入内容" />
    </div>
    <div style="margin: 8px 0;">
      <label>字段2：</label>
      <input v-model="row.field2" placeholder="请输入内容" />
    </div>
  </div>
</form>

这里我加了个辅助方法getTypeName用来把类型值转成友好的中文名称，你可以根据自己的业务需求调整：

methods: {
  getTypeName(type) {
    const nameMap = {
      '1': '类型1',
      '2': '类型2',
      '3': '类型3'
    }
    return nameMap[type] || '未知类型'
  }
}

3. 实现选中状态与表单行的联动逻辑 #

通过watch监听selectedType的变化，自动同步formRows的内容——新增选中类型的空表单行，移除取消选中类型的表单行，同时保留用户已输入的数据：

watch: {
  selectedType(newSelected, oldSelected) {
    // 步骤1：添加新选中的类型对应的空表单行（避免重复添加）
    const newTypes = newSelected.filter(type => !this.formRows.some(row => row.type === type))
    newTypes.forEach(type => {
      this.formRows.push({ type, field1: '', field2: '' })
    })

    // 步骤2：移除不再选中的类型对应的表单行
    this.formRows = this.formRows.filter(row => newSelected.includes(row.type))
  }
}

额外优化建议 #

• 如果觉得原生多选下拉框样式太生硬，可以用Element UI、Ant Design Vue这类UI库的Select组件（开启multiple属性），交互体验会更流畅
• 如果需要支持手动删除某一行（不需要依赖下拉框取消选中），可以给每个表单行加个删除按钮，点击时从formRows中移除对应项，同时同步更新selectedType数组
• 表单提交时，直接遍历formRows数组就能收集所有行的表单数据，非常方便

这样就能完美实现「选中几个选项就显示对应几行表单」的需求啦，用户输入的内容也会和选中状态联动保留~

内容的提问来源于stack exchange，提问作者Wanderer