diff --git a/components/vc-tree/Tree.tsx b/components/vc-tree/Tree.tsx index 92eb84183..d27185c40 100644 --- a/components/vc-tree/Tree.tsx +++ b/components/vc-tree/Tree.tsx @@ -31,6 +31,7 @@ import { shallowRef, watch, watchEffect, + nextTick, } from 'vue'; import initDefaultProps from '../_util/props-util/initDefaultProps'; import type { CheckInfo, DraggableFn } from './props'; @@ -246,6 +247,26 @@ export default defineComponent({ const scrollTo: ScrollTo = scroll => { listRef.value.scrollTo(scroll); }; + watch( + () => props.activeKey, + () => { + if (props.activeKey !== undefined) { + activeKey.value = props.activeKey; + } + }, + { immediate: true }, + ); + watch( + activeKey, + val => { + nextTick(() => { + if (val !== null) { + scrollTo({ key: val }); + } + }); + }, + { immediate: true, flush: 'post' }, + ); // =========================== Expanded =========================== /** Set uncontrolled `expandedKeys`. This will also auto update `flattenNodes`. */ const setExpandedKeys = (keys: Key[]) => { @@ -270,16 +291,14 @@ export default defineComponent({ currentMouseOverDroppableNodeKey = null; }; // if onNodeDragEnd is called, onWindowDragEnd won't be called since stopPropagation() is called - const onNodeDragEnd: NodeDragEventHandler = (event, node, outsideTree = false) => { + const onNodeDragEnd: NodeDragEventHandler = (event, node) => { const { onDragend } = props; dragState.dragOverNodeKey = null; cleanDragState(); - if (onDragend && !outsideTree) { - onDragend({ event, node: node.eventData }); - } + onDragend?.({ event, node: node.eventData }); dragNode = null; }; @@ -552,8 +571,8 @@ export default defineComponent({ dropPosition: dropPosition + Number(posArr[posArr.length - 1]), }; - if (onDrop && !outsideTree) { - onDrop(dropResult); + if (!outsideTree) { + onDrop?.(dropResult); } dragNode = null; @@ -865,8 +884,9 @@ export default defineComponent({ if (activeKey.value === newActiveKey) { return; } - - activeKey.value = newActiveKey; + if (props.activeKey !== undefined) { + activeKey.value = newActiveKey; + } if (newActiveKey !== null) { scrollTo({ key: newActiveKey }); } diff --git a/components/vc-tree/index.ts b/components/vc-tree/index.ts index 9ad36aada..2b656f5aa 100644 --- a/components/vc-tree/index.ts +++ b/components/vc-tree/index.ts @@ -1,4 +1,4 @@ -// base rc-tree 5.3.7 +// base rc-tree 5.4.4 import type { TreeProps, TreeNodeProps } from './props'; import Tree from './Tree'; import TreeNode from './TreeNode'; diff --git a/components/vc-tree/props.ts b/components/vc-tree/props.ts index 766f08704..5d554b3a7 100644 --- a/components/vc-tree/props.ts +++ b/components/vc-tree/props.ts @@ -121,6 +121,7 @@ export type DraggableFn = (node: DataNode) => boolean; export const treeProps = () => ({ prefixCls: String, focusable: { type: Boolean, default: undefined }, + activeKey: [Number, String] as PropType, tabindex: Number, children: PropTypes.any, treeData: { type: Array as PropType }, // Generate treeNode by children diff --git a/components/vc-tree/util.tsx b/components/vc-tree/util.tsx index 9fc2ffe64..a16572447 100644 --- a/components/vc-tree/util.tsx +++ b/components/vc-tree/util.tsx @@ -287,7 +287,11 @@ export function convertDataToTree( const list = Array.isArray(treeData) ? treeData : [treeData]; return list.map(({ children, ...props }): NodeElement => { const childrenNodes = convertDataToTree(children, processor); - return {childrenNodes}; + return ( + + {childrenNodes} + + ); }); }