feat(components): [tree-v2] expose several helpful methods (#9156)

* feat(components): [tree-v2] expose several helpful methods

* fix(components): [tree] use `isObject` helper

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

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,
   }
 }

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 {

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
   }