vue3 el-tree 单选

在 Vue 3 中使用 el-tree 进行单选操作，你可以通过自定义节点模板来实现。下面是一个简单的示例：

首先，你需要在组件中引入 el-tree 和 el-radio 组件：

import { ElTree, ElRadio } from 'element-plus';

然后，在模板中使用 el-tree 组件，并在节点模板中添加 el-radio 组件：

<template>
  <el-tree :data="treeData" :props="treeProps">
    <template #default="{ node }">
      <el-radio v-model="selectedNodeId" :label="node.id"></el-radio>
      <span>{{ node.label }}</span>
    </template>
  </el-tree>
</template>

在上述代码中，我们使用了 `v-model` 指令来绑定选中节点的 `id` 到 `selectedNodeId` 变量。

接下来，你需要在组件的 `data` 中定义 `treeData` 和 `selectedNodeId` 变量：

data() {
  return {
    treeData: [
      { id: 1, label: 'Node 1', children: [
        { id: 11, label: 'Node 1-1' },
        { id: 12, label: 'Node 1-2' },
      ]},
      { id: 2, label: 'Node 2', children: [
        { id: 21, label: 'Node 2-1' },
        { id: 22, label: 'Node 2-2' },
      ]}
    ],
    selectedNodeId: null
  };
}

最后，你可以根据 `selectedNodeId` 来获取选中的节点信息。例如，你可以添加一个计算属性来获取选中的节点对象：

computed: {
  selectedNode() {
    return this.getNodeById(this.selectedNodeId);
  }
},
methods: {
  getNodeById(id, nodes = this.treeData) {
    for (const node of nodes) {
      if (node.id === id) {
        return node;
      }
      if (node.children) {
        const foundNode = this.getNodeById(id, node.children);
        if (foundNode) {
          return foundNode;
        }
      }
    }
    return null;
  }
}

现在，你已经可以在 el-tree 中实现单选功能了。通过 `selectedNodeId` 变量，你可以获取选中的节点信息，并根据需求进行处理。

希望这个例子能帮助到你！如果还有其他问题，请随时提问。