feat: tree add scrollTo method, close #5626

components/tree/Tree.tsx

@@ -5,7 +5,7 @@ import VcTree from '../vc-tree';
 import PropTypes from '../_util/vue-types';
 import { filterEmpty } from '../_util/props-util';
 import initDefaultProps from '../_util/props-util/initDefaultProps';
-import type { DataNode, EventDataNode, FieldNames, Key } from '../vc-tree/interface';
+import type { DataNode, EventDataNode, FieldNames, Key, ScrollTo } from '../vc-tree/interface';
 import type { TreeNodeProps } from '../vc-tree/props';
 import { treeProps as vcTreeProps } from '../vc-tree/props';
 import useConfigInject from '../_util/hooks/useConfigInject';
@@ -168,11 +168,15 @@ export default defineComponent({
     );
     const { prefixCls, direction, virtual } = useConfigInject('tree', props);
     const treeRef = ref();
+    const scrollTo: ScrollTo = scroll => {
+      treeRef.value?.scrollTo(scroll);
+    };
     expose({
       treeRef,
       onNodeExpand: (...args) => {
         treeRef.value?.onNodeExpand(...args);
       },
+      scrollTo,
       selectedKeys: computed(() => treeRef.value?.selectedKeys),
       checkedKeys: computed(() => treeRef.value?.checkedKeys),
       halfCheckedKeys: computed(() => treeRef.value?.halfCheckedKeys),

components/tree/index.en-US.md

@@ -56,6 +56,12 @@ Almost anything can be represented in a tree structure. Examples include directo
 | rightClick | Callback function for when the user right clicks a treeNode | function({event, node}) |
 | select | Callback function for when the user clicks a treeNode | function(selectedKeys, e:{selected: bool, selectedNodes, node, event}) |
 
+### Tree Methods
+
+| Name | Description |
+| --- | --- |
+| scrollTo({ key: string \| number; align?: 'top' \| 'bottom' \| 'auto'; offset?: number }) | Scroll to key item in virtual scroll |
+
 ### TreeNode
 
 | Property | Description | Type | Default | Version |

components/tree/index.zh-CN.md

@@ -57,6 +57,12 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Xh-oWqg9k/Tree.svg
 | rightClick | 响应右键点击 | function({event, node}) |
 | select | 点击树节点触发 | function(selectedKeys, e:{selected: bool, selectedNodes, node, event}) |
 
+### Tree 方法
+
+| 名称 | 说明 |
+| --- | --- |
+| scrollTo({ key: string \| number; align?: 'top' \| 'bottom' \| 'auto'; offset?: number }) | 虚拟滚动下，滚动到指定 key 条目 |
+
 ### TreeNode
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |