vue3中如何实现el-tree单选，直接写出代码

在 Vue3 中，要实现 Element UI 的 `el-tree` 组件的单选功能，你可以通过数据驱动的方式结合组件的 `props` 和 `methods` 来完成。首先，你需要设置一个数组作为树的数据源，并且给每个节点添加一个 `isSelected` 属性表示是否被选中。以下是基本的步骤：

1. 定义一个树结构数据模型，每个节点包含 `label`、`children` 和 `isSelected` 等属性：

data() {
  return {
    treeData: [
      { label: '根节点', children: [], isSelected: false },
      // 更多节点...
    ]
  };
},

2. 设置 `el-tree` 的选项，包括 `props` 以便传递自定义数据：

<template>
  <el-tree
    :data="treeData"
    node-key="id" // 根据需要指定节点唯一标识
    default-expand-all
    highlight-current
    @node-click="handleNodeClick"
  ></el-tree>
</template>

<script>
export default {
  props: {
    nodeKey: String, // 如果节点没有 id，可以通过这个属性提供
    selectedKeys: Array, // 初始化已选中的节点 key 列表
  },
</script>

3. 当用户点击节点时，更新 `isSelected` 属性并处理选择状态：

methods: {
  handleNodeClick(node) {
    if (this.selectedKeys.includes(node.key)) {
      this.$set(this.treeData, node.key, { ...node, isSelected: false });
    } else {
      const existingSelected = this.treeData.find(n => n.isSelected);
      if (existingSelected) {
        this.$set(this.treeData, existingSelected.key, { ...existingSelected, isSelected: false });
      }
      this.$set(this.treeData, node.key, { ...node, isSelected: true });
      this.$emit('node-select', node); // 触发自定义事件通知父组件
      this.selectedKeys.push(node.key);
    }
  }
}

4. 在父组件中监听 `node-select` 事件并处理选中的状态：

<template>
  <!-- ... -->
  <el-tree ref="tree" />
  <!-- ... -->
</template>

<script>
export default {
  methods: {
    onTreeNodeSelect(node) {
      console.log('节点', node.label, '被选择了');
      // 这里可以进一步操作如保存到服务器等
    },
  },
  watch: {
    selectedKeys(newKeys, oldKeys) {
      this.$refs.tree.setCheckedKeys(newKeys);
    },
  },
};
</script>