vue2 获取checkbox选中状态双向绑定筛选表格数据结果

在Vue2中，实现Checkbox选中状态的双向绑定并用于筛选表格数据通常会结合`v-model`指令和事件处理函数。假设你有一个包含Checkbox的表格组件，每个Checkbox都有一个对应的值，你可以这样做：

1. 首先，在你的表格数据对象中，为每个Checkbox的值添加一个字段，比如`selected`。

data() {
  return {
    tableData: [
      { name: 'Item 1', selected: false },
      { name: 'Item 2', selected: true },
      //...
    ]
  }
}

2. 使用`v-model`将Checkbox的`selected`属性绑定到一个数组上，这个数组可以是你想要过滤的数据源的一个副本：

<template>
  <table>
    <tr v-for="(item, index) in filteredTableData" :key="index">
      <td><input type="checkbox" :value="item.selected" v-model="checkedItems"></td>
      <td>{{ item.name }}</td>
    </tr>
  </table>
</template>

<script>
export default {
  data() {
    return {
      checkedItems: [], // 保存已选择的items的selected状态
      tableData: [...], // 表格原始数据
    };
  },
  computed: {
    filteredTableData() {
      return this.tableData.filter(item => item.selected === this.checkedItems.includes(item.selected));
    }
  }
};
</script>

当用户勾选或取消勾选某行的Checkbox时，`checkedItems`数组的状态会更新，进而触发`filteredTableData`计算属性的更新，只显示那些状态匹配的表格行。