fix(components): [tree-v2] expand all ancestor nodes of the specified…

… node (element-plus#18077) * fix(components): [tree-v2] Allow only all nodes to be expandable closed element-plus#18073 * fix(components): [tree-v2] Allow all nodes to be expandable closed element-plus#18073 * fix(components): [tree-v2] Allow all nodes to be expandable closed element-plus#18073 * fix(components): [tree-v2] Allow all nodes to be expandable closed element-plus#18073 * fix(components): [tree-v2] Allow all nodes to be expandable closed element-plus#18073 --------- Co-authored-by: Tusker Manshu <dadaguai-git>
guze2003 · Sep 2, 2024 · fcf2249 · fcf2249
1 parent 3a37320
commit fcf2249
Show file tree

Hide file tree

Showing 2 changed files with 94 additions and 23 deletions.
diff --git a/packages/components/tree-v2/__tests__/tree.test.ts b/packages/components/tree-v2/__tests__/tree.test.ts
@@ -593,6 +593,73 @@ describe('Virtual Tree', () => {
     expect(nodes.length).toBe(5)
   })
 
+  test('setExpandedKeys', async () => {
+    const { treeRef, wrapper } = createTree({
+      data() {
+        return {
+          height: 400,
+          data: [
+            {
+              id: '1',
+              label: 'node-1',
+              children: [
+                {
+                  id: '1-1',
+                  label: 'node-1-1',
+                  children: [
+                    {
+                      id: '1-1-1',
+                      label: 'node-1-1-1',
+                      children: [
+                        {
+                          id: '1-1-1-1',
+                          label: 'node-1-1-1-1',
+                        },
+                        {
+                          id: '1-1-1-2',
+                          label: 'node-1-1-1-2',
+                        },
+                      ],
+                    },
+                    {
+                      id: '1-1-2',
+                      label: 'node-1-1-2',
+                    },
+                  ],
+                },
+              ],
+            },
+            {
+              id: '2',
+              label: 'node-2',
+              children: [
+                {
+                  id: '2-1',
+                  label: 'node-2-1',
+                  children: [
+                    {
+                      id: '2-1-1',
+                      label: 'node-2-1-1',
+                    },
+                    {
+                      id: '2-1-2',
+                      label: 'node-2-1-2',
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        }
+      },
+    })
+    await nextTick()
+    treeRef.setExpandedKeys(['1-1'])
+    await nextTick()
+    const nodes = wrapper.findAll(TREE_NODE_CLASS_NAME)
+    expect(nodes.length).toBe(5)
+  })
+
   test('indent', async () => {
     const { wrapper } = createTree({
       data() {

diff --git a/packages/components/tree-v2/src/composables/useTree.ts b/packages/components/tree-v2/src/composables/useTree.ts
@@ -88,31 +88,24 @@ export function useTree(
     const expandedKeys = expandedKeySet.value
     const hiddenKeys = hiddenNodeKeySet.value
     const flattenNodes: TreeNode[] = []
-    const nodes = (tree.value && tree.value.treeNodes) || []
-    function traverse() {
-      const stack: TreeNode[] = []
-      for (let i = nodes.length - 1; i >= 0; --i) {
-        stack.push(nodes[i])
-      }
-      while (stack.length) {
-        const node = stack.pop()
-        if (!node) continue
-        if (!hiddenKeys.has(node.key)) {
-          flattenNodes.push(node)
-        }
-        // Only "visible" nodes will be rendered
-        if (expandedKeys.has(node.key)) {
-          const children = node.children
-          if (children) {
-            const length = children.length
-            for (let i = length - 1; i >= 0; --i) {
-              stack.push(children[i])
-            }
-          }
+    const nodes = tree.value?.treeNodes || []
+
+    const stack: TreeNode[] = []
+    for (let i = nodes.length - 1; i >= 0; --i) {
+      stack.push(nodes[i])
+    }
+    while (stack.length) {
+      const node = stack.pop()!
+      if (hiddenKeys.has(node.key)) continue
+
+      flattenNodes.push(node)
+      if (node.children && expandedKeys.has(node.key)) {
+        for (let i = node.children.length - 1; i >= 0; --i) {
+          stack.push(node.children[i])
         }
       }
     }
-    traverse()
+
     return flattenNodes
   })
 
@@ -202,7 +195,18 @@ export function useTree(
   }
 
   function setExpandedKeys(keys: TreeKey[]) {
-    expandedKeySet.value = new Set(keys)
+    const expandedKeys = new Set<TreeKey>()
+    const nodeMap = tree.value!.treeNodeMap
+
+    keys.forEach((k) => {
+      let node = nodeMap.get(k)
+      while (node && !expandedKeys.has(node.key)) {
+        expandedKeys.add(node.key)
+        node = node.parent
+      }
+    })
+
+    expandedKeySet.value = expandedKeys
   }
 
   function handleNodeClick(node: TreeNode, e: MouseEvent) {