Vue中如何批量录入客户信息并填充空对象至数组

原代码里所有输入行都绑定同一个customer对象，导致修改时所有行内容同步，没法单独录入每个客户的信息。要实现批量添加，你可以按以下方式调整：

核心思路 #

• 用一个临时数组存储当前正在录入的多个客户信息，每行输入框绑定数组里对应的独立对象
• 监听下拉框选择的数量变化，动态调整临时数组的长度，自动生成对应数量的空客户对象
• 新增提交按钮，点击时把临时数组里的有效数据批量存入customers数组

修改后的完整代码 #

<template>
  <div>
    <select v-model="selected" class="mb-3">
      <option v-for="n in 10" :key="n" :value="n">{{ n }}</option>
    </select>

    <table>
      <thead>
        <tr>
          <th>No.</th>
          <th>Name</th>
          <th>Surname</th>
          <th>Birthday</th>
        </tr>
      </thead>
      <tbody>
        <!-- 绑定临时数组里的每个客户对象，每行对应独立的数据 -->
        <tr v-for="(item, index) in tempCustomers" :key="index">
          <td>
            <label>{{ index + 1 }}.Customer</label>
          </td>
          <td>
            <input v-model="item.name" type="text" placeholder="name" />
          </td>
          <td>
            <input v-model="item.surname" type="text" placeholder="surname" />
          </td>
          <td>
            <input v-model="item.birthday" type="date" placeholder="birthday" />
          </td>
        </tr>
      </tbody>
    </table>

    <!-- 批量添加按钮 -->
    <button class="mt-3" @click="batchAddCustomers">批量添加到客户列表</button>

    <!-- 可选：展示已添加的客户列表 -->
    <div class="mt-4">
      <h3>已添加的客户</h3>
      <ul>
        <li v-for="(cust, idx) in customers" :key="idx">
          {{ cust.name }} {{ cust.surname }} - {{ cust.birthday }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tempCustomers: [
        { name: null, surname: null, birthday: null }
      ], // 临时存储当前录入的客户
      customers: [], // 最终的客户数组
      selected: 1,
    }
  },
  watch: {
    // 监听选择的客户数量变化，动态调整临时数组长度
    selected(newVal) {
      const currentLength = this.tempCustomers.length;
      if (newVal > currentLength) {
        // 新增空客户对象
        for (let i = currentLength; i < newVal; i++) {
          this.tempCustomers.push({ name: null, surname: null, birthday: null });
        }
      } else {
        // 截断数组，移除多余的行
        this.tempCustomers.splice(newVal);
      }
    }
  },
  methods: {
    batchAddCustomers() {
      // 可选：过滤掉未填写的空数据
      const validCustomers = this.tempCustomers.filter(item => item.name || item.surname || item.birthday);
      // 批量添加到最终数组
      this.customers.push(...validCustomers);
      // 清空临时数组并重置选择数量
      this.tempCustomers = [{ name: null, surname: null, birthday: null }];
      this.selected = 1;
    }
  }
}
</script>

关键说明 #

1. 临时数组tempCustomers：每行输入框绑定数组里的独立对象，确保每个客户的输入互不干扰
2. watch监听selected：当选择的数量变化时，自动添加/删除临时数组里的对象，匹配输入行数量
3. 批量添加方法：使用扩展运算符...把临时数组里的有效数据一次性推入customers，同时清空临时数据方便下次录入

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