From 997a86aea7290d5a71671c5906e4defac686363b Mon Sep 17 00:00:00 2001
From: WumaCoder <1829913225@qq.com>
Date: Mon, 1 Feb 2021 12:49:15 +0800
Subject: [PATCH 1/8] refactor(Tree): Realize the control node hidden display
 function

---
 .../src/components/Tree/src/TreeNode.vue      | 10 +++++++---
 .../components/Tree/src/entity/TreeNode.ts    | 20 ++++++++++++++++++-
 .../Tree/tests/entity/TreeNode.spec.ts        | 10 ++++++++++
 packages/website/src/play/index.vue           |  2 ++
 4 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/packages/element3/src/components/Tree/src/TreeNode.vue b/packages/element3/src/components/Tree/src/TreeNode.vue
index 7c3d41606..68c1fae25 100644
--- a/packages/element3/src/components/Tree/src/TreeNode.vue
+++ b/packages/element3/src/components/Tree/src/TreeNode.vue
@@ -1,14 +1,18 @@
 <template>
   <div
+    v-show="node.isVisible"
     class="el-tree-node"
     :class="{
       'is-checked': node.isChecked,
       'is-focusable': !node.isDisabled,
-      'is-expanded': node.isExpanded
+      'is-expanded': node.isExpanded,
+      'is-hidden': !node.isVisible
     }"
     role="TreeNode"
-    :aria-checked="node.isChecked"
+    :aria-expanded="node.isExpanded"
     :aria-disabled="node.isDisabled"
+    :aria-checked="node.isChecked"
+    :aria-visible="node.isVisible"
     tabindex="-1"
     :id="'TreeNode' + node.id"
     :data-node-id="node.id"
@@ -16,7 +20,7 @@
   >
     <div
       class="el-tree-node__content"
-      :style="{ 'padding-left': node.level * elTree.indent + 'px' }"
+      :style="{ 'padding-left': (node.level - 1) * elTree.indent + 'px' }"
       @click="onClickTreeNodeContent"
     >
       <span
diff --git a/packages/element3/src/components/Tree/src/entity/TreeNode.ts b/packages/element3/src/components/Tree/src/entity/TreeNode.ts
index da679103d..3a530548b 100644
--- a/packages/element3/src/components/Tree/src/entity/TreeNode.ts
+++ b/packages/element3/src/components/Tree/src/entity/TreeNode.ts
@@ -31,6 +31,15 @@ export class TreeNode implements TreeNodePublicProp {
   private _isDisabled: boolean
   private _isExpanded: boolean
   private _isRendered = false
+  private _isVisible: boolean
+
+  get isVisible(): boolean {
+    return this._isVisible
+  }
+
+  set isVisible(v: boolean) {
+    this._isVisible = v
+  }
 
   get isRendered(): boolean {
     return this._isRendered
@@ -99,7 +108,8 @@ export class TreeNode implements TreeNodePublicProp {
       isChecked = false,
       isStrictly = false,
       isDisabled = false,
-      isExpanded = false
+      isExpanded = false,
+      isVisible = true
     } = {}
   ) {
     this.id = id ?? idSeed++
@@ -108,6 +118,7 @@ export class TreeNode implements TreeNodePublicProp {
     this._isStrictly = isStrictly
     this._isDisabled = isDisabled
     this._isExpanded = isExpanded
+    this._isVisible = isVisible
 
     this.setChecked(isChecked)
 
@@ -241,4 +252,11 @@ export class TreeNode implements TreeNodePublicProp {
     parent.children.forEach((node) => node.expand(false))
     this.expand(v)
   }
+
+  show() {
+    this._isVisible = true
+  }
+  hide() {
+    this._isVisible = false
+  }
 }
diff --git a/packages/element3/src/components/Tree/tests/entity/TreeNode.spec.ts b/packages/element3/src/components/Tree/tests/entity/TreeNode.spec.ts
index 8eda912c0..3b4d863b8 100644
--- a/packages/element3/src/components/Tree/tests/entity/TreeNode.spec.ts
+++ b/packages/element3/src/components/Tree/tests/entity/TreeNode.spec.ts
@@ -224,4 +224,14 @@ describe('TreeNode.ts', () => {
     expect(root.isExpanded).toBeTruthy()
     expect(root.findOne(2).isExpanded).toBeTruthy()
   })
+
+  it('set node isVisible', () => {
+    const root = new TreeNode(1, 'Node1', [
+      new TreeNode(2, 'Node1-1', [new TreeNode(4, 'Node1-1-1')])
+    ])
+    root.hide()
+    expect(root.isVisible).toBeFalsy()
+    root.show()
+    expect(root.isVisible).toBeTruthy()
+  })
 })
diff --git a/packages/website/src/play/index.vue b/packages/website/src/play/index.vue
index 094658529..4ad61a87b 100644
--- a/packages/website/src/play/index.vue
+++ b/packages/website/src/play/index.vue
@@ -83,6 +83,8 @@ export default {
 
     setTimeout(() => {
       checked.value.push(11)
+      const root = vm.$refs.tree.$refs.treeMain.tree.root
+      console.log(root.findOne(7).hide())
     }, 1000)
 
     return {

From fefb75f0d00baf892d90c06fee0cdf2b9f16e776 Mon Sep 17 00:00:00 2001
From: WumaCoder <1829913225@qq.com>
Date: Mon, 1 Feb 2021 14:11:46 +0800
Subject: [PATCH 2/8] refactor(Tree): Implement the FindMary method

---
 .../components/Tree/src/entity/TreeNode.ts    | 65 ++++++++++---------
 .../Tree/tests/entity/TreeNode.spec.ts        | 31 +++++++++
 2 files changed, 66 insertions(+), 30 deletions(-)

diff --git a/packages/element3/src/components/Tree/src/entity/TreeNode.ts b/packages/element3/src/components/Tree/src/entity/TreeNode.ts
index 3a530548b..6c62a59ed 100644
--- a/packages/element3/src/components/Tree/src/entity/TreeNode.ts
+++ b/packages/element3/src/components/Tree/src/entity/TreeNode.ts
@@ -4,11 +4,11 @@ export type ID = string | number
 
 let idSeed = 0
 
-// export enum CheckboxState {
-//   NONE = 0,
-//   CHECKED = 1,
-//   INDETERMINATE = 2
-// }
+export type HandlerCb = (
+  currentNode: TreeNode,
+  parentNode: TreeNode,
+  level: number
+) => boolean | void
 
 export interface TreeNodePublicProp {
   id: ID
@@ -171,14 +171,34 @@ export class TreeNode implements TreeNodePublicProp {
     this.children.splice(index, num)
   }
 
-  findOne(id: ID | TreeNode): TreeNode {
-    let node
+  findOne(target: ID | TreeNode | HandlerCb): TreeNode {
+    let result
     this.depthEach((currentNode) => {
-      if (id === currentNode.id || id === currentNode) {
-        node = currentNode
+      if (
+        target === currentNode.id ||
+        target === currentNode ||
+        (typeof target === 'function' &&
+          target(currentNode, currentNode.parent, currentNode.level))
+      ) {
+        result = currentNode
+        return true
       }
     })
-    return node
+    return result
+  }
+
+  findMany(target: string | HandlerCb) {
+    const result = []
+    this.depthEach((currentNode) => {
+      if (
+        (typeof target === 'string' && currentNode.label.includes(target)) ||
+        (typeof target === 'function' &&
+          target(currentNode, currentNode.parent, currentNode.level))
+      ) {
+        result.push(currentNode)
+      }
+    })
+    return result
   }
 
   findChild(id: ID | TreeNode): TreeNode {
@@ -188,13 +208,10 @@ export class TreeNode implements TreeNodePublicProp {
   /**
    * Traverse upward
    */
-  upwardEach(
-    callback: (node: TreeNode) => boolean,
-    { isSkipSelf = true } = {}
-  ): void {
+  upwardEach(callback: HandlerCb, { isSkipSelf = true } = {}): void {
     let current = isSkipSelf ? this.parent : this
     while (current) {
-      if (callback(current)) {
+      if (callback(current, current.parent, current.level)) {
         return
       }
       current = current.parent
@@ -204,18 +221,7 @@ export class TreeNode implements TreeNodePublicProp {
   /**
    * from current node start, down each
    */
-  depthEach(
-    upToDownCallBack: (
-      currentNode: TreeNode,
-      parentNode?: TreeNode,
-      deep?: number
-    ) => boolean | void,
-    downToUpCallBack?: (
-      currentNode: TreeNode,
-      parentNode?: TreeNode,
-      deep?: number
-    ) => boolean | void
-  ): void {
+  depthEach(upToDownCallBack: HandlerCb, downToUpCallBack?: HandlerCb): void {
     const dfs = (node, deep) => {
       for (let i = 0; i < node.children.length; i++) {
         const _node = node.children[i]
@@ -232,9 +238,6 @@ export class TreeNode implements TreeNodePublicProp {
   }
 
   expand(v = !this._isExpanded, isAutoExpandParent = false): void {
-    if (this.isLeaf) {
-      return
-    }
     this._isExpanded = v
     if (v) {
       this._isRendered = true
@@ -259,4 +262,6 @@ export class TreeNode implements TreeNodePublicProp {
   hide() {
     this._isVisible = false
   }
+
+  filter() {}
 }
diff --git a/packages/element3/src/components/Tree/tests/entity/TreeNode.spec.ts b/packages/element3/src/components/Tree/tests/entity/TreeNode.spec.ts
index 3b4d863b8..debe05d63 100644
--- a/packages/element3/src/components/Tree/tests/entity/TreeNode.spec.ts
+++ b/packages/element3/src/components/Tree/tests/entity/TreeNode.spec.ts
@@ -234,4 +234,35 @@ describe('TreeNode.ts', () => {
     root.show()
     expect(root.isVisible).toBeTruthy()
   })
+
+  it('findOne Introduced to the callback ', () => {
+    const root = new TreeNode(1, 'Node1', [
+      new TreeNode(2, 'Node1-1', [new TreeNode(4, 'Node1-1-1')])
+    ])
+    const cb = jest.fn((node) => node.id === 2)
+    const result = root.findOne(cb)
+    expect(cb).toBeCalledTimes(2)
+    expect(result.id).toBe(2)
+  })
+
+  it('findMary Introduced to the callback ', () => {
+    const root = new TreeNode(1, 'Node1', [
+      new TreeNode(
+        2,
+        'Node1-1',
+        [
+          new TreeNode(4, 'Node1-1-1', [], {
+            isExpanded: true
+          })
+        ],
+        {
+          isExpanded: true
+        }
+      )
+    ])
+    const cb = jest.fn((node) => node.isExpanded)
+    const result = root.findMany(cb)
+    expect(cb).toBeCalledTimes(3)
+    expect(result.map((node) => node.id)).toEqual([2, 4])
+  })
 })

From f9d24219d9c7021c8a274df721d20afc587d83a5 Mon Sep 17 00:00:00 2001
From: WumaCoder <1829913225@qq.com>
Date: Mon, 1 Feb 2021 17:08:10 +0800
Subject: [PATCH 3/8] refactor(Tree): Increased reuse

---
 .../src/components/Tree/src/entity/Tree.ts    | 22 +++++--------------
 .../components/Tree/src/entity/TreeNode.ts    |  2 --
 2 files changed, 6 insertions(+), 18 deletions(-)

diff --git a/packages/element3/src/components/Tree/src/entity/Tree.ts b/packages/element3/src/components/Tree/src/entity/Tree.ts
index 77da5a0ff..2ce52ea26 100644
--- a/packages/element3/src/components/Tree/src/entity/Tree.ts
+++ b/packages/element3/src/components/Tree/src/entity/Tree.ts
@@ -60,14 +60,9 @@ export class Tree<RawNode extends RawNodeBase> {
   }
 
   getCheckedIds(): ID[] {
-    const ids = []
-    this.rootProxy.depthEach((currentNode: TreeNode) => {
-      if (currentNode !== this.rootProxy && currentNode.isChecked) {
-        ids.push(currentNode.id)
-      }
-    })
-
-    return ids
+    return this.root
+      .findMany((node) => node !== this.root && node.isChecked)
+      .map((node) => node.id)
   }
 
   expandNodeByIds(ids: ID[]): void {
@@ -79,14 +74,9 @@ export class Tree<RawNode extends RawNodeBase> {
   }
 
   getExpandedNodeIds(): ID[] {
-    const ids = []
-    this.rootProxy.depthEach((currentNode: TreeNode) => {
-      if (currentNode !== this.rootProxy && currentNode.isExpanded) {
-        ids.push(currentNode.id)
-      }
-    })
-
-    return ids
+    return this.root
+      .findMany((node) => node !== this.root && node.isExpanded)
+      .map((node) => node.id)
   }
 
   expandAll(v = true): void {
diff --git a/packages/element3/src/components/Tree/src/entity/TreeNode.ts b/packages/element3/src/components/Tree/src/entity/TreeNode.ts
index 6c62a59ed..313d943da 100644
--- a/packages/element3/src/components/Tree/src/entity/TreeNode.ts
+++ b/packages/element3/src/components/Tree/src/entity/TreeNode.ts
@@ -262,6 +262,4 @@ export class TreeNode implements TreeNodePublicProp {
   hide() {
     this._isVisible = false
   }
-
-  filter() {}
 }

From 26eb8b8ac29c2448e847016d1519fdd8e054a4e0 Mon Sep 17 00:00:00 2001
From: WumaCoder <1829913225@qq.com>
Date: Mon, 1 Feb 2021 18:43:47 +0800
Subject: [PATCH 4/8] refactor(Tree): Implement filter-node-method and filter

---
 .../element3/src/components/Tree/src/Tree.vue | 20 +++++++-
 .../src/components/Tree/src/entity/Tree.ts    | 33 +++++++++----
 .../components/Tree/src/entity/TreeMapper.ts  |  8 ++++
 .../components/Tree/src/entity/TreeNode.ts    |  1 +
 .../src/components/Tree/tests/Tree.spec.ts    | 47 +++++++++++++++++++
 .../components/Tree/tests/entity/Tree.spec.ts | 43 +++++++++++++++++
 6 files changed, 143 insertions(+), 9 deletions(-)
 create mode 100644 packages/element3/src/components/Tree/tests/Tree.spec.ts

diff --git a/packages/element3/src/components/Tree/src/Tree.vue b/packages/element3/src/components/Tree/src/Tree.vue
index 85a45cb17..f1c1e2533 100644
--- a/packages/element3/src/components/Tree/src/Tree.vue
+++ b/packages/element3/src/components/Tree/src/Tree.vue
@@ -19,7 +19,9 @@ export default defineComponent({
     modelValue: Array,
 
     defaultNodeKey: Object,
-    props: Object
+    props: Object,
+
+    filterNodeMethod: Function
   },
   emits: ['update:modelValue', 'update:data'],
   computed: {
@@ -35,6 +37,22 @@ export default defineComponent({
     _defaultNodeKey() {
       return this.defaultNodeKey ?? this.props
     }
+  },
+  methods: {
+    filter(value) {
+      const tree = this.$refs.treeMain.tree
+      if (typeof this.filterNodeMethod === 'function') {
+        return tree.filter((currentNode) =>
+          this.filterNodeMethod(
+            value,
+            tree.getRawNode(currentNode),
+            currentNode
+          )
+        )
+      } else {
+        return tree.filter(value)
+      }
+    }
   }
 })
 </script>
diff --git a/packages/element3/src/components/Tree/src/entity/Tree.ts b/packages/element3/src/components/Tree/src/entity/Tree.ts
index 2ce52ea26..d8ad29ec9 100644
--- a/packages/element3/src/components/Tree/src/entity/Tree.ts
+++ b/packages/element3/src/components/Tree/src/entity/Tree.ts
@@ -1,5 +1,5 @@
 import { DefaultNodeKey, RawNodeBase } from '../types'
-import { ID, TreeNode } from './TreeNode'
+import { HandlerCb, ID, TreeNode } from './TreeNode'
 import { TreeMapper } from './TreeMapper'
 
 export class Tree<RawNode extends RawNodeBase> {
@@ -31,13 +31,13 @@ export class Tree<RawNode extends RawNodeBase> {
       {
         id: 'id',
         label: 'label',
-        children: 'children',
-        isDisabled: 'isDisabled',
-        isAsync: 'isAsync',
-        isChecked: 'isChecked',
-        isVisible: 'isVisible',
-        isExpanded: 'isExpanded',
-        isLeaf: 'isLeaf'
+        children: 'children'
+        // isDisabled: 'isDisabled',
+        // isAsync: 'isAsync',
+        // isChecked: 'isChecked',
+        // isVisible: 'isVisible',
+        // isExpanded: 'isExpanded',
+        // isLeaf: 'isLeaf'
       },
       defaultNodeKey
     )
@@ -84,4 +84,21 @@ export class Tree<RawNode extends RawNodeBase> {
       currentNode.expand(v, false)
     })
   }
+
+  filter(target: HandlerCb | string): TreeNode[] {
+    const nodes = this.root.findMany(target)
+    this.root.depthEach((currentNode) => {
+      currentNode.hide()
+    })
+    nodes.forEach((node) => node.show())
+    return nodes
+  }
+
+  getRawNode(treeNode: TreeNode): RawNode {
+    return this._mapper.getRawNode(treeNode)
+  }
+
+  getTreeNode(rawNode: RawNode): TreeNode {
+    return this._mapper.getTreeNode(rawNode)
+  }
 }
diff --git a/packages/element3/src/components/Tree/src/entity/TreeMapper.ts b/packages/element3/src/components/Tree/src/entity/TreeMapper.ts
index 01dce16b5..dbf880121 100644
--- a/packages/element3/src/components/Tree/src/entity/TreeMapper.ts
+++ b/packages/element3/src/components/Tree/src/entity/TreeMapper.ts
@@ -270,4 +270,12 @@ export class TreeMapper<RawNode extends RawNodeBase> {
   ): void {
     currentRawNode[this._toRawNodeKey.get('children')][index] = childNode
   }
+
+  getRawNode(treeNode: TreeNode): RawNode {
+    return this._toRawNode.get(treeNode)
+  }
+
+  getTreeNode(rawNode: RawNode): TreeNode {
+    return this._toTreeNode.get(rawNode)
+  }
 }
diff --git a/packages/element3/src/components/Tree/src/entity/TreeNode.ts b/packages/element3/src/components/Tree/src/entity/TreeNode.ts
index 313d943da..624325e5f 100644
--- a/packages/element3/src/components/Tree/src/entity/TreeNode.ts
+++ b/packages/element3/src/components/Tree/src/entity/TreeNode.ts
@@ -258,6 +258,7 @@ export class TreeNode implements TreeNodePublicProp {
 
   show() {
     this._isVisible = true
+    this.parent?.show()
   }
   hide() {
     this._isVisible = false
diff --git a/packages/element3/src/components/Tree/tests/Tree.spec.ts b/packages/element3/src/components/Tree/tests/Tree.spec.ts
new file mode 100644
index 000000000..e646aca2d
--- /dev/null
+++ b/packages/element3/src/components/Tree/tests/Tree.spec.ts
@@ -0,0 +1,47 @@
+import { mount } from '@vue/test-utils'
+import { ref, nextTick } from 'vue'
+import ElTree from '../src/Tree.vue'
+
+describe('Tree.vue', () => {
+  it('test filter-node-method and filter', async () => {
+    const rawNodes = [
+      {
+        id: 1,
+        label: 'Node1',
+        children: [
+          {
+            id: 11,
+            label: 'Node1-1'
+          }
+        ]
+      },
+      {
+        id: 2,
+        label: 'Node2',
+        children: [
+          {
+            id: 21,
+            label: 'Node2-1'
+          }
+        ]
+      }
+    ]
+
+    const wrapper = mount(ElTree, {
+      props: {
+        data: rawNodes,
+        renderAfterExpand: false,
+        expandAllNode: true,
+        filterNodeMethod: (value, rawNode) => rawNode.label.includes(value)
+        // There is a label filter by default
+      }
+    })
+
+    wrapper.vm.filter('2-1')
+    await nextTick()
+    expect(wrapper.findAll('.is-hidden').map((w) => w.element.id)).toEqual([
+      'TreeNode1',
+      'TreeNode11'
+    ])
+  })
+})
diff --git a/packages/element3/src/components/Tree/tests/entity/Tree.spec.ts b/packages/element3/src/components/Tree/tests/entity/Tree.spec.ts
index a8e621163..7d842919f 100644
--- a/packages/element3/src/components/Tree/tests/entity/Tree.spec.ts
+++ b/packages/element3/src/components/Tree/tests/entity/Tree.spec.ts
@@ -71,4 +71,47 @@ describe('Tree.ts', () => {
     expect(tree.root.findOne(1).isExpanded).toBeTruthy()
     expect(tree.root.findOne(2).isExpanded).toBeTruthy()
   })
+
+  it('filter show node', () => {
+    type RawNode = { key: number; text: string; childs?: RawNode[] }
+    const rawNodes: RawNode[] = [
+      {
+        key: 1,
+        text: 'Node1',
+        childs: [
+          {
+            key: 11,
+            text: 'Node011'
+          }
+        ]
+      },
+      {
+        key: 2,
+        text: 'Node2',
+        childs: [
+          {
+            key: 21,
+            text: 'Node021'
+          }
+        ]
+      }
+    ]
+
+    const tree = new Tree(rawNodes, {
+      id: 'key',
+      label: 'text',
+      children: 'childs'
+    })
+
+    const search = '11'
+
+    tree.filter((node) => {
+      return node.label.includes(search)
+    })
+
+    expect(tree.root.findOne(1).isVisible).toBeTruthy()
+    expect(tree.root.findOne(11).isVisible).toBeTruthy()
+    expect(tree.root.findOne(2).isVisible).toBeFalsy()
+    expect(tree.root.findOne(21).isVisible).toBeFalsy()
+  })
 })

From 60e826ebd3b712c9b18e28c7c3acce9a368bbdbe Mon Sep 17 00:00:00 2001
From: WumaCoder <1829913225@qq.com>
Date: Mon, 1 Feb 2021 18:44:39 +0800
Subject: [PATCH 5/8] fix(Tree): Fix the export mode to accommodate TS

---
 packages/element3/src/components/Tree/index.js | 12 ++++++------
 packages/website/src/play/index.vue            | 13 ++++++++++---
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/packages/element3/src/components/Tree/index.js b/packages/element3/src/components/Tree/index.js
index befc36134..12fa3d8d6 100644
--- a/packages/element3/src/components/Tree/index.js
+++ b/packages/element3/src/components/Tree/index.js
@@ -1,7 +1,7 @@
-import ElTree from './src/Tree.vue'
+import _ElTree from './src/Tree.vue'
 
-ElTree.install = function (app) {
-  app.component(ElTree.name, ElTree)
-}
-
-export { ElTree }
+export const ElTree = Object.assign({}, _ElTree, {
+  install: function (app) {
+    app.component(_ElTree.name, _ElTree)
+  }
+})
diff --git a/packages/website/src/play/index.vue b/packages/website/src/play/index.vue
index 4ad61a87b..4ba9c9943 100644
--- a/packages/website/src/play/index.vue
+++ b/packages/website/src/play/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <input v-model="text" type="text" />
   <el-tree
     v-model="nodes"
     v-model:expanded="checked"
@@ -8,6 +9,7 @@
     :checkOnClickNode="false"
     :checkStrictly="false"
     :defaultExpandAll="true"
+    :filterNodeMethod="null"
     :defaultNodeKey="{
       isDisabled: 'disabled'
     }"
@@ -15,7 +17,7 @@
 </template>
 
 <script>
-import { getCurrentInstance, reactive, ref } from 'vue'
+import { getCurrentInstance, reactive, ref, watch } from 'vue'
 export default {
   setup() {
     const vm = getCurrentInstance().proxy
@@ -80,16 +82,21 @@ export default {
     ])
 
     const checked = ref([])
+    const text = ref('')
 
     setTimeout(() => {
       checked.value.push(11)
       const root = vm.$refs.tree.$refs.treeMain.tree.root
-      console.log(root.findOne(7).hide())
     }, 1000)
 
+    watch(text, (v) => {
+      vm.$refs.tree.filter(v)
+    })
+
     return {
       nodes,
-      checked
+      checked,
+      text
     }
   }
 }

From 0001702b7f0f8fad9ff86c8e76c06f3a88db75f3 Mon Sep 17 00:00:00 2001
From: WumaCoder <1829913225@qq.com>
Date: Tue, 2 Feb 2021 11:45:22 +0800
Subject: [PATCH 6/8] fix(Tree): fix Watcher tests

---
 .../Tree/tests/utils/Watcher.spec.ts          | 57 ++++++++++++++++---
 1 file changed, 50 insertions(+), 7 deletions(-)

diff --git a/packages/element3/src/components/Tree/tests/utils/Watcher.spec.ts b/packages/element3/src/components/Tree/tests/utils/Watcher.spec.ts
index c67b791f6..405dd7084 100644
--- a/packages/element3/src/components/Tree/tests/utils/Watcher.spec.ts
+++ b/packages/element3/src/components/Tree/tests/utils/Watcher.spec.ts
@@ -312,14 +312,57 @@ describe('Watcher.ts', () => {
 
     const watcher = new Watcher(obj)
 
-    watcher.bindHandler('get/obj', (e) => {
-      console.log(e)
-    })
+    const fn1 = jest.fn()
+    watcher.bindHandler('get/obj', fn1)
 
-    watcher.bindHandler('get/arr', (e) => {
-      console.log(e)
-    })
+    const fn2 = jest.fn()
+    watcher.bindHandler('get/arr', fn2)
+
+    watcher.proxy.arr[0][0].arr[0][0].id
 
-    console.log(watcher.proxy.arr[0][0].arr[0][0].id)
+    expect(fn1).toBeCalledTimes(3)
+    expect(fn1).toHaveBeenNthCalledWith(1, {
+      target: obj,
+      key: 'arr',
+      value: null,
+      currentNode: obj
+    })
+    expect(fn1).toHaveBeenNthCalledWith(2, {
+      target: obj.arr[0][0],
+      key: 'arr',
+      value: null,
+      currentNode: obj.arr[0][0]
+    })
+    expect(fn1).toHaveBeenNthCalledWith(3, {
+      target: obj.arr[0][0].arr[0][0],
+      key: 'id',
+      value: null,
+      currentNode: obj.arr[0][0].arr[0][0]
+    })
+    expect(fn2).toBeCalledTimes(4)
+    expect(fn2).toHaveBeenNthCalledWith(1, {
+      target: obj.arr,
+      key: '0',
+      value: null,
+      currentNode: obj
+    })
+    expect(fn2).toHaveBeenNthCalledWith(2, {
+      target: obj.arr[0],
+      key: '0',
+      value: null,
+      currentNode: obj
+    })
+    expect(fn2).toHaveBeenNthCalledWith(3, {
+      target: obj.arr[0][0].arr,
+      key: '0',
+      value: null,
+      currentNode: obj.arr[0][0]
+    })
+    expect(fn2).toHaveBeenNthCalledWith(4, {
+      target: obj.arr[0][0].arr[0],
+      key: '0',
+      value: null,
+      currentNode: obj.arr[0][0]
+    })
   })
 })

From bd0f8a0b82ba2d5db097a4eee776a68010c0f28f Mon Sep 17 00:00:00 2001
From: WumaCoder <1829913225@qq.com>
Date: Tue, 2 Feb 2021 23:01:50 +0800
Subject: [PATCH 7/8] refactor(Tree): Complete the dynamic loading of the node

---
 .../element3/src/components/Tree/src/Tree.vue |  16 ++-
 .../src/components/Tree/src/TreeMain.vue      |  26 ++--
 .../src/components/Tree/src/entity/Tree.ts    |  35 ++++--
 .../components/Tree/src/entity/TreeMapper.ts  |   4 +-
 .../components/Tree/src/entity/TreeNode.ts    |  74 ++++++++++-
 .../components/Tree/tests/TreeMain.spec.ts    |  56 ++++++++-
 .../Tree/tests/entity/TreeNode.spec.ts        |  19 +++
 packages/website/src/play/index.vue           | 117 +++++-------------
 8 files changed, 235 insertions(+), 112 deletions(-)

diff --git a/packages/element3/src/components/Tree/src/Tree.vue b/packages/element3/src/components/Tree/src/Tree.vue
index f1c1e2533..3698da628 100644
--- a/packages/element3/src/components/Tree/src/Tree.vue
+++ b/packages/element3/src/components/Tree/src/Tree.vue
@@ -3,6 +3,8 @@
     ref="treeMain"
     v-model="_modelValue"
     :defaultNodeKey="_defaultNodeKey"
+    :async="_async"
+    :asyncLoader="_asyncLoader"
   ></el-tree-main>
 </template>
 <script lang="ts">
@@ -21,7 +23,13 @@ export default defineComponent({
     defaultNodeKey: Object,
     props: Object,
 
-    filterNodeMethod: Function
+    filterNodeMethod: Function,
+
+    async: Boolean,
+    lazy: Boolean,
+
+    asyncLoader: Function,
+    load: Function
   },
   emits: ['update:modelValue', 'update:data'],
   computed: {
@@ -36,6 +44,12 @@ export default defineComponent({
     },
     _defaultNodeKey() {
       return this.defaultNodeKey ?? this.props
+    },
+    _async() {
+      return this.async || this.lazy
+    },
+    _asyncLoader() {
+      return this.asyncLoader ?? this.load
     }
   },
   methods: {
diff --git a/packages/element3/src/components/Tree/src/TreeMain.vue b/packages/element3/src/components/Tree/src/TreeMain.vue
index 7b12e29c3..e49387422 100644
--- a/packages/element3/src/components/Tree/src/TreeMain.vue
+++ b/packages/element3/src/components/Tree/src/TreeMain.vue
@@ -19,7 +19,7 @@ import {
 import { t } from '../../../locale'
 import ElTreeNode from './TreeNode.vue'
 import { Tree } from './entity/Tree'
-import { ID } from './entity/TreeNode'
+import { AsyncLoader, ID } from './entity/TreeNode'
 import { DefaultNodeKey, RawNodeBase } from './types'
 export default {
   name: 'ElTreeMain',
@@ -41,7 +41,10 @@ export default {
     autoExpandParent: { type: Boolean, default: true },
     expandOnClickNode: { type: Boolean, default: true },
     expanded: { type: Array as PropType<ID[]>, default: () => [] },
-    defaultExpandAll: Boolean
+    defaultExpandAll: Boolean,
+
+    async: Boolean,
+    asyncLoader: Function as PropType<AsyncLoader>
   },
   emits: ['update:modelValue', 'update:checked', 'update:expanded'],
   setup(props, ctx) {
@@ -49,12 +52,11 @@ export default {
     provide('elTree', elTree)
     const tree = new Tree(props.modelValue, props.defaultNodeKey)
     ctx.emit('update:modelValue', tree.rawNodesProxy)
-    const rootChildren = computed(() => tree.root.children)
-    tree.rootProxy.setStrictly(props.checkStrictly)
+    const rootChildren = computed(() => tree.rootProxy.children)
 
     watchEffect(
       () => {
-        tree.setCheckedByIds(props.checked)
+        tree.expandNodeByIds(props.expanded)
       },
       {
         flush: 'post'
@@ -62,15 +64,15 @@ export default {
       }
     )
     watchEffect(() => {
-      ctx.emit('update:checked', tree.getCheckedIds())
+      ctx.emit('update:expanded', tree.getExpandedNodeIds())
     })
 
-    if (props.defaultExpandAll) {
-      tree.expandAll()
-    }
+    if (props.async) tree.bindAsyncLoader(props.asyncLoader)
+
+    tree.setStrictly(props.checkStrictly)
     watchEffect(
       () => {
-        tree.expandNodeByIds(props.expanded)
+        tree.setCheckedByIds(props.checked)
       },
       {
         flush: 'post'
@@ -78,9 +80,11 @@ export default {
       }
     )
     watchEffect(() => {
-      ctx.emit('update:expanded', tree.getExpandedNodeIds())
+      ctx.emit('update:checked', tree.getCheckedIds())
     })
 
+    if (props.defaultExpandAll) tree.expandAll(true)
+
     return {
       tree,
       rootChildren
diff --git a/packages/element3/src/components/Tree/src/entity/Tree.ts b/packages/element3/src/components/Tree/src/entity/Tree.ts
index d8ad29ec9..a10d277a5 100644
--- a/packages/element3/src/components/Tree/src/entity/Tree.ts
+++ b/packages/element3/src/components/Tree/src/entity/Tree.ts
@@ -1,5 +1,5 @@
 import { DefaultNodeKey, RawNodeBase } from '../types'
-import { HandlerCb, ID, TreeNode } from './TreeNode'
+import { AsyncLoader, HandlerCb, ID, TreeNode } from './TreeNode'
 import { TreeMapper } from './TreeMapper'
 
 export class Tree<RawNode extends RawNodeBase> {
@@ -31,13 +31,13 @@ export class Tree<RawNode extends RawNodeBase> {
       {
         id: 'id',
         label: 'label',
-        children: 'children'
-        // isDisabled: 'isDisabled',
-        // isAsync: 'isAsync',
+        children: 'children',
+        isDisabled: 'isDisabled',
+        isAsync: 'isAsync',
+        isLeaf: 'isLeaf'
         // isChecked: 'isChecked',
         // isVisible: 'isVisible',
         // isExpanded: 'isExpanded',
-        // isLeaf: 'isLeaf'
       },
       defaultNodeKey
     )
@@ -80,8 +80,8 @@ export class Tree<RawNode extends RawNodeBase> {
   }
 
   expandAll(v = true): void {
-    this.root.depthEach((currentNode) => {
-      currentNode.expand(v, false)
+    this.rootProxy.depthEach((currentNode) => {
+      currentNode.expand(v, false, () => this.expandAll(v))
     })
   }
 
@@ -101,4 +101,25 @@ export class Tree<RawNode extends RawNodeBase> {
   getTreeNode(rawNode: RawNode): TreeNode {
     return this._mapper.getTreeNode(rawNode)
   }
+
+  setStrictly(isStrictly: boolean): void {
+    this.root.setStrictly(isStrictly)
+  }
+
+  bindAsyncLoader(asyncLoader: AsyncLoader): void {
+    const _asyncLoader = (node, resolve) => {
+      const _resolve = (nodes: RawNode[] | TreeNode[]) => {
+        if (nodes.length === 0) {
+          return resolve([])
+        }
+        if (node[0] instanceof TreeNode) {
+          return resolve(nodes)
+        }
+        return resolve(this._mapper.convertToTreeNodes(nodes as RawNode[]))
+      }
+      asyncLoader(node, _resolve)
+    }
+    this.root.bindAsyncLoader(_asyncLoader)
+    // this.rootProxy.expand(true)
+  }
 }
diff --git a/packages/element3/src/components/Tree/src/entity/TreeMapper.ts b/packages/element3/src/components/Tree/src/entity/TreeMapper.ts
index dbf880121..0847f2ce6 100644
--- a/packages/element3/src/components/Tree/src/entity/TreeMapper.ts
+++ b/packages/element3/src/components/Tree/src/entity/TreeMapper.ts
@@ -58,7 +58,8 @@ export class TreeMapper<RawNode extends RawNodeBase> {
         this.convertToTreeNodes(rawNode[this._toRawNodeKey.get('children')]),
         {
           isDisabled: rawNode[this._toRawNodeKey.get('isDisabled')],
-          isLeaf: rawNode[this._toRawNodeKey.get('isLeaf')]
+          isLeaf: rawNode[this._toRawNodeKey.get('isLeaf')],
+          isAsync: rawNode[this._toRawNodeKey.get('isAsync')]
         }
       )
     ) as TreeNode
@@ -251,6 +252,7 @@ export class TreeMapper<RawNode extends RawNodeBase> {
     key: string,
     value: any
   ): void {
+    if (!currentRawNode) return // TODO: 暂时这样，有个未知的BUG，对懒加载有影响
     if (key === this._toRawNodeKey.get('children')) {
       Reflect.set(currentRawNode, key, this.convertToRawNodes(value))
     } else if (Reflect.has(currentRawNode, key)) {
diff --git a/packages/element3/src/components/Tree/src/entity/TreeNode.ts b/packages/element3/src/components/Tree/src/entity/TreeNode.ts
index 624325e5f..a78cba1c5 100644
--- a/packages/element3/src/components/Tree/src/entity/TreeNode.ts
+++ b/packages/element3/src/components/Tree/src/entity/TreeNode.ts
@@ -8,7 +8,13 @@ export type HandlerCb = (
   currentNode: TreeNode,
   parentNode: TreeNode,
   level: number
-) => boolean | void
+) => boolean | void | Promise<void>
+
+export type AsyncState = 'notLoaded' | 'loaded' | 'loading'
+
+export type AsyncLoader = (node: TreeNode, resolve: Resolver) => void
+
+export type Resolver = (nodes: TreeNode[]) => void
 
 export interface TreeNodePublicProp {
   id: ID
@@ -32,6 +38,27 @@ export class TreeNode implements TreeNodePublicProp {
   private _isExpanded: boolean
   private _isRendered = false
   private _isVisible: boolean
+  private _isAsync: boolean
+  private _asyncLoader: AsyncLoader
+  private _asyncState: AsyncState
+
+  get asyncState(): AsyncState {
+    return this._asyncState
+  }
+
+  get asyncLoader() {
+    if (typeof this._asyncLoader === 'function') {
+      return this._asyncLoader
+    }
+    return (this._asyncLoader = this.parent?.asyncLoader)
+  }
+
+  get isAsync(): boolean {
+    if (this._isAsync) {
+      return this._isAsync
+    }
+    return (this._isAsync = this.parent?.isAsync ?? false)
+  }
 
   get isVisible(): boolean {
     return this._isVisible
@@ -79,7 +106,11 @@ export class TreeNode implements TreeNodePublicProp {
   }
 
   get isChecked(): boolean {
-    if (this.isLeaf || this.isStrictly) {
+    if (
+      this.isLeaf ||
+      this.isStrictly ||
+      (this.isAsync && this._asyncState !== 'loaded')
+    ) {
       return this._isChecked
     }
 
@@ -92,6 +123,9 @@ export class TreeNode implements TreeNodePublicProp {
   }
 
   get isLeaf(): boolean {
+    if (this.isAsync && this._asyncState !== 'loaded') {
+      return this._isLeaf
+    }
     return this.children.length === 0 || this._isLeaf
   }
 
@@ -109,7 +143,9 @@ export class TreeNode implements TreeNodePublicProp {
       isStrictly = false,
       isDisabled = false,
       isExpanded = false,
-      isVisible = true
+      isVisible = true,
+      isAsync = false,
+      asyncLoader = null
     } = {}
   ) {
     this.id = id ?? idSeed++
@@ -119,6 +155,9 @@ export class TreeNode implements TreeNodePublicProp {
     this._isDisabled = isDisabled
     this._isExpanded = isExpanded
     this._isVisible = isVisible
+    this._isAsync = isAsync
+    this._asyncLoader = asyncLoader
+    this._asyncState = 'notLoaded'
 
     this.setChecked(isChecked)
 
@@ -208,7 +247,7 @@ export class TreeNode implements TreeNodePublicProp {
   /**
    * Traverse upward
    */
-  upwardEach(callback: HandlerCb, { isSkipSelf = true } = {}): void {
+  upwardEach(callback: HandlerCb, { isSkipSelf = true } = {}): Promise<void> {
     let current = isSkipSelf ? this.parent : this
     while (current) {
       if (callback(current, current.parent, current.level)) {
@@ -237,11 +276,31 @@ export class TreeNode implements TreeNodePublicProp {
     isFunction(downToUpCallBack) && downToUpCallBack(this, this.parent, 0)
   }
 
-  expand(v = !this._isExpanded, isAutoExpandParent = false): void {
+  execAsyncLoader(cb = () => null) {
+    if (this.isLeaf || !this.isAsync || this._asyncState !== 'notLoaded') {
+      return
+    }
+
+    const resolver = (nodes: TreeNode[]) => {
+      this.appendChild(...nodes)
+      this._asyncState = 'loaded'
+      cb()
+    }
+    this._asyncState = 'loading'
+    this.asyncLoader(this, resolver)
+  }
+
+  expand(
+    v = !this._isExpanded,
+    isAutoExpandParent = false,
+    cb = () => null
+  ): void {
     this._isExpanded = v
     if (v) {
       this._isRendered = true
+      this.execAsyncLoader(cb)
     }
+
     if (isAutoExpandParent) {
       this.parent?.expand(true, true)
     }
@@ -263,4 +322,9 @@ export class TreeNode implements TreeNodePublicProp {
   hide() {
     this._isVisible = false
   }
+
+  bindAsyncLoader(asyncLoader: AsyncLoader): void {
+    this._isAsync = true
+    this._asyncLoader = asyncLoader
+  }
 }
diff --git a/packages/element3/src/components/Tree/tests/TreeMain.spec.ts b/packages/element3/src/components/Tree/tests/TreeMain.spec.ts
index bc329f31a..e57ac7403 100644
--- a/packages/element3/src/components/Tree/tests/TreeMain.spec.ts
+++ b/packages/element3/src/components/Tree/tests/TreeMain.spec.ts
@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils'
-import { nextTick, reactive, ref } from 'vue'
+import { nextTick, ref } from 'vue'
 import { t } from '../../../locale'
 import TreeMain from '../src/TreeMain.vue'
 
@@ -302,4 +302,58 @@ describe('TreeMain.vue', () => {
     expect(wrapper.find('#TreeNode1').classes()).toContain('is-expanded')
     expect(expanded.value).toEqual([1, 2])
   })
+
+  it('Test asynchronously loaded data', async () => {
+    const rawNodes = ref([])
+    const wrapper = mount(TreeMain, {
+      props: {
+        modelValue: rawNodes.value,
+        defaultExpandAll: true,
+        async: true,
+        asyncLoader(node, resolve) {
+          if (node.level > 1) {
+            return resolve([])
+          }
+          if (node.level === 0) {
+            return resolve([{ id: 1, label: 'test' }])
+          }
+          resolve([
+            {
+              id: 2,
+              label: 'test'
+            },
+            {
+              id: 3,
+              label: 'test',
+              isLeaf: true
+            }
+          ])
+        },
+        renderAfterExpand: false,
+        'onUpdate:modelValue'(v) {
+          rawNodes.value = v
+        }
+      }
+    })
+    await nextTick()
+    expect(wrapper.find('#TreeNode1').exists()).toBeTruthy()
+    expect(rawNodes.value).toEqual([
+      {
+        id: 1,
+        label: 'test',
+        children: [
+          {
+            id: 2,
+            label: 'test',
+            children: []
+          },
+          {
+            id: 3,
+            label: 'test',
+            children: []
+          }
+        ]
+      }
+    ])
+  })
 })
diff --git a/packages/element3/src/components/Tree/tests/entity/TreeNode.spec.ts b/packages/element3/src/components/Tree/tests/entity/TreeNode.spec.ts
index debe05d63..9eb67ae73 100644
--- a/packages/element3/src/components/Tree/tests/entity/TreeNode.spec.ts
+++ b/packages/element3/src/components/Tree/tests/entity/TreeNode.spec.ts
@@ -265,4 +265,23 @@ describe('TreeNode.ts', () => {
     expect(cb).toBeCalledTimes(3)
     expect(result.map((node) => node.id)).toEqual([2, 4])
   })
+
+  it('async load node', () => {
+    const root = new TreeNode(1, 'Node1', [
+      new TreeNode(2, 'Node1-1', [
+        new TreeNode(4, 'Node1-1-1', [], {
+          isAsync: true,
+          asyncLoader(node, resolve) {
+            expect(root.findOne(4).asyncState).toEqual('loading')
+            resolve([new TreeNode(5, 'AsyncNode')])
+          }
+        })
+      ])
+    ])
+    expect(root.findOne(4).asyncState).toEqual('notLoaded')
+    expect(root.findOne(4).isAsync).toBeTruthy()
+    root.findOne(4).expand(true)
+    expect(root.findOne(4).children).toHaveLength(1)
+    expect(root.findOne(4).asyncState).toEqual('loaded')
+  })
 })
diff --git a/packages/website/src/play/index.vue b/packages/website/src/play/index.vue
index 4ba9c9943..43dcb254b 100644
--- a/packages/website/src/play/index.vue
+++ b/packages/website/src/play/index.vue
@@ -1,102 +1,47 @@
 <template>
-  <input v-model="text" type="text" />
   <el-tree
-    v-model="nodes"
-    v-model:expanded="checked"
-    ref="tree"
-    :show-checkbox="true"
-    :accordion="false"
-    :checkOnClickNode="false"
-    :checkStrictly="false"
-    :defaultExpandAll="true"
-    :filterNodeMethod="null"
-    :defaultNodeKey="{
-      isDisabled: 'disabled'
-    }"
-  ></el-tree>
+    v-model="data"
+    :props="props"
+    :load="loadNode"
+    lazy
+    show-checkbox
+    defaultExpandAll
+  >
+  </el-tree>
 </template>
 
 <script>
-import { getCurrentInstance, reactive, ref, watch } from 'vue'
 export default {
-  setup() {
-    const vm = getCurrentInstance().proxy
+  data() {
+    return {
+      data: [],
+      props: {
+        label: 'name',
+        children: 'zones',
+        isLeaf: 'leaf'
+      }
+    }
+  },
+  methods: {
+    loadNode(node, resolve) {
+      if (node.level === 0) {
+        return resolve([{ name: 'region' }])
+      }
+      if (node.level > 2) return resolve([])
 
-    const nodes = ref([
-      {
-        label: '一级 1',
-        children: [
+      setTimeout(() => {
+        const data = [
           {
-            label: '二级 1-1',
-            children: [
-              {
-                label: '三级 1-1-1'
-              }
-            ]
-          }
-        ]
-      },
-      {
-        label: '一级 2',
-        children: [
-          {
-            label: '二级 2-1',
-            children: [
-              {
-                label: '三级 2-1-1'
-              }
-            ]
+            name: 'leaf',
+            leaf: true
           },
           {
-            label: '二级 2-2',
-            children: [
-              {
-                label: '三级 2-2-1'
-              }
-            ]
+            name: 'zone'
           }
         ]
-      },
-      {
-        label: '一级 3',
-        children: [
-          {
-            label: '二级 3-1',
-            disabled: true,
-            children: [
-              {
-                label: '三级 3-1-1'
-              }
-            ]
-          },
-          {
-            label: '二级 3-2',
-            children: [
-              {
-                label: '三级 3-2-1'
-              }
-            ]
-          }
-        ]
-      }
-    ])
 
-    const checked = ref([])
-    const text = ref('')
-
-    setTimeout(() => {
-      checked.value.push(11)
-      const root = vm.$refs.tree.$refs.treeMain.tree.root
-    }, 1000)
-
-    watch(text, (v) => {
-      vm.$refs.tree.filter(v)
-    })
-
-    return {
-      nodes,
-      checked,
-      text
+        resolve(data)
+      }, 500)
     }
   }
 }

From 0348713289dff697e56f508f7c1dbadf3ca37136 Mon Sep 17 00:00:00 2001
From: WumaCoder <1829913225@qq.com>
Date: Tue, 2 Feb 2021 23:45:54 +0800
Subject: [PATCH 8/8] refactor(Tree): Complete the custom node content

---
 .../src/components/Tree/src/NodeContent.vue   | 15 ++++-
 .../src/components/Tree/src/TreeMain.vue      |  4 +-
 .../components/Tree/src/entity/TreeMapper.ts  |  6 +-
 .../src/components/Tree/src/utils/Watcher.ts  |  8 ++-
 .../components/Tree/tests/TreeMain.spec.ts    | 64 ++++++++++++++++++-
 5 files changed, 90 insertions(+), 7 deletions(-)

diff --git a/packages/element3/src/components/Tree/src/NodeContent.vue b/packages/element3/src/components/Tree/src/NodeContent.vue
index d4f89d885..c51d0b680 100644
--- a/packages/element3/src/components/Tree/src/NodeContent.vue
+++ b/packages/element3/src/components/Tree/src/NodeContent.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
 import { TreeNode } from './entity/TreeNode'
-import { h } from 'vue'
+import { h, inject } from 'vue'
 export default {
   name: 'ElNodeContent',
 
@@ -12,7 +12,20 @@ export default {
   },
 
   setup(props) {
+    const elTree: any = inject('elTree')
     return () => {
+      if (typeof elTree.$slots.default === 'function') {
+        return elTree.$slots.default({
+          node: props.node,
+          data: elTree.tree.getRawNode(props.node)
+        })
+      } else if (typeof elTree.renderContent === 'function') {
+        return elTree.renderContent({
+          node: props.node,
+          data: elTree.tree.getRawNode(props.node)
+        })
+      }
+
       return h('span', props.node.label)
     }
   }
diff --git a/packages/element3/src/components/Tree/src/TreeMain.vue b/packages/element3/src/components/Tree/src/TreeMain.vue
index e49387422..c6405530d 100644
--- a/packages/element3/src/components/Tree/src/TreeMain.vue
+++ b/packages/element3/src/components/Tree/src/TreeMain.vue
@@ -44,7 +44,9 @@ export default {
     defaultExpandAll: Boolean,
 
     async: Boolean,
-    asyncLoader: Function as PropType<AsyncLoader>
+    asyncLoader: Function as PropType<AsyncLoader>,
+
+    renderContent: Function
   },
   emits: ['update:modelValue', 'update:checked', 'update:expanded'],
   setup(props, ctx) {
diff --git a/packages/element3/src/components/Tree/src/entity/TreeMapper.ts b/packages/element3/src/components/Tree/src/entity/TreeMapper.ts
index 0847f2ce6..2960db985 100644
--- a/packages/element3/src/components/Tree/src/entity/TreeMapper.ts
+++ b/packages/element3/src/components/Tree/src/entity/TreeMapper.ts
@@ -252,7 +252,7 @@ export class TreeMapper<RawNode extends RawNodeBase> {
     key: string,
     value: any
   ): void {
-    if (!currentRawNode) return // TODO: 暂时这样，有个未知的BUG，对懒加载有影响
+    if (!currentRawNode) return // TODO: 暂时这样，有个未知的BUG，对懒加载的性能有影响
     if (key === this._toRawNodeKey.get('children')) {
       Reflect.set(currentRawNode, key, this.convertToRawNodes(value))
     } else if (Reflect.has(currentRawNode, key)) {
@@ -274,10 +274,10 @@ export class TreeMapper<RawNode extends RawNodeBase> {
   }
 
   getRawNode(treeNode: TreeNode): RawNode {
-    return this._toRawNode.get(treeNode)
+    return this._toRawNode.get(this._treeNodeWatcher.getRaw(treeNode))
   }
 
   getTreeNode(rawNode: RawNode): TreeNode {
-    return this._toTreeNode.get(rawNode)
+    return this._toTreeNode.get(this._rawNodeWatcher.getRaw(rawNode))
   }
 }
diff --git a/packages/element3/src/components/Tree/src/utils/Watcher.ts b/packages/element3/src/components/Tree/src/utils/Watcher.ts
index 4ed1e265b..f79682c3a 100644
--- a/packages/element3/src/components/Tree/src/utils/Watcher.ts
+++ b/packages/element3/src/components/Tree/src/utils/Watcher.ts
@@ -31,6 +31,7 @@ export type WatchCb<T> = (args: WatcherCbArgs<T>) => void
 
 export class Watcher<T extends RawNodeBase> {
   private _toProxy = new WeakMap<T, T>()
+  private _toRaw = new WeakMap<T, T>()
   private _proxy: T
   private _event = new Event<WatcherType>()
 
@@ -43,7 +44,7 @@ export class Watcher<T extends RawNodeBase> {
   }
 
   reactive(target: T, lastTarget: T = null): T {
-    if (!isObject(target)) {
+    if (!isObject(target) || this._toRaw.has(target)) {
       return target
     }
     if (this._toProxy.has(target)) {
@@ -59,6 +60,7 @@ export class Watcher<T extends RawNodeBase> {
     const proxy = new Proxy(target, handler)
 
     this._toProxy.set(target, proxy)
+    this._toRaw.set(proxy, target)
 
     return proxy
     function forCurrentNode() {
@@ -148,4 +150,8 @@ export class Watcher<T extends RawNodeBase> {
       value
     } as WatcherCbArgs<T>)
   }
+
+  getRaw(proxy) {
+    return this._toRaw.get(proxy)
+  }
 }
diff --git a/packages/element3/src/components/Tree/tests/TreeMain.spec.ts b/packages/element3/src/components/Tree/tests/TreeMain.spec.ts
index e57ac7403..214f6ef66 100644
--- a/packages/element3/src/components/Tree/tests/TreeMain.spec.ts
+++ b/packages/element3/src/components/Tree/tests/TreeMain.spec.ts
@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils'
-import { nextTick, ref } from 'vue'
+import { h, nextTick, ref } from 'vue'
 import { t } from '../../../locale'
 import TreeMain from '../src/TreeMain.vue'
 
@@ -356,4 +356,66 @@ describe('TreeMain.vue', () => {
       }
     ])
   })
+
+  it('render-content method DIY node content', () => {
+    const rawNodes = [
+      {
+        id: 1,
+        label: 'Node1',
+        children: [
+          {
+            id: 11,
+            label: 'Node1-1'
+          }
+        ]
+      },
+      {
+        id: 2,
+        label: 'Node2'
+      }
+    ]
+    const wrapper = mount(TreeMain, {
+      props: {
+        modelValue: rawNodes,
+        renderAfterExpand: false,
+        renderContent({ node, data }) {
+          return h('span', node.level + data.label)
+        }
+      }
+    })
+
+    expect(wrapper.text()).toBe('1Node12Node1-11Node2')
+  })
+
+  it('#default slot method DIY node content', () => {
+    const rawNodes = [
+      {
+        id: 1,
+        label: 'Node1',
+        children: [
+          {
+            id: 11,
+            label: 'Node1-1'
+          }
+        ]
+      },
+      {
+        id: 2,
+        label: 'Node2'
+      }
+    ]
+    const wrapper = mount(TreeMain, {
+      props: {
+        modelValue: rawNodes,
+        renderAfterExpand: false
+      },
+      slots: {
+        default({ node, data }) {
+          return h('span', node.level + data.label)
+        }
+      }
+    })
+
+    expect(wrapper.text()).toBe('1Node12Node1-11Node2')
+  })
 })