diff --git a/docs/en-US/component/tree-v2.md b/docs/en-US/component/tree-v2.md index 1f4b38e3a7..3dfc520a5b 100644 --- a/docs/en-US/component/tree-v2.md +++ b/docs/en-US/component/tree-v2.md @@ -110,6 +110,9 @@ tree-v2/filter | getCurrentKey | return the highlight node's key (undefined if no node is highlighted) | - | | getCurrentNode | return the highlight node's data (undefined if no node is highlighted) | - | | setCurrentKey | set highlighted node by key | `(key: TreeKey)` | +| getNode | get node by key or data | `(data: TreeKey \| TreeNodeData)` | +| expandNode | expand specified node | `(node: TreeNode)` | +| collapseNode | collapse specified node | `(node: TreeNode)` | | setData | When the data is very large, using reactive data will cause the poor performance, so we provide a way to avoid this situation | `(data: TreeData)` | ## TreeV2 Events diff --git a/packages/components/tree-v2/src/composables/useTree.ts b/packages/components/tree-v2/src/composables/useTree.ts index c3fd372592..37ff7fb5ee 100644 --- a/packages/components/tree-v2/src/composables/useTree.ts +++ b/packages/components/tree-v2/src/composables/useTree.ts @@ -1,5 +1,6 @@ // @ts-nocheck import { computed, nextTick, ref, shallowRef, watch } from 'vue' +import { isObject } from '@element-plus/utils' import { CURRENT_CHANGE, NODE_CLICK, @@ -184,9 +185,9 @@ export function useTree(props: TreeProps, emit) { function toggleExpand(node: TreeNode) { const expandedKeys = expandedKeySet.value if (expandedKeys.has(node.key)) { - collapse(node) + collapseNode(node) } else { - expand(node) + expandNode(node) } } @@ -212,9 +213,9 @@ export function useTree(props: TreeProps, emit) { toggleCheckbox(node, checked) } - function expand(node: TreeNode) { + function expandNode(node: TreeNode) { const keySet = expandedKeySet.value - if (tree?.value && props.accordion) { + if (tree.value && props.accordion) { // whether only one node among the same level can be expanded at one time const { treeNodeMap } = tree.value keySet.forEach((key) => { @@ -228,7 +229,7 @@ export function useTree(props: TreeProps, emit) { emit(NODE_EXPAND, node.data, node) } - function collapse(node: TreeNode) { + function collapseNode(node: TreeNode) { expandedKeySet.value.delete(node.key) emit(NODE_COLLAPSE, node.data, node) } @@ -248,7 +249,7 @@ export function useTree(props: TreeProps, emit) { function getCurrentNode(): TreeNodeData | undefined { if (!currentKey.value) return undefined - return tree?.value?.treeNodeMap.get(currentKey.value)?.data + return tree.value?.treeNodeMap.get(currentKey.value)?.data } function getCurrentKey(): TreeKey | undefined { @@ -263,6 +264,11 @@ export function useTree(props: TreeProps, emit) { nextTick(() => (tree.value = createTree(data))) } + function getNode(data: TreeKey | TreeNodeData) { + const key = isObject(data) ? getKey(data) : data + return tree.value?.treeNodeMap.get(key) + } + return { tree, flattenTree, @@ -291,5 +297,8 @@ export function useTree(props: TreeProps, emit) { setCheckedKeys, filter, setData, + getNode, + expandNode, + collapseNode, } } diff --git a/packages/components/tree-v2/src/tree.vue b/packages/components/tree-v2/src/tree.vue index 78ddabe213..602a662172 100644 --- a/packages/components/tree-v2/src/tree.vue +++ b/packages/components/tree-v2/src/tree.vue @@ -90,6 +90,9 @@ export default defineComponent({ setCheckedKeys, filter, setData, + getNode, + expandNode, + collapseNode, } = useTree(props, ctx.emit) ctx.expose({ @@ -104,6 +107,9 @@ export default defineComponent({ setCheckedKeys, filter, setData, + getNode, + expandNode, + collapseNode, }) return { diff --git a/packages/components/tree/src/model/tree-store.ts b/packages/components/tree/src/model/tree-store.ts index 9cd74833dd..24b69bd29e 100644 --- a/packages/components/tree/src/model/tree-store.ts +++ b/packages/components/tree/src/model/tree-store.ts @@ -1,5 +1,5 @@ // @ts-nocheck -import { hasOwn } from '@element-plus/utils' +import { hasOwn, isObject } from '@element-plus/utils' import Node from './node' import { getNodeKey } from './util' @@ -109,7 +109,7 @@ export default class TreeStore { getNode(data: TreeKey | TreeNodeData): Node { if (data instanceof Node) return data - const key = typeof data !== 'object' ? data : getNodeKey(this.key, data) + const key = isObject(data) ? getNodeKey(this.key, data) : data return this.nodesMap[key] || null }