ts语法糖实现el-tree点击选中框获取当前选中的数组

在TypeScript (TS) 中，结合Element UI的`el-tree`组件，我们可以利用一些简洁的语法糖来处理节点选中状态并获取选中的数组。`el-tree`提供了一个`@select`事件，用于监听节点的选择变化。下面是一个简单的示例：

首先，在TS中导入必要的模块，并定义一个数据结构表示树节点，假设每个节点都有一个`id`属性用于唯一标识：

import { ElTree } from 'element-ui';
import { TreeNode } from './TreeNode'; // 假设TreeNode接口有id属性

interface TreeData {
  id: string;
  children: TreeNode[];
}

// ...

export default function useElTree(data: TreeData[]): void {
  const selectedNodes: TreeNode[] = [] as TreeNode[];

  // 使用ref管理tree实例
  const treeRef = useRef<ElTree>(null);

  // 绑定节点选择事件
  useEffect(() => {
    if (treeRef.current) {
      treeRef.current.$on('select', ({ node }) => {
        // 如果节点被选中，添加到selectedNodes数组中
        if (node) {
          selectedNodes.push(node);
        }
        // 更新其他逻辑，如显示已选中节点信息
        console.log('Selected nodes:', selectedNodes);
      });
      // 当组件卸载时移除事件监听
      return () => {
        treeRef.current.$off('select');
      };
    }
  }, [treeRef]);

  // 初始化el-tree组件
  return (
    <div>
      <el-tree
        ref={treeRef}
        :data="data"
        @select={(e) => handleNodeSelect(e)}
      ></el-tree>
    </div>
  );

  function handleNodeSelect(event: Event) {
    // 在这里处理具体的节点选择逻辑
  }
}

在这个例子中，我们使用了`useEffect`钩子来监听`select`事件，当用户点击选中节点时，`handleNodeSelect`函数会被调用，并将选中的节点添加到`selectedNodes`数组中。