Ts语法糖实现el-tree使用handleNodeClick勾选树节点并获取当前选中的数组

在TypeScript (Ts) 中，要实现Element UI的 el-tree组件中，使用`handleNodeClick`处理节点点击事件并获取选中的节点数组，你可以首先导入必要的模块，然后编写如下的代码：

import { ElTree } from 'element-ui';
import { Node } from './your-tree-data-model'; // 假设你的树节点数据模型是Node

// 定义树节点点击事件处理器
const handleNodeClick = (node: Node): void => {
  if (node.checked) {
    node.indeterminate = false;
  } else {
    node.indeterminate = !node.children.some(child => child.checked);
  }

  // 当前选中的节点数组
  const selectedNodes: Node[] = treeRef.value.selection.filter(node => node.checked || node.indeterminate);

  console.log('Selected nodes:', selectedNodes); // 打印选中的节点
};

// 使用ElTree组件，并传入handleNodeClick方法
<template>
  <div ref="treeRef">
    <el-tree
      :data="treeData"
      @node-click="handleNodeClick"
      default-expand-all
      lazy
      :check-strictly="false" <!-- 如果不想让indeterminate状态影响检查 -->
    ></el-tree>
  </div>
</template>

<script setup>
import { ref } from 'vue';

let treeData: Node[] = ...; // 你的树数据源
const treeRef = ref(null); // 用于引用ElTree组件实例

useEffect(() => {
  treeRef.value = new ElTree({ data: treeData });
}, [treeData]);
</script>

在这个例子中，`handleNodeClick`会处理节点的点击，更新节点的状态（已选、部分选中），并根据当前选中和部分选中的节点计算出整个选中的数组。`treeRef.value.selection`就是当前el-tree组件内所有选中的节点。