element ui Tree组件如何做单选

Element UI 的 Tree 组件本身并不直接支持单选功能，但它可以通过组合其他 Vue 组件和自定义属性来实现单选树的选择。以下是一个基本的步骤：

1. 定义一个 `activeId` 数据属性，用于存储当前选中的节点的唯一标识（通常是 ID）。

data() {
  return {
    treeData: [], // 树形数据
    activeId: null,
  };
},

2. 当用户点击某个节点时，更新 `activeId` 并阻止默认的点击事件以防止展开其他节点。

<el-tree
  :data="treeData"
  ref="treeRef"
  :default-checked-keys="[activeId]"
  @node-click.prevent="handleNodeClick"
></el-tree>

3. 编写 `handleNodeClick` 方法，检查新点击的节点是否已选择，如果是，则清除已选状态；如果不是，则将新节点设为选中状态。

methods: {
  handleNodeClick(node) {
    if (node.id === this.activeId) {
      this.activeId = null;
    } else {
      this.activeId = node.id;
    }
  },
}

4. 如果需要显示单选的状态，可以在模板中添加一个 `selected` 属性，根据 `activeId` 来判断每个节点是否被选中：

<el-tree-item v-for="item in treeData" :key="item.id" :selected="(item.id === activeId)">
  <!-- ... -->
</el-tree-item>

这样就实现了树形结构的简单单选功能。当然，如果你需要更复杂的状态管理，例如取消、全选等，可以考虑使用 Vuex 或者计算属性来辅助管理状态。