前端vue3 elemnet plus 树形table表格全选反选

Element Plus 的树形表格也可以使用类似的方式实现全选反选功能。以下是示例代码：

<template>
  <div>
    <el-checkbox v-model="allChecked" @change="selectAll">全选</el-checkbox>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="selection" v-model="checkedItems"></el-table-column>
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import { ref, computed } from 'vue';
import { ElTable, ElTableColumn, ElCheckbox } from 'element-plus';

export default {
  components: {
    ElTable,
    ElTableColumn,
    ElCheckbox
  },
  setup() {
    const tableData = ref([
      {
        id: 1,
        name: 'John',
        age: 25,
        children: [
          { id: 11, name: 'Mike', age: 22 },
          { id: 12, name: 'Mary', age: 20 }
        ]
      },
      {
        id: 2,
        name: 'Tom',
        age: 30,
        children: [
          { id: 21, name: 'Jack', age: 28 },
          { id: 22, name: 'Lucy', age: 26 }
        ]
      }
    ]);
    const checkedItems = ref([]);
    const checkAll = ref(false);

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

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

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

在上面的代码中，我们使用 Element Plus 的 `ElTable` 和 `ElTableColumn` 组件来实现树形表格，用 `type="selection"` 的方式来添加选择列，将其与 `checkedItems` 变量绑定。在全选复选框中，我们使用 `ElCheckbox` 组件，并将其与 `allChecked` 变量绑定，使用 `@change` 事件监听全选复选框的状态变化，通过 `selectAll` 方法实现全选反选功能。

需要注意的是，在树形表格中，每一行数据可能还包含子节点，因此我们需要修改计算全选状态的逻辑，同时需要修改全选反选的实现方式。