vue表格多选框取值

在Vue.js中，实现表格多选框的取值通常会涉及到数据绑定和事件处理。当你有一个数组作为数据源，并希望用户可以选择多个项时，可以按以下步骤操作：

1. **HTML模板**：
使用`v-model`指令给每个复选框绑定一个数组元素，例如：

   <tr v-for="(item, index) in items">
     <td><input type="checkbox" :value="item" :key="index" v-model="selectedItems"></td>
     <!-- 其他列内容 -->
   </tr>

`selectedItems`是一个包含被选中项目的数组。

2. **Vue实例**：
初始化数据时，`selectedItems`应该为空数组，然后在`methods`里添加一个方法处理选择操作，如`toggleSelection(item)`，用于切换单个项的选择状态：

   data() {
     return {
       items: ...,
       selectedItems: []
     }
   },
   methods: {
     toggleSelection(item) {
       if (this.selectedItems.includes(item)) {
         this.selectedItems.splice(this.selectedItems.indexOf(item), 1);
       } else {
         this.selectedItems.push(item);
       }
     }
   }

3. **监听事件**：
如果需要获取所有被选中的项目，可以在某个触发事件的地方调用这个方法，比如点击“确认”按钮：

   <button @click="onConfirm">确认</button>

   methods: {
     onConfirm() {
       // 获取并处理所有被选中的项目
       const checkedItems = this.selectedItems;
       // 这些checkedItems就是你想要的取值
     }
   }