vue3：树的默认勾选和全选、取消全选

在Vue 3中实现树的默认勾选和全选、取消全选功能，可以通过组合式API（Composition API）和响应式状态管理来完成。以下是一个简单的示例：

<template>
  <div>
    <button @click="selectAll">全选</button>
    <button @click="clearSelection">取消全选</button>
    <ul>
      <tree-node
        v-for="node in treeData"
        :key="node.id"
        :node="node"
        @select="onSelect"
      ></tree-node>
    </ul>
  </div>
</template>
 
<script>
import { ref } from 'vue';
import TreeNode from './TreeNode.vue';
 
export default {
  components: {
    TreeNode
  },
  setup() {
    const treeData = ref([
      // 树形结构的初始数据
    ]);
 
    // 选择节点
    const onSelect = (node, selected) => {
      // 实现自定义的勾选逻辑
    };
 
    // 全选
    const selectAll = () => {
      treeData.value.forEach(node => {
        onSelect(node, true);
      });
    };
 
    // 取消全选
    const clearSelection = () => {
      treeData.value.forEach(node => {
        onSelect(node, false);
      });
    };
 
    return {
      treeData,
      onSelect,
      selectAll,
      clearSelection
    };
  }
};
</script>

在TreeNode组件中，你需要实现对单个节点的勾选逻辑，并通过@select事件通知父组件。父组件通过selectAll和clearSelection方法来控制全选和取消全选。

TreeNode组件需要实现对单个节点的选中和取消选中逻辑，并在其内部状态变化时发出事件。

<template>
  <li>
    <input
      type="checkbox"
      :checked="node.selected"
      @change="toggleSelect"
    />
    {{ node.label }}
    <ul v-if="node.children">
      <tree-node
        v-for="child in node.children"
        :key="child.id"
        :node="child"
        @select="onSelect"
      ></tree-node>
    </ul>
  </li>
</template>
 
<script>
export default {
  name: 'TreeNode',
  props: {
    node: Object
  },
  methods: {
    toggleSelect(event) {
      this.onSelect(this.node, event.target.checked);
    },
    onSelect(node, selected) {
      node.selected = selected;
      this.$emit('select', node, selected);
      // 如果需要，还可以实现选中节点的所有父节点或子节点
    }
  }
};
</script>

在TreeNode组件中，你需要实现对节点的勾选逻辑，并在勾选状态改变时通过$emit发出select事件，以便父组件可以跟踪选中状态。

这个简单的例子展示了如何在Vue 3中实现树形结构的勾选功能，并提供了全选和取消全选的控制方法。