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/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/Tree.vue b/packages/element3/src/components/Tree/src/Tree.vue
index 85a45cb17..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">
@@ -19,7 +21,15 @@ export default defineComponent({
     modelValue: Array,
 
     defaultNodeKey: Object,
-    props: Object
+    props: Object,
+
+    filterNodeMethod: Function,
+
+    async: Boolean,
+    lazy: Boolean,
+
+    asyncLoader: Function,
+    load: Function
   },
   emits: ['update:modelValue', 'update:data'],
   computed: {
@@ -34,6 +44,28 @@ export default defineComponent({
     },
     _defaultNodeKey() {
       return this.defaultNodeKey ?? this.props
+    },
+    _async() {
+      return this.async || this.lazy
+    },
+    _asyncLoader() {
+      return this.asyncLoader ?? this.load
+    }
+  },
+  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)
+      }
     }
   }
 })
diff --git a/packages/element3/src/components/Tree/src/TreeMain.vue b/packages/element3/src/components/Tree/src/TreeMain.vue
index 7b12e29c3..c6405530d 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,12 @@ 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>,
+
+    renderContent: Function
   },
   emits: ['update:modelValue', 'update:checked', 'update:expanded'],
   setup(props, ctx) {
@@ -49,12 +54,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 +66,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 +82,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/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/Tree.ts b/packages/element3/src/components/Tree/src/entity/Tree.ts
index 77da5a0ff..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 { ID, TreeNode } from './TreeNode'
+import { AsyncLoader, HandlerCb, ID, TreeNode } from './TreeNode'
 import { TreeMapper } from './TreeMapper'
 
 export class Tree<RawNode extends RawNodeBase> {
@@ -34,10 +34,10 @@ export class Tree<RawNode extends RawNodeBase> {
         children: 'children',
         isDisabled: 'isDisabled',
         isAsync: 'isAsync',
-        isChecked: 'isChecked',
-        isVisible: 'isVisible',
-        isExpanded: 'isExpanded',
         isLeaf: 'isLeaf'
+        // isChecked: 'isChecked',
+        // isVisible: 'isVisible',
+        // isExpanded: 'isExpanded',
       },
       defaultNodeKey
     )
@@ -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,19 +74,52 @@ 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 {
+    this.rootProxy.depthEach((currentNode) => {
+      currentNode.expand(v, false, () => this.expandAll(v))
+    })
+  }
+
+  filter(target: HandlerCb | string): TreeNode[] {
+    const nodes = this.root.findMany(target)
     this.root.depthEach((currentNode) => {
-      currentNode.expand(v, false)
+      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)
+  }
+
+  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 01dce16b5..2960db985 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)) {
@@ -270,4 +272,12 @@ export class TreeMapper<RawNode extends RawNodeBase> {
   ): void {
     currentRawNode[this._toRawNodeKey.get('children')][index] = childNode
   }
+
+  getRawNode(treeNode: TreeNode): RawNode {
+    return this._toRawNode.get(this._treeNodeWatcher.getRaw(treeNode))
+  }
+
+  getTreeNode(rawNode: RawNode): TreeNode {
+    return this._toTreeNode.get(this._rawNodeWatcher.getRaw(rawNode))
+  }
 }
diff --git a/packages/element3/src/components/Tree/src/entity/TreeNode.ts b/packages/element3/src/components/Tree/src/entity/TreeNode.ts
index da679103d..a78cba1c5 100644
--- a/packages/element3/src/components/Tree/src/entity/TreeNode.ts
+++ b/packages/element3/src/components/Tree/src/entity/TreeNode.ts
@@ -4,11 +4,17 @@ 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 | 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
@@ -31,6 +37,36 @@ export class TreeNode implements TreeNodePublicProp {
   private _isDisabled: boolean
   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
+  }
+
+  set isVisible(v: boolean) {
+    this._isVisible = v
+  }
 
   get isRendered(): boolean {
     return this._isRendered
@@ -70,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
     }
 
@@ -83,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
   }
 
@@ -99,7 +142,10 @@ export class TreeNode implements TreeNodePublicProp {
       isChecked = false,
       isStrictly = false,
       isDisabled = false,
-      isExpanded = false
+      isExpanded = false,
+      isVisible = true,
+      isAsync = false,
+      asyncLoader = null
     } = {}
   ) {
     this.id = id ?? idSeed++
@@ -108,6 +154,10 @@ export class TreeNode implements TreeNodePublicProp {
     this._isStrictly = isStrictly
     this._isDisabled = isDisabled
     this._isExpanded = isExpanded
+    this._isVisible = isVisible
+    this._isAsync = isAsync
+    this._asyncLoader = asyncLoader
+    this._asyncState = 'notLoaded'
 
     this.setChecked(isChecked)
 
@@ -160,14 +210,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 (
+        target === currentNode.id ||
+        target === currentNode ||
+        (typeof target === 'function' &&
+          target(currentNode, currentNode.parent, currentNode.level))
+      ) {
+        result = currentNode
+        return true
+      }
+    })
+    return result
+  }
+
+  findMany(target: string | HandlerCb) {
+    const result = []
     this.depthEach((currentNode) => {
-      if (id === currentNode.id || id === currentNode) {
-        node = currentNode
+      if (
+        (typeof target === 'string' && currentNode.label.includes(target)) ||
+        (typeof target === 'function' &&
+          target(currentNode, currentNode.parent, currentNode.level))
+      ) {
+        result.push(currentNode)
       }
     })
-    return node
+    return result
   }
 
   findChild(id: ID | TreeNode): TreeNode {
@@ -177,13 +247,10 @@ export class TreeNode implements TreeNodePublicProp {
   /**
    * Traverse upward
    */
-  upwardEach(
-    callback: (node: TreeNode) => boolean,
-    { isSkipSelf = true } = {}
-  ): void {
+  upwardEach(callback: HandlerCb, { isSkipSelf = true } = {}): Promise<void> {
     let current = isSkipSelf ? this.parent : this
     while (current) {
-      if (callback(current)) {
+      if (callback(current, current.parent, current.level)) {
         return
       }
       current = current.parent
@@ -193,18 +260,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]
@@ -220,14 +276,31 @@ export class TreeNode implements TreeNodePublicProp {
     isFunction(downToUpCallBack) && downToUpCallBack(this, this.parent, 0)
   }
 
-  expand(v = !this._isExpanded, isAutoExpandParent = false): void {
-    if (this.isLeaf) {
+  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)
     }
@@ -241,4 +314,17 @@ export class TreeNode implements TreeNodePublicProp {
     parent.children.forEach((node) => node.expand(false))
     this.expand(v)
   }
+
+  show() {
+    this._isVisible = true
+    this.parent?.show()
+  }
+  hide() {
+    this._isVisible = false
+  }
+
+  bindAsyncLoader(asyncLoader: AsyncLoader): void {
+    this._isAsync = true
+    this._asyncLoader = asyncLoader
+  }
 }
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/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/TreeMain.spec.ts b/packages/element3/src/components/Tree/tests/TreeMain.spec.ts
index bc329f31a..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, reactive, ref } from 'vue'
+import { h, nextTick, ref } from 'vue'
 import { t } from '../../../locale'
 import TreeMain from '../src/TreeMain.vue'
 
@@ -302,4 +302,120 @@ 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: []
+          }
+        ]
+      }
+    ])
+  })
+
+  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')
+  })
 })
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()
+  })
 })
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..9eb67ae73 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,64 @@ 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()
+  })
+
+  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])
+  })
+
+  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/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]
+    })
   })
 })
diff --git a/packages/website/src/play/index.vue b/packages/website/src/play/index.vue
index 094658529..43dcb254b 100644
--- a/packages/website/src/play/index.vue
+++ b/packages/website/src/play/index.vue
@@ -1,93 +1,47 @@
 <template>
   <el-tree
-    v-model="nodes"
-    v-model:expanded="checked"
-    ref="tree"
-    :show-checkbox="true"
-    :accordion="false"
-    :checkOnClickNode="false"
-    :checkStrictly="false"
-    :defaultExpandAll="true"
-    :defaultNodeKey="{
-      isDisabled: 'disabled'
-    }"
-  ></el-tree>
+    v-model="data"
+    :props="props"
+    :load="loadNode"
+    lazy
+    show-checkbox
+    defaultExpandAll
+  >
+  </el-tree>
 </template>
 
 <script>
-import { getCurrentInstance, reactive, ref } 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: [
-          {
-            label: '二级 1-1',
-            children: [
-              {
-                label: '三级 1-1-1'
-              }
-            ]
-          }
-        ]
-      },
-      {
-        label: '一级 2',
-        children: [
-          {
-            label: '二级 2-1',
-            children: [
-              {
-                label: '三级 2-1-1'
-              }
-            ]
-          },
-          {
-            label: '二级 2-2',
-            children: [
-              {
-                label: '三级 2-2-1'
-              }
-            ]
-          }
-        ]
-      },
-      {
-        label: '一级 3',
-        children: [
+      setTimeout(() => {
+        const data = [
           {
-            label: '二级 3-1',
-            disabled: true,
-            children: [
-              {
-                label: '三级 3-1-1'
-              }
-            ]
+            name: 'leaf',
+            leaf: true
           },
           {
-            label: '二级 3-2',
-            children: [
-              {
-                label: '三级 3-2-1'
-              }
-            ]
+            name: 'zone'
           }
         ]
-      }
-    ])
-
-    const checked = ref([])
 
-    setTimeout(() => {
-      checked.value.push(11)
-    }, 1000)
-
-    return {
-      nodes,
-      checked
+        resolve(data)
+      }, 500)
     }
   }
 }