feat(tree): support scroll instance function and key param (#3415)

src/tree/_example-composition/vscroll.vue

@@ -30,6 +30,9 @@
       <t-space>
         <t-button @click="append()">插入根节点</t-button>
       </t-space>
+      <t-space>
+        <t-button @click="scrollTo()">滚动到指定节点</t-button>
+      </t-space>
     </t-space>
     <t-tree
       ref="tree"
@@ -129,4 +132,14 @@ const append = (node) => {
 const remove = (node) => {
   node.remove();
 };
+
+const scrollTo = () => {
+  tree.value.scrollTo({
+    // 指定key滚动，即当前节点对应的唯一值，推荐使用
+    key: 't30',
+    behavior: 'smooth',
+    // 指定index滚动，如果存在多级嵌套，需要自己计算index
+    // index: 100,
+  });
+};
 </script>

src/tree/_example/vscroll.vue

@@ -30,6 +30,9 @@
       <t-space>
         <t-button @click="append()">插入根节点</t-button>
       </t-space>
+      <t-space>
+        <t-button @click="scrollTo()">滚动到指定节点</t-button>
+      </t-space>
     </t-space>
     <t-tree
       ref="tree"
@@ -144,6 +147,16 @@ export default {
     remove(node) {
       node.remove();
     },
+    scrollTo() {
+      const { tree } = this.$refs;
+      tree.scrollTo({
+        // 指定key滚动，即当前节点对应的唯一值，推荐使用
+        key: 't30',
+        behavior: 'smooth',
+        // 指定index滚动，如果存在多级嵌套，需要自己计算index
+        // index: 100,
+      });
+    },
   },
 };
 </script>

src/tree/hooks/useTreeScroll.ts

@@ -1,7 +1,11 @@
+import get from 'lodash/get';
 import {
   computed, onMounted, TypeRef, useVirtualScroll, TypeScroll, TreeNode,
 } from '../adapt';
 import { TypeTreeState, TypeTimer } from '../tree-types';
+import log from '../../_common/js/log';
+
+import type { ComponentScrollToElementParams } from '../../common';
 
 // tree 虚拟滚动整合
 export default function useTreeScroll(state: TypeTreeState) {
@@ -76,11 +80,27 @@ export default function useTreeScroll(state: TypeTreeState) {
     emitScrollEvent(e);
   };
 
+  const handleScrollTo = (params: ComponentScrollToElementParams) => {
+    let { index } = params;
+    if (!index && index !== 0) {
+      if (!params.key) {
+        log.error('Tree', 'scrollToElement: one of `index` or `key` must exist.');
+        return;
+      }
+      index = allNodes.value?.findIndex((item) => [get(item.data, 'key'), get(item.data, 'value')].includes(params.key));
+      if (index < 0) {
+        log.error('Tree', `${params.key} does not exist in data, check \`key\` or \`data\` please.`);
+        return;
+      }
+    }
+    virtualConfig.scrollToElement({ ...params, index: index - 1 });
+  };
+
   return {
     // 虚拟滚动相关
     treeContentRef,
     onInnerVirtualScroll,
     virtualConfig,
-    scrollToElement: virtualConfig.scrollToElement,
+    scrollToElement: handleScrollTo,
   };
 }

src/tree/tree.tsx

@@ -54,7 +54,7 @@ export default defineComponent({
 
     useDragHandle(state);
     const { setActived, setExpanded, setChecked } = useTreeAction(state);
-    const { onInnerVirtualScroll, virtualConfig } = useTreeScroll(state);
+    const { onInnerVirtualScroll, virtualConfig, scrollToElement } = useTreeScroll(state);
     const { renderTreeNodes, nodesEmpty } = useTreeNodes(state);
     const {
       treeClasses, treeContentStyles, scrollStyles, cursorStyles,
@@ -86,7 +86,9 @@ export default defineComponent({
       scrollStyles,
       cursorStyles,
       virtualConfig,
-      scrollToElement: virtualConfig.scrollToElement,
+      scrollTo: scrollToElement,
+      // deprecated
+      scrollToElement,
     };
   },
 

test/snap/__snapshots__/csr.test.js.snap

@@ -131045,6 +131045,29 @@ exports[`csr snapshot test > csr test ./src/tree/_example/vscroll.vue 1`] = `
           </div>
         </div>
       </div>
+      <div
+        class="t-space-item"
+      >
+        <div
+          class="t-space t-space-horizontal"
+          style="gap: 16px;"
+        >
+          <div
+            class="t-space-item"
+          >
+            <button
+              class="t-button t-button--variant-base t-button--theme-primary"
+              type="button"
+            >
+              <span
+                class="t-button__text"
+              >
+                滚动到指定节点
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
   <div