feat(function): get selected tree node (#1857)

chengj · GitHub
1 parent ce7f382b
Showing 4 changed files with 34 additions and 1 deletions
src/components/Tree/src/Tree.vue
src/components/Tree/src/tree.ts
src/components/Tree/src/useTree.ts
src/views/demo/tree/ActionTree.vue
@@ -119,6 +119,7 @@
         getAllKeys,
         getChildrenKeys,
         getEnabledKeys,
+        getSelectedNode,
       } = useTree(treeDataRef, getFieldNames);
       function getIcon(params: Recordable, icon?: string) {
@@ -320,6 +321,7 @@
         insertNodesByKey,
         deleteNodeByKey,
         updateNodeByKey,
+        getSelectedNode,
         checkAll,
         expandAll,
         filterByLevel: (level: number) => {
@@ -185,4 +185,9 @@ export interface TreeActionType {
   updateNodeByKey: (key: string, node: Omit<TreeDataItem, 'key'>) => void;
   setSearchValue: (value: string) => void;
   getSearchValue: () => string;
+  getSelectedNode: (
+    key: KeyType,
+    treeList?: TreeItem[],
+    selectNode?: TreeItem | null,
+  ) => TreeItem | null;
 }
-import type { InsertNodeParams, KeyType, FieldNames } from './tree';
+import type { InsertNodeParams, KeyType, FieldNames, TreeItem } from './tree';
 import type { Ref, ComputedRef } from 'vue';
 import type { TreeDataItem } from 'ant-design-vue/es/tree/Tree';
@@ -176,6 +176,23 @@ export function useTree(treeDataRef: Ref&lt;TreeDataItem[]&gt;, getFieldNames: Compute
       }
     }
   }
+
+  // Get selected node
+  function getSelectedNode(key: KeyType, list?: TreeItem[], selectedNode?: TreeItem | null) {
+    if (!key && key !== 0) return null;
+    const treeData = list || unref(treeDataRef);
+    treeData.forEach((item) => {
+      if (selectedNode?.key || selectedNode?.key === 0) return selectedNode;
+      if (item.key === key) {
+        selectedNode = item;
+        return;
+      }
+      if (item.children && item.children.length) {
+        selectedNode = getSelectedNode(key, item.children, selectedNode);
+      }
+    });
+    return selectedNode || null;
+  }
   return {
     deleteNodeByKey,
     insertNodeByKey,
@@ -185,5 +202,6 @@ export function useTree(treeDataRef: Ref&lt;TreeDataItem[]&gt;, getFieldNames: Compute
     getAllKeys,
     getChildrenKeys,
     getEnabledKeys,
+    getSelectedNode,
   };
 }
@@ -13,6 +13,7 @@
       <a-button @click="handleGetCheckData" class="mr-2"> 获取勾选数据 </a-button>
       <a-button @click="handleSetSelectData" class="mr-2"> 设置选中数据 </a-button>
       <a-button @click="handleGetSelectData" class="mr-2"> 获取选中数据 </a-button>
+      <a-button @click="handleGetSelectNode" class="mr-2"> 获取选中节点 </a-button>
       <a-button @click="handleSetExpandData" class="mr-2"> 设置展开数据 </a-button>
       <a-button @click="handleGetExpandData" class="mr-2"> 获取展开数据 </a-button>
@@ -69,6 +70,12 @@
         createMessage.success(JSON.stringify(keys));
       }
+      function handleGetSelectNode() {
+        const keys = getTree().getSelectedKeys();
+        const node = getTree().getSelectedNode(keys[0]);
+        createMessage.success(node !== null ? JSON.stringify(node) : null);
+      }
+
       function handleSetExpandData() {
         getTree().setExpandedKeys(['0-0']);
       }
@@ -120,6 +127,7 @@
         handleGetSelectData,
         handleSetExpandData,
         handleGetExpandData,
+        handleGetSelectNode,
         appendNodeByKey,
         deleteNodeByKey,
         updateNodeByKey,