fix(comp: tree): Asynchronous loading node hierarchy error (#838)

fix #835

Author: liuzaijiang

packages/components/tree/__tests__/tree.spec.ts

@@ -737,7 +737,7 @@ describe('Tree', () => {
       },
     })
 
-    const allNodes = wrapper.findAll('.ix-tree-node')
+    let allNodes = wrapper.findAll('.ix-tree-node')
 
     expect(allNodes.length).toBe(2)
     expect(allNodes[0].find('.ix-tree-node-expand').exists()).toBe(true)
@@ -749,9 +749,14 @@ describe('Tree', () => {
 
     await wait(50)
 
-    expect(wrapper.findAll('.ix-tree-node').length).toBe(4)
+    allNodes = wrapper.findAll('.ix-tree-node')
+
+    expect(allNodes.length).toBe(4)
     expect(allNodes[0].find('.ix-tree-node-expand').find('.ix-icon-loading').exists()).toBe(false)
     expect(allNodes[0].find('.ix-tree-node-expand').find('.ix-icon-right').exists()).toBe(true)
+    expect(
+      allNodes[1].find('.ix-tree-node').find('.ix-tree-node-indent').findAll('.ix-tree-node-indent-unit').length,
+    ).toBe(1)
   })
 
   test('loadedKeys work', async () => {
@@ -782,7 +787,7 @@ describe('Tree', () => {
       },
     })
 
-    const allNodes = wrapper.findAll('.ix-tree-node')
+    let allNodes = wrapper.findAll('.ix-tree-node')
 
     expect(allNodes.length).toBe(2)
 
@@ -792,7 +797,9 @@ describe('Tree', () => {
 
     await wait(50)
 
-    expect(wrapper.findAll('.ix-tree-node').length).toBe(2)
+    allNodes = wrapper.findAll('.ix-tree-node')
+
+    expect(allNodes.length).toBe(2)
 
     await wrapper.setProps({ loadedKeys: [] })
 

packages/components/tree/src/composables/useDataSource.ts

@@ -13,6 +13,8 @@ import type { ComputedRef } from 'vue'
 
 import { computed } from 'vue'
 
+import { isNil } from 'lodash-es'
+
 export interface MergedNode {
   children?: MergedNode[]
   label: string
@@ -68,11 +70,13 @@ export function convertMergeNodes(
   getNodeKey: ComputedRef<GetNodeKey>,
   nodes: TreeNode[],
   parentKey?: VKey,
+  parentLevel?: number,
 ): MergedNode[] {
   const getKey = getNodeKey.value
 
   const { childrenKey, labelKey, disabled, loadChildren } = props
 
+  const level = isNil(parentLevel) ? -1 : parentLevel
   return nodes.map((node, index) =>
     convertMergeNode(
       node,
@@ -83,7 +87,7 @@ export function convertMergeNodes(
       !!loadChildren,
       index === 0,
       index === nodes.length - 1,
-      -1,
+      level,
       parentKey,
     ),
   )

packages/components/tree/src/composables/useExpandable.ts

@@ -71,7 +71,8 @@ export function useExpandable(
       const nodeMap = mergedNodeMap.value
       const currNode = nodeMap.get(key)!
       if (childrenNodes.length) {
-        const mergedChildren = convertMergeNodes(props, getNodeKey, childrenNodes, key)
+        const level = currNode.level
+        const mergedChildren = convertMergeNodes(props, getNodeKey, childrenNodes, key, level)
         convertMergedNodeMap(mergedChildren, nodeMap)
         currNode.rawNode[childrenKey] = childrenNodes
         currNode.children = mergedChildren