前端vue3 table全选反选

你可以使用 Vue.js 3 中的 v-model 指令和计算属性来实现全选反选功能，以下是示例代码：

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

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    const items = ref([
      { name: 'John', age: 25 },
      { name: 'Mary', age: 30 },
      { name: 'Tom', age: 20 }
    ]);
    const checkedItems = ref([]);
    const checkAll = ref(false);

    const allChecked = computed({
      get() {
        return checkedItems.value.length === items.value.length;
      },
      set(val) {
        checkedItems.value = val ? items.value.slice() : [];
      }
    });

    function selectAll() {
      checkedItems.value = allChecked.value ? [] : items.value.slice();
    }

    return {
      items,
      checkedItems,
      checkAll,
      allChecked,
      selectAll
    };
  }
};
</script>

在上面的代码中，我们定义了一个 items 数组作为表格数据，checkedItems 数组用于存储选中的项，checkAll 表示全选复选框的状态，allChecked 是一个计算属性，用于判断全选复选框的状态，selectAll 方法用于实现全选反选功能。

在表格头部的复选框中，我们使用 v-model 指令将其与 checkAll 变量绑定，当 checkAll 发生变化时，表格中所有的复选框的状态也会跟着变化。在表格中的复选框中，我们使用 v-model 指令将其与 checkedItems 数组绑定，表示选中的项。

最后，我们使用 computed 函数来计算全选复选框的状态，并通过 selectAll 方法来实现全选反选功能。