From 01097b26d9af04a27f8c7fdbadbec13828efa7b9 Mon Sep 17 00:00:00 2001
From: TimSpan <cat20201314@163.com>
Date: Fri, 2 Aug 2024 14:50:06 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=8A=9F=E8=83=BD=EF=BC=9A?=
 =?UTF-8?q?=E6=90=9C=E7=B4=A2=E5=90=8E=E5=AE=9A=E4=BD=8D=E6=BB=91=E5=8A=A8?=
 =?UTF-8?q?=E5=88=B0=20=E6=8C=87=E5=AE=9A=E8=8A=82=E7=82=B9=E4=BD=8D?=
 =?UTF-8?q?=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新增功能：搜索后定位滑动到 指定节点位置
---
 src/views/page/index.vue | 28 ++++++++++++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/views/page/index.vue b/src/views/page/index.vue
index 90c5d05f..da146485 100644
--- a/src/views/page/index.vue
+++ b/src/views/page/index.vue
@@ -30,7 +30,7 @@
           </el-form-item>
         </div>
         <!-- <button @click="refreshTreeData">刷新</button> -->
-        <div v-loading="loading" style="padding: 0px 20px; height: 75%; overflow: auto">
+        <div ref="scrollContainer" v-loading="loading" style="padding: 0px 20px; height: 75%; overflow: auto">
           <!-- <div v-loading="loading"> -->
           <!-- :load-data="onLoadData" -->
           <!--  height="500" -->
@@ -559,6 +559,28 @@ const fieldNames: TreeProps['fieldNames'] = {
 }
 const loading = ref(false)
 //四级组织树获取
+const scrollContainer = ref()
+// 定位树节点
+const scrollToMatchedNode = (searchValue: string) => {
+  nextTick(() => {
+    try {
+      // console.log(treeRef.value) //这是一个proxy对象，并不是根元素
+      const treeEl = scrollContainer.value.querySelector('.ant-tree')
+      const titleElements = treeEl.querySelectorAll('.ant-tree-title')
+      let matchedNode = null
+      titleElements.forEach((element: any) => {
+        if (element.textContent.trim() === searchValue) {
+          matchedNode = element
+        }
+      })
+      console.log('matchedNode_________', matchedNode)
+      if (matchedNode) {
+        // 将包含该节点的滚动容器滚动到目标元素的位置
+        ;(matchedNode as HTMLElement).scrollIntoView({ behavior: 'smooth', block: 'center' })
+      }
+    } catch (error) {}
+  })
+}
 const treedataall = ref([])
 const searchValue = ref('') //搜索
 const treeRef = ref() // 创建一个 ref 用来引用 a-tree 组件
@@ -628,7 +650,9 @@ const onSearch = () => {
   selectedKeys.value = keysToSelect
   if (selectedKeys.value.length > 0) {
     console.log('selectedKeys.value', selectedKeys.value)
-    scrollToKey(selectedKeys.value[0])
+
+    scrollToMatchedNode(searchValue.value)
+    // scrollToKey(selectedKeys.value[0])
   }
 }
 const refreshTreeData = () => {