From 8c0dc5b928274f9742a52a51b5fa259be3621fc9 Mon Sep 17 00:00:00 2001
From: Pineapple <1244476905@qq.com>
Date: Sat, 27 Nov 2021 00:46:11 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=94=B9=E8=BF=9Btree=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6useHighlightNode=E4=B8=AD=E7=9A=84handleClick=E7=9A=84?=
 =?UTF-8?q?=E5=AE=9E=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../tree/src/composables/use-highlight.ts     | 21 +++++++++----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/packages/devui-vue/devui/tree/src/composables/use-highlight.ts b/packages/devui-vue/devui/tree/src/composables/use-highlight.ts
index 5874f66f..93f20dd5 100644
--- a/packages/devui-vue/devui/tree/src/composables/use-highlight.ts
+++ b/packages/devui-vue/devui/tree/src/composables/use-highlight.ts
@@ -13,26 +13,25 @@ const HIGHLIGHT_CLASS = 'active'
 const IS_DISABLED_FLAG = 'devui-tree_isDisabledNode'
 const useHighlightNode: TypeUseHighlightNode = () => {
   const nodeClassNameReflectRef = ref<TypeHighlightClass>({})
+  const prevActiveNodeKey = ref<string>('')
   const handleInit = (isDisabled = false, ...keys) => {
     const key = keys.join('-')
-    nodeClassNameReflectRef.value[key] = isDisabled ? IS_DISABLED_FLAG : (nodeClassNameReflectRef.value[key] || '')
+    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 : ''])
-      )
+    if (nodeClassNameReflectRef.value[key] === IS_DISABLED_FLAG) return
+    if (prevActiveNodeKey.value === key) return
+    if (prevActiveNodeKey.value) nodeClassNameReflectRef.value[prevActiveNodeKey.value] = ''
+    nodeClassNameReflectRef.value[key] = HIGHLIGHT_CLASS
+    prevActiveNodeKey.value = key
   }
   return {
     nodeClassNameReflect: nodeClassNameReflectRef,
     handleClickOnNode: handleClick,
-    handleInitNodeClassNameReflect: handleInit,
+    handleInitNodeClassNameReflect: handleInit
   }
 }
 export default useHighlightNode
-- 
Gitee