diff --git a/src/components/Tree/src/Tree.vue b/src/components/Tree/src/Tree.vue index 7e05d11..4e58e1e 100644 --- a/src/components/Tree/src/Tree.vue +++ b/src/components/Tree/src/Tree.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) => { diff --git a/src/components/Tree/src/tree.ts b/src/components/Tree/src/tree.ts index 420f16a..c368b8b 100644 --- a/src/components/Tree/src/tree.ts +++ b/src/components/Tree/src/tree.ts @@ -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; } diff --git a/src/components/Tree/src/useTree.ts b/src/components/Tree/src/useTree.ts index 44f2f3b..4713a54 100644 --- a/src/components/Tree/src/useTree.ts +++ b/src/components/Tree/src/useTree.ts @@ -1,4 +1,4 @@ -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<TreeDataItem[]>, 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<TreeDataItem[]>, getFieldNames: Compute getAllKeys, getChildrenKeys, getEnabledKeys, + getSelectedNode, }; } diff --git a/src/views/demo/tree/ActionTree.vue b/src/views/demo/tree/ActionTree.vue index 74538df..613000e 100644 --- a/src/views/demo/tree/ActionTree.vue +++ b/src/views/demo/tree/ActionTree.vue @@ -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,