diff --git a/devui/tree/src/composables/use-highlight.ts b/devui/tree/src/composables/use-highlight.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5874f66f0994241ed8da6509f097c693dc97b510
--- /dev/null
+++ b/devui/tree/src/composables/use-highlight.ts
@@ -0,0 +1,38 @@
+import { ref, Ref } from 'vue'
+
+interface TypeHighlightClass {
+  [key: string]: 'active' | '' | 'devui-tree_isDisabledNode'
+}
+type TypeUseHighlightNode = () => {
+  nodeClassNameReflect: Ref<TypeHighlightClass>
+  handleClickOnNode: (index: string) => void
+  handleInitNodeClassNameReflect: (isDisabled: boolean, ...keys: Array<string>) => string
+}
+
+const HIGHLIGHT_CLASS = 'active'
+const IS_DISABLED_FLAG = 'devui-tree_isDisabledNode'
+const useHighlightNode: TypeUseHighlightNode = () => {
+  const nodeClassNameReflectRef = ref<TypeHighlightClass>({})
+  const handleInit = (isDisabled = false, ...keys) => {
+    const key = keys.join('-')
+    nodeClassNameReflectRef.value[key] = isDisabled ? IS_DISABLED_FLAG : (nodeClassNameReflectRef.value[key] || '')
+    return key
+  }
+  const handleClick = (key) => {
+    if (nodeClassNameReflectRef.value[key] === IS_DISABLED_FLAG) {
+      return
+    }
+    nodeClassNameReflectRef.value =
+      Object.fromEntries(
+        Object
+          .entries(nodeClassNameReflectRef.value)
+          .map(([k]) => [k, k === key ? HIGHLIGHT_CLASS : ''])
+      )
+  }
+  return {
+    nodeClassNameReflect: nodeClassNameReflectRef,
+    handleClickOnNode: handleClick,
+    handleInitNodeClassNameReflect: handleInit,
+  }
+}
+export default useHighlightNode
diff --git a/devui/tree/src/composables/use-toggle.ts b/devui/tree/src/composables/use-toggle.ts
index f248002490ebde4fd7dd3f1b44fb78860ba95998..632218d1e0afba618bf56f9dabeae6c236577646 100644
--- a/devui/tree/src/composables/use-toggle.ts
+++ b/devui/tree/src/composables/use-toggle.ts
@@ -11,9 +11,9 @@ export default function useToggle(data: unknown): any {
 
   const openedData = ref(openedTree(data))
 
-  const toggle = (item) => {
+  const toggle = (target, item) => {
+    target.stopPropagation()
     if (!item.children) return
-    
     item.open = !item.open
     openedData.value = openedTree(data)
   }
diff --git a/devui/tree/src/tree.tsx b/devui/tree/src/tree.tsx
index bae27917e2c810023fcd47c70f3fd30798cd08f6..17173f72fd1a340374ad851c4c01b4a577df5f5c 100644
--- a/devui/tree/src/tree.tsx
+++ b/devui/tree/src/tree.tsx
@@ -2,6 +2,7 @@ import { defineComponent, toRefs } from 'vue'
 import { treeProps, TreeProps } from './tree-types'
 import { flatten } from './util'
 import useToggle from './composables/use-toggle'
+import useHighlightNode from './composables/use-highlight'
 import IconOpen from './assets/open.svg'
 import IconClose from './assets/close.svg'
 import './tree.scss'
@@ -15,26 +16,36 @@ export default defineComponent({
     const flatData = flatten(data.value)
 
     const { openedData, toggle } = useToggle(data.value)
+    const { nodeClassNameReflect, handleInitNodeClassNameReflect, handleClickOnNode } = useHighlightNode()
 
     const Indent = () => {
       return <span style="display: inline-block; width: 16px; height: 16px;"></span>
     }
 
     const renderNode = (item) => {
+      // 现在数据里面没有 key , 未来做优化需要 key 值嘛? 
+      const { key = '', label, disabled, open, level, children } = item
+      const nodeId = handleInitNodeClassNameReflect(disabled, key, label)
       return (
         <div
-          class={['devui-tree-node', item.open && 'devui-tree-node__open']}
-          style={{ paddingLeft: `${24 * (item.level - 1)}px` }}
-          onClick={() => toggle(item)}
+          class={['devui-tree-node', open && 'devui-tree-node__open']}
+          style={{ paddingLeft: `${24 * (level - 1)}px` }}
         >
-          <div class="devui-tree-node__content">
+          <div
+            class={`devui-tree-node__content ${nodeClassNameReflect.value[nodeId]}`}
+            onClick={() => handleClickOnNode(nodeId)}
+          >
             <div class="devui-tree-node__content--value-wrapper">
               {
-                item.children
-                  ? item.open ? <IconOpen class="mr-xs" /> : <IconClose class="mr-xs" />
+                children
+                  ? open
+                    ? <IconOpen class="mr-xs" onClick={(target) => toggle(target, item)} />
+                    : <IconClose class="mr-xs" onClick={(target) => toggle(target, item)} />
                   : <Indent />
               }
-              <span class="devui-tree-node__title">{ item.label }</span>
+              <span class={['devui-tree-node__title', disabled && 'select-disabled']}>
+                { label }
+              </span>
             </div>
           </div>
         </div>
@@ -42,7 +53,6 @@ export default defineComponent({
     }
 
     const renderTree = (tree) => {
-      
       return tree.map(item => {
         if (!item.children) {
           return renderNode(item)