el-tree实现复选框单选

在Element UI库中，`el-tree`组件是一个用于展示树形数据的组件，它可以很好地配合Vue.js使用。如果你想要在树形结构中实现复选框或单选的功能，你可以结合`el-checkbox`或`el-radio`组件来实现。

**实现复选框单选的选择树（复选框示例）：**

1. 首先，在你的`el-tree`组件的节点中，为每个节点添加一个`el-checkbox`子元素，例如：

<el-tree
  :data="treeData"
  node-key="id"
  default-expand-all
  :props="defaultProps"
  :default-checked-keys="selectedKeys"
  @check-change="handleCheckChange"
>
  <span slot="default">{{ node.label }}</span>
  <el-checkbox v-if="node.children" :indeterminate="node.indeterminate" @change="handleChange"></el-checkbox>
</el-tree>

2. 定义数据结构和一些方法，如`treeData`、`defaultProps`、`selectedKeys`和`handleChange`：

data() {
  return {
    treeData: ..., // 树形数据结构
    defaultProps: { children: 'children', label: 'name' }, // 属性配置
    selectedKeys: [], // 选中的节点ID数组
  };
},
methods: {
  handleCheckChange({ node, checked }) {
    if (checked) {
      this.selectedKeys.push(node.key);
    } else {
      const index = this.selectedKeys.indexOf(node.key);
      if (index > -1) {
        this.selectedKeys.splice(index, 1);
      }
    }
  },
  handleChange(value) {
    // 处理复选框状态变化
  },
}

3. `handleCheckChange`方法会在节点被选中或取消选中时调用，更新`selectedKeys`数组；`handleChange`则处理`el-checkbox`的直接点击事件。

**实现单选选择（单选示例）：**

将`el-checkbox`替换为`el-radio`，并确保在整个树中只有一个节点可以被选中。更改`handleCheckChange`方法，移除`selectedKeys`数组的操作，并确保每次切换时只保留一个已选节点。

methods: {
  handleCheckChange({ node, checked }) {
    if (checked) {
      if (this.selectedKeys.length) {
        const oldNode = this.treeData.find(node => this.selectedKeys.includes(node.key));
        oldNode.indeterminate = false;
        oldNode.checked = false;
      }
      this.selectedKeys = [node.key];
      node.indeterminate = false;
      node.checked = true;
    }
  },
}

记得在初始化时设置`indeterminate`属性为`true`，以便表示根节点是初始未选中的状态。

**相关问题：**
1. Element UI的`el-tree`组件如何绑定复选框或单选功能？
2. 如何在`el-tree`中实现节点的单选状态？
3. `el-tree`的`@check-change`和`@change`事件分别有什么作用？