新增功能：搜索后定位滑动到 指定节点位置

新增功能：搜索后定位滑动到 指定节点位置

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 = () => {