vue3嵌套表格table全选和反选

对于 Vue3 嵌套表格中的全选和反选功能，你可以按照以下步骤实现：

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

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

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

4. 在全选复选框的 `change` 事件中，将所有数据的选中状态设为全选复选框的选中状态，并通过 `$emit` 方法向子组件发送消息，例如：

selectAll() {
  this.selectedRows = this.tableData.map(row => {
    row.selected = this.allSelected;
    return row;
  });
  this.$emit('select-all', this.allSelected);
}

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

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

6. 在子表格组件中定义一个选中项的数组，并通过 `props` 接收父组件传递的选中状态和选中项数组，例如：

props: {
  allSelected: Boolean,
  selectedRows: Array
},
data() {
  return {
    innerSelectedRows: []
  };
}

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

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

9. 在父组件向子组件发送消息的事件中，将子组件的选中项数组设为父组件的选中项数组，并根据父组件的全选状态更新子组件的全选状态，例如：

onSelectAll(allSelected) {
  this.innerSelectedRows = this.tableData.map(row => {
    row.selected = allSelected;
    return row;
  });
  this.allSelected = allSelected;
}

10. 在子组件选中项数组的 `watch` 中，计算已选中的项数，并更新父组件的选中项数组和全选状态，例如：

watch: {
  innerSelectedRows() {
    const selectedCount = this.innerSelectedRows.filter(row => row.selected).length;
    this.selectedRows.splice(this.$attrs.index, 1, ...this.innerSelectedRows);
    this.$emit('select-all', selectedCount === this.innerSelectedRows.length);
  }
}

以上就是实现 Vue3 嵌套表格中全选和反选功能的基本步骤。需要注意的是，在子组件中，需要通过 `$attrs` 获取到父组件传递的索引值，以便更新父组件的选中项数组。