Vue实现二维码数组的全选与反选功能

<template>
  <table>
    <thead>
      <tr>
        <th><input type="checkbox" v-model="selectAll"></th>
        <th>Name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in items" :key="index">
        <td><input type="checkbox" v-model="item.selected"></td>
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      selectAll: false,
      items: [
        { selected: false, name: 'Alice', age: 24 },
        { selected: false, name: 'Bob', age: 30 },
        { selected: false, name: 'Charlie', age: 28 }
      ]
    };
  },
  watch: {
    selectAll(newVal) {
      this.items.forEach(item => (item.selected = newVal));
    }
  }
};
</script>

<template>
  <!-- 原来的表格代码 -->
  <button @click="toggleSelection">Toggle Selection</button>
</template>

<script>
export default {
  methods: {
    toggleSelection() {
      this.items.forEach(item => (item.selected = !item.selected));
    }
  },
  // 原来的data和watch代码
};
</script>

watch: {
  selectAll(newVal) {
    if (this.items.length > 0) {
      this.items.forEach(item => (item.selected = newVal));
    }
  }
},
computed: {
  selectAll: {
    get() {
      return this.items.every(item => item.selected);
    },
    set(value) {}
  }
}