feat(tree): add expose some state, close #4820

vueComponent · Oct 29, 2021 · fbd9a21 · fbd9a21
1 parent c16a5d4
commit fbd9a21
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 3 deletions.
diff --git a/components/tree/DirectoryTree.tsx b/components/tree/DirectoryTree.tsx
@@ -55,11 +55,12 @@ export default defineComponent({
     'dblclick',
     'click',
   ],
-  setup(props, { attrs, slots, emit }) {
+  setup(props, { attrs, slots, emit, expose }) {
     // convertTreeToData 兼容 a-tree-node 历史写法，未来a-tree-node移除后，删除相关代码，不要再render中调用 treeData，否则死循环
     const treeData = ref<DataNode[]>(
       props.treeData || convertTreeToData(filterEmpty(slots.default?.())),
     );
+
     watch(
       () => props.treeData,
       () => {
@@ -79,7 +80,14 @@ export default defineComponent({
     const cachedSelectedKeys = ref<Key[]>();
 
     const treeRef = ref();
-
+    expose({
+      selectedKeys: computed(() => treeRef.value?.selectedKeys),
+      checkedKeys: computed(() => treeRef.value?.checkedKeys),
+      halfCheckedKeys: computed(() => treeRef.value?.halfCheckedKeys),
+      loadedKeys: computed(() => treeRef.value?.loadedKeys),
+      loadingKeys: computed(() => treeRef.value?.loadingKeys),
+      expandedKeys: computed(() => treeRef.value?.expandedKeys),
+    });
     const getInitExpandedKeys = () => {
       const { keyEntities } = convertDataToEntities(treeData.value);
 

diff --git a/components/tree/Tree.tsx b/components/tree/Tree.tsx
@@ -1,5 +1,5 @@
 import type { PropType, ExtractPropTypes } from 'vue';
-import { watchEffect, ref, defineComponent } from 'vue';
+import { watchEffect, ref, defineComponent, computed } from 'vue';
 import classNames from '../_util/classNames';
 import VcTree, { TreeNode } from '../vc-tree';
 import PropTypes from '../_util/vue-types';
@@ -164,6 +164,12 @@ export default defineComponent({
       onNodeExpand: (...args) => {
         treeRef.value?.onNodeExpand(...args);
       },
+      selectedKeys: computed(() => treeRef.value?.selectedKeys),
+      checkedKeys: computed(() => treeRef.value?.checkedKeys),
+      halfCheckedKeys: computed(() => treeRef.value?.halfCheckedKeys),
+      loadedKeys: computed(() => treeRef.value?.loadedKeys),
+      loadingKeys: computed(() => treeRef.value?.loadingKeys),
+      expandedKeys: computed(() => treeRef.value?.expandedKeys),
     });
 
     watchEffect(() => {

diff --git a/components/vc-tree/Tree.tsx b/components/vc-tree/Tree.tsx
@@ -952,6 +952,12 @@ export default defineComponent({
       onNodeExpand,
       scrollTo,
       onKeydown,
+      selectedKeys: computed(() => selectedKeys.value),
+      checkedKeys: computed(() => checkedKeys.value),
+      halfCheckedKeys: computed(() => halfCheckedKeys.value),
+      loadedKeys: computed(() => loadedKeys.value),
+      loadingKeys: computed(() => loadingKeys.value),
+      expandedKeys: computed(() => expandedKeys.value),
     });
     onUnmounted(() => {
       window.removeEventListener('dragend', onWindowDragEnd);