如何使用Element UI的el-tree组件实现自定义复选框的反选功能？

<template>
  <div>
    <el-button @click="handleSelectInvert">反选</el-button>
    <el-tree
      :data="treeData"
      :default-expanded-keys="expandedKeys"
      :highlight-current="true"
      :props="defaultProps"
      class="data-tree"
      node-key="id"
      ref="tree"
    >
      <template #default="{ node, data }">
        <div :class="{ catalogStyle: node.level === 0 }" class="node-info flex-space-between">
          {{ data.name }}
          <div class="check-box">
            <el-checkbox v-model="data.scanCheck"></el-checkbox>
            <el-checkbox v-model="data.downloadCheck"></el-checkbox>
          </div>
        </div>
      </template>
    </el-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        { id: 1, name: '父节点1', scanCheck: false, downloadCheck: false, children: [
          { id: 2, name: '子节点1', scanCheck: false, downloadCheck: false },
          { id: 3, name: '子节点2', scanCheck: false, downloadCheck: false }
        ] },
        { id: 4, name: '父节点2', scanCheck: false, downloadCheck: false, children: [
          { id: 5, name: '子节点3', scanCheck: false, downloadCheck: false },
          { id: 6, name: '子节点4', scanCheck: false, downloadCheck: false }
        ] }
      ],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      expandedKeys: []
    };
  },
  methods: {
    handleSelectInvert() {
      this.invertCheck(this.treeData[0]); // 从根节点开始反选
    },
    invertCheck(node) {
      node.scanCheck = !node.scanCheck;
      if (node.children) {
        node.children.forEach(child => this.invertCheck(child));
      }
    }
  }
};
</script>

<style scoped>
.flex-space-between {
  display: flex;
  justify-content: space-between;
}
.catalogStyle {
  font-weight: bold; /* 样式调整，根据需求修改 */
}
</style>