element UI 表格 通过for循环多个 多选事件如何控制

Element UI 的表格通常配合 Vue.js 使用，如果你想通过 `v-for` 循环添加多个复选框，并为每个复选框绑定多选事件，你可以这样做：

<template>
  <el-table>
    <el-table-column type="selection" width="55"></el-table-column>
    <!-- 其他列... -->
    <el-table-row v-for="(item, index) in items" :key="index">
      <el-checkbox @change="handleCheckChange(index)" v-model="item.checked">{{ item.name }}</el-checkbox>
    </el-table-row>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: 'Item 1', checked: false },
        { name: 'Item 2', checked: false },
        // ...更多项
      ]
    };
  },
  methods: {
    handleCheckChange(index) {
      // 这里可以记录每个选择项的状态，比如改变数组中对应元素的 checked 值
      this.$set(this.items, index, { ...this.items[index], checked: !this.items[index].checked });
      
      // 如果你需要控制所有选择的事项，这里可以进一步处理，例如触发全局的多选操作
      if (this.allChecked()) {
        // 执行全局操作...
      }
    },
    allChecked() {
      return this.items.every(item => item.checked);
    }
  }
};
</script>

在这个例子中，`handleCheckChange` 方法会更新每个 `item` 对象的 `checked` 状态，并且如果所有项都被选中，可以根据需要执行其他操作。