Vue3+ElementPlus el-tree递归获取当前选中节点的所有子节点ID （适用所有场景）

**Vue3 + Element-UI el-tree 递归获取当前选中节点的所有子节点 ID**

在实际开发过程中，我们经常需要根据用户选择的树形结构中的某个节点，获取其所有子节点的 ID。这个需求可能出现在多种场景，如数据导出、编辑操作等。在本文中，我们将使用 Vue3 + Element-UI el-tree 组件来实现递归获取当前选中节点的所有子节点 ID 的功能。

### **一、准备工作**

首先，我们需要在项目中安装必要的依赖包：

bashnpm install element-plus

然后，在 `main.js` 中引入 Element-UI 的样式和组件：

javascriptimport { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'

createApp(App).use(ElementPlus).mount('#app')

### **二、创建 el-tree 组件**

接下来，我们需要在 `components` 目录下创建一个名为 `TreeComponent.vue` 的文件：

vue<template>
 <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
</template>

<script>
export default {
 name: 'TreeComponent',
 data() {
 return {
 treeData: [
 {
 id:1,
 label: '一级1',
 children: [
 {
 id:11,
 label: '二级1-1'
 },
 {
 id:12,
 label: '二级1-2'
 }
 ]
 },
 {
 id:2,
 label: '一级2',
 children: [
 {
 id:21,
 label: '二级2-1'
 },
 {
 id:22,
 label: '二级2-2'
 }
 ]
 }
 ],
 defaultProps: {
 children: 'children',
 label: 'label'
 }
 }
 },
 methods: {
 handleNodeClick(data, node) {
 console.log('当前选中节点的 ID:', data.id)
 this.getSubNodeId(data.id)
 },
 getSubNodeId(id) {
 const subNodes = this.treeData.find(item => item.id === id).children if (subNodes && subNodes.length >0) {
 subNodes.forEach(subNode => {
 console.log('子节点 ID:', subNode.id)
 this.getSubNodeId(subNode.id)
 })
 }
 }
 }
}
</script>

在上述代码中，我们定义了一个名为 `TreeComponent` 的组件，包含一个 el-tree 组件。我们使用 `@node-click`事件监听器来捕捉用户选择的节点，并通过 `handleNodeClick` 方法获取当前选中节点的 ID。

### **三、递归获取子节点 ID**

在 `getSubNodeId` 方法中，我们首先找到当前选中节点的父级，然后遍历其子节点。对于每个子节点，我们再次调用 `getSubNodeId` 方法，直到所有子节点都被处理。

javascriptgetSubNodeId(id) {
 const subNodes = this.treeData.find(item => item.id === id).children if (subNodes && subNodes.length >0) {
 subNodes.forEach(subNode => {
 console.log('子节点 ID:', subNode.id)
 this.getSubNodeId(subNode.id)
 })
 }
}

### **四、测试**

最后，我们可以在 `App.vue` 中使用 `TreeComponent` 组件，并进行测试：

vue<template>
 <div>
 <tree-component></tree-component>
 </div>
</template>

<script>
import TreeComponent from './components/TreeComponent.vue'

export default {
 name: 'App',
 components: { TreeComponent }
}
</script>

在上述代码中，我们使用 `TreeComponent` 组件，并进行测试。我们可以选择任意一个节点，然后通过控制台输出来查看其所有子节点的 ID。

### **五、结论**

通过本文的示例和代码注释，我们可以看到如何使用 Vue3 + Element-UI el-tree 递归获取当前选中节点的所有子节点 ID。这个需求可能出现在多种场景，如数据导出、编辑操作等。在实际开发过程中，我们需要根据用户选择的树形结构中的某个节点，获取其所有子节点的 ID。这是一个非常有用的功能，可以帮助我们更好地理解和处理复杂的数据结构。

本文提供了一个完整的示例代码，并进行了详细的注释。通过阅读本文，我们可以快速了解如何实现这个需求，并在实际开发中应用它。