Vue中如何将遍历表格行的复选框值存入数组？

我来帮你拆解下问题所在，以及给出具体的修复方案——这个问题和你用的HTML标签完全没关系，核心是状态管理的思路出了问题：

为什么现在只会保留最后一个ID？ #

你当前的逻辑有两个关键错误：

1. 每个行组件都维护独立的本地状态：每个tableBody子组件都自己定义了values数组，这意味着每行的复选框只绑定了当前行的本地数组，而非全局的选中集合。
2. 用本地状态覆盖全局状态：每次beforeUpdate触发时，你都会把当前行的values直接赋值给Vuex的selectedValues，相当于每次都用新数组覆盖旧数组，最后自然只有最后一个更新的行ID留在数组里。

修复步骤 #

1. 改造子组件：依赖全局状态，移除本地状态 #

子组件不需要自己存储选中状态，而是从Vuex获取全局选中集合，通过复选框的点击事件来更新全局数组：

<template>
  <tr>
    <td>{{ id }}</td>
    <td>{{ indId }}</td>
    <td>
      <input 
        type="checkbox" 
        :checked="isRowSelected"
        @change="handleCheckboxToggle"
      >
    </td>
  </tr>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

export default {
  props: {
    id: {
      type: String,
      required: true // 注意你之前拼写错了reuired，这里修正
    },
    indId: {
      type: String,
      required: true
    }
  },
  computed: {
    ...mapGetters(['selectedValues']),
    // 计算当前行是否被选中
    isRowSelected() {
      return this.selectedValues.includes(this.id)
    }
  },
  methods: {
    ...mapActions(['updateSelectedValues']),
    handleCheckboxToggle(e) {
      // 把当前行ID和选中状态传给Vuex
      this.updateSelectedValues({
        id: this.id,
        isChecked: e.target.checked
      })
    }
  }
}
</script>

2. 修改Vuex Store：实现添加/移除ID的逻辑，而非覆盖 #

原来的mutation是直接替换数组，现在要改成根据操作添加或移除ID，避免覆盖：

import Vuex from "vuex";

const createStore = () => {
  return new Vuex.Store({
    state: {
      selectedValues: []
    },
    mutations: {
      addSelectedId(state, id) {
        // 避免重复添加同一个ID
        if (!state.selectedValues.includes(id)) {
          state.selectedValues.push(id)
        }
      },
      removeSelectedId(state, id) {
        // 过滤掉要移除的ID
        state.selectedValues = state.selectedValues.filter(item => item !== id)
      }
    },
    actions: {
      updateSelectedValues({ commit }, payload) {
        if (payload.isChecked) {
          commit('addSelectedId', payload.id)
        } else {
          commit('removeSelectedId', payload.id)
        }
      }
    },
    getters: {
      selectedValues(state) {
        return state.selectedValues;
      }
    }
  });
};

export default createStore;

3. 父组件保持原样即可 #

父组件的循环渲染逻辑不需要修改，它只负责传递行数据，状态管理已经完全交给Vuex全局处理了。

额外提醒 #

• 修正props里的拼写错误：reuired → required，否则会触发Vue的props校验警告。
• 移除子组件里的beforeUpdate钩子：这个钩子会在组件每次更新时触发，很容易导致不必要的状态覆盖，用复选框的change事件触发精准更新才是正确的做法。

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