vue3table全选和反选

对于 Vue3 Table 的全选和反选功能，你可以按照以下步骤实现：

1. 在表格组件中定义一个选中项的数组，例如：`selectedRows: []`。

2. 在表格中的每一行中添加一个复选框，并绑定一个 `v-model` 指令到该行对应数据的选中状态，例如：`<input type="checkbox" v-model="rowData.selected">`。

3. 在表头中添加一个全选复选框，并绑定一个 `v-model` 指令到一个 Boolean 类型的变量，例如：`<input type="checkbox" v-model="allSelected">`。

4. 在全选复选框的 `change` 事件中，将所有数据的选中状态设为全选复选框的选中状态，例如：

selectAll() {
  this.selectedRows = this.tableData.map(row => {
    row.selected = this.allSelected;
    return row;
  });
}

5. 在选中项数组的 `watch` 中，计算已选中的项数，并更新全选复选框的选中状态，例如：

watch: {
  selectedRows() {
    const selectedCount = this.selectedRows.filter(row => row.selected).length;
    this.allSelected = selectedCount === this.tableData.length;
  }
}

6. 在表格中添加一个反选按钮，当点击该按钮时，将所有数据的选中状态取反，例如：

reverseSelect() {
  this.selectedRows = this.tableData.map(row => {
    row.selected = !row.selected;
    return row;
  });
}

以上就是实现 Vue3 Table 全选和反选功能的基本步骤。