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

在TypeScript (TS) 中，如果你正在使用Element UI库中的`el-tree`组件，并希望在`handleNodeClick`事件处理程序中获取当前选中的节点数组，你可以利用泛型和数组索引来简化这个过程。首先，确保你在`<el-tree>`元素上绑定了`handleNodeClick`函数，并传递了一个数据结构，例如`TreeNode`，其中包含标识是否选中的字段。

type TreeNode<T> = {
  id: string;
  name: string;
  children?: Array<TreeNode<T>>;
  isDisabled?: boolean;
  // 添加一个表示是否被选中的字段，如selected: boolean
  selected: boolean;
};

// 示例组件模板
<template>
  <el-tree
    :data="treeData"
    @node-click="handleNodeClick"
    :props="{ children: 'children', label: 'name' }"
  ></el-tree>
</template>

<script lang="ts">
import { ref } from "vue";

export default {
  setup() {
    const treeData = ref<any[]>([]); // 初始化树节点的数据

    // handleNodeClick函数
    function handleNodeClick(node: TreeNode<any>) {
      // 获取当前被选中的节点数组
      const selectedNodes: TreeNode<any>[] = treeData.value.filter((item) => item.selected);
      
      console.log("Selected nodes:", selectedNodes);
    }

    return { treeData, handleNodeClick };
  }
}
</script>

在这个例子中，`handleNodeClick`函数接收一个`TreeNode`类型的参数，并通过`filter`方法筛选出所有`selected`属性为`true`的节点，得到当前选中的数组。