vue3+ts实现element Plus Tree组件单选和取消单选的功能（取消已经选中的树节点），及vue3的proxy对象转换

在Vue 3和Element Plus中，实现Tree组件的单选和取消单选功能，可以通过监听节点的点击事件，并更新Tree组件的:default-expanded-keys和:default-checked-keys属性来控制选中状态。

以下是一个简化的实现示例：

<template>
  <el-tree
    :data="treeData"
    :props="defaultProps"
    :default-expanded-keys="expandedKeys"
    :default-checked-keys="checkedKeys"
    @node-click="handleNodeClick"
  />
</template>
 
<script setup lang="ts">
import { ref, watch } from 'vue';
 
interface TreeNode {
  id: string | number;
  label: string;
  children?: TreeNode[];
}
 
const treeData = ref<TreeNode[]>([
  // ...树形数据
]);
 
const defaultProps = {
  children: 'children',
  label: 'label'
};
 
const expandedKeys = ref<(string | number)[]>([]);
const checkedKeys = ref<(string | number)[]>([]);
 
const handleNodeClick = (data: TreeNode, node: any) => {
  if (checkedKeys.value.includes(data.id)) {
    // 如果已经选中，则取消选中
    checkedKeys.value = checkedKeys.value.filter(key => key !== data.id);
  } else {
    // 单选逻辑
    checkedKeys.value = [data.id];
  }
};
 
// 监听checkedKeys变化来更新树的展开状态
watch(checkedKeys, (newCheckedKeys) => {
  expandedKeys.value = newCheckedKeys;
});
</script>

在这个示例中，我们定义了一个Tree组件，它使用handleNodeClick方法来处理节点点击事件。当点击一个节点时，如果它已经被选中，我们就从checkedKeys数组中移除它，实现取消选中的效果。否则，我们将节点的id设置到checkedKeys数组中，实现单选。

同时，我们使用了Vue 3的watch来监听checkedKeys的变化，一旦它发生变化，我们就更新expandedKeys，以确保被选中的节点的父节点也会被展开。