Vue.js中如何实现多选并按指定格式传递表单数据？

我来帮你搞定这个数据绑定的问题，针对你提到的两种规则场景，我整理了具体的实现方案，完全适配你需要的rules : [{ name:null, section:null, data : [{head:null,value:null}] }]格式，还支持扩展其他规则类型：

核心思路 #

我们可以通过动态渲染表单元素 + 计算属性来生成符合要求的rules数组。首先在组件的data中定义需要的中间变量（选中的规则类型、输入值存储），再根据选中的规则类型动态生成对应的data子数组。

具体实现代码 #

1. 完整组件示例 #

<template>
  <div>
    <!-- 选择规则类型 -->
    <select v-model="selectedRule">
      <option value="">请选择规则</option>
      <option value="rule2012">Rule, 2012</option>
      <option value="act1961">Act, 1961</option>
      <!-- 可直接添加其他规则选项 -->
    </select>

    <!-- Rule 2012 对应表单 -->
    <div v-if="selectedRule === 'rule2012'" class="rule-form">
      <h3>Rule, 2012 配置</h3>
      <div class="form-item">
        <label>字段1：</label>
        <input v-model="rule2012Inputs.field1" placeholder="输入值" />
      </div>
      <div class="form-item">
        <label>字段2：</label>
        <input v-model="rule2012Inputs.field2" placeholder="输入值" />
      </div>
    </div>

    <!-- Act 1961 对应表单 -->
    <div v-if="selectedRule === 'act1961'" class="rule-form">
      <h3>Act, 1961 配置</h3>
      <!-- 多选下拉框 -->
      <select v-model="actSelectedItems" multiple size="3">
        <option value="itemA">选项A</option>
        <option value="itemB">选项B</option>
        <option value="itemC">选项C</option>
      </select>
      <!-- 根据选中项动态渲染输入框 -->
      <div v-for="item in actSelectedItems" :key="item" class="form-item">
        <label>{{ item }} 对应值：</label>
        <input v-model="actInputs[item]" placeholder="输入值" />
      </div>
    </div>

    <!-- 预览最终生成的规则数据 -->
    <div class="preview">
      <h3>最终规则数据：</h3>
      <pre>{{ formattedRules }}</pre>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedRule: '', // 当前选中的规则类型
      // Rule2012 的输入值存储对象
      rule2012Inputs: {
        field1: '',
        field2: ''
      },
      // Act1961 的选中项和对应输入值
      actSelectedItems: [],
      actInputs: {}
    };
  },
  computed: {
    // 生成符合要求的 rules 数组
    formattedRules() {
      const rules = [];
      if (this.selectedRule === 'rule2012') {
        rules.push({
          name: 'Rule, 2012',
          section: '自定义section值', // 可根据业务动态设置
          data: [
            { head: 'Field1', value: this.rule2012Inputs.field1 },
            { head: 'Field2', value: this.rule2012Inputs.field2 }
          ]
        });
      } else if (this.selectedRule === 'act1961') {
        // 将选中项与对应输入值转换为 data 数组
        const dataArr = this.actSelectedItems.map(item => ({
          head: item,
          value: this.actInputs[item] || ''
        }));
        rules.push({
          name: 'Act, 1961',
          section: '自定义section值',
          data: dataArr
        });
      }
      // 可直接添加其他规则的处理分支
      return rules;
    }
  }
};
</script>

<style scoped>
.rule-form {
  margin: 15px 0;
  padding: 10px;
  border: 1px solid #eee;
}
.form-item {
  margin: 10px 0;
}
.preview {
  margin-top: 20px;
  padding: 10px;
  background-color: #f5f5f5;
}
pre {
  white-space: pre-wrap;
}
</style>

关键细节说明 #

1. Rule, 2012 绑定逻辑：

   • 用rule2012Inputs对象存储两个输入框的值，在计算属性中直接将其映射为data数组的两个对象，head可以固定为你需要的字段名（也可以改成动态输入的形式，如果业务需要）。

2. Act, 1961 绑定逻辑：

   • 用actSelectedItems存储多选下拉的选中项，actInputs作为键值对对象，键是选中的选项值，值是对应输入框的内容。
   • 通过v-for遍历选中项，动态渲染每个选项对应的输入框，绑定到actInputs[item]实现双向绑定。
   • 最后用map方法将选中项数组转换为符合格式的data数组，每个项的head是选中的选项，value是对应的输入值。

3. 扩展其他规则：

   • 只需在下拉框中添加新的选项，然后在formattedRules计算属性中添加对应的处理分支，生成符合格式的规则对象即可，完全支持在rules数组中添加其他子数组。

这样就能完美解决你遇到的两个绑定问题，最终生成的formattedRules就是你需要的格式，可以直接用来传递数据。

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