fix(tree): fix some bugs: lazy load nodes failed

examples/sites/demos/pc/app/tree/node-key.vue

@@ -44,7 +44,7 @@
       </tiny-col>
     </tiny-row>
 
-    <tiny-tree :data="data" ref="tree" node-key="id"></tiny-tree>
+    <tiny-tree :data="data" ref="tree" default-expand-all node-key="id"></tiny-tree>
   </div>
 </template>
 

packages/renderless/src/common/deps/tree-model/node.ts

@@ -16,6 +16,7 @@ import { indexOf } from '../../array'
 import { hasOwn, typeOf } from '../../type'
 
 const defaultChildrenKey = 'children'
+const defaultIsLeafKey = 'isLeaf'
 
 const getPropertyFromData = (node, prop) => {
   const props = node.store.props
@@ -101,7 +102,7 @@ export default class Node {
     const props = store.props
 
     if (props && typeof props.isLeaf !== 'undefined') {
-      const isLeaf = getPropertyFromData(this, 'isLeaf')
+      const isLeaf = getPropertyFromData(this, defaultIsLeafKey)
 
       if (typeof isLeaf === 'boolean') {
         this.isLeafByUser = isLeaf
@@ -140,6 +141,7 @@ export default class Node {
 
       if (store.defaultExpandAll) {
         this.expanded = true
+        this.updateMethod(this, 'expanded')
       }
     } else if (level > 0 && store.lazy && store.defaultExpandAll) {
       this.expand()
@@ -156,21 +158,19 @@ export default class Node {
     this.text = null
     this.data = null
     this.parent = null
+    this.updateMethod = () => {}
 
     Object.keys(options).forEach((key) => {
       if (hasOwn.call(options, key)) {
         this[key] = options[key]
       }
     })
-    this.isLeaf = !!(this.data && this.data.isLeaf)
+    const isLeafKey = this.store?.props?.isLeaf || defaultIsLeafKey
+    this.isLeaf = !!(this.data && this.data[isLeafKey])
     this.loaded = false
     this.loading = false
     this.childNodes = []
-    this.level = 0
-
-    if (this.parent) {
-      this.level = this.parent.level + 1
-    }
+    this.level = this.parent ? this.parent.level + 1 : 0
   }
 
   expandByDefaultKeys() {
@@ -376,11 +376,13 @@ export default class Node {
 
         while (parentNode.level > 0) {
           parentNode.expanded = true
+          parentNode.updateMethod(parentNode, 'expanded')
           parentNode = parentNode.parent
         }
       }
 
       this.expanded = true
+      this.updateMethod(this, 'expanded')
       callback && callback()
     }
 
@@ -408,6 +410,7 @@ export default class Node {
 
   collapse() {
     this.expanded = false
+    this.updateMethod(this, 'expanded')
   }
 
   shouldLoadData() {

packages/renderless/src/tree-node/index.ts

@@ -301,9 +301,9 @@ export const onSiblingToggleExpand =
 
 export const watchExpandedChange =
   ({ state, props }) =>
-  (value) => {
+  () => {
     state.parentEmitter.emit('sibling-node-toggle-expand', {
-      isExpand: value,
+      isExpand: props.node.expanded,
       sibling: props.node
     })
   }

packages/renderless/src/tree-node/vue.ts

@@ -10,6 +10,7 @@
  *
  */
 
+import debounce from '../common/deps/debounce'
 import {
   created,
   handleDragEnd,
@@ -89,7 +90,7 @@ const initApi = ({ api, state, dispatch, broadcast, vm, props, parent, treeRoot,
     state,
     dispatch,
     broadcast,
-    watchExpanded: watchExpanded({ state }),
+    watchExpanded: debounce(20, watchExpanded({ state })),
     created: created({ props, state }),
     getNodeKey: getNodeKey(state),
     closeMenu: closeMenu(state),
@@ -131,7 +132,8 @@ const initWatcher = ({ watch, state, api, props }) => {
 export const renderless = (
   props,
   { reactive, watch, inject, provide, computed },
-  { parent: parentVm, vm, nextTick, emit, broadcast, dispatch, emitter, designConfig }
+  { parent: parentVm, vm, nextTick, emit, broadcast, dispatch, emitter, designConfig },
+  { isVue2 }
 ) => {
   const api = {}
   const parent = inject('parentTree') || parentVm
@@ -153,6 +155,12 @@ export const renderless = (
         props.node.updateChildren()
       }
     )
+
+    if (!isVue2) {
+      props.node.updateMethod = (node, field) => {
+        field === 'expanded' && api.watchExpanded(node[field])
+      }
+    }
   })
 
   state.parentEmitter.on('closeMenu', () => {

packages/renderless/src/tree/vue.ts

@@ -139,7 +139,7 @@ const initState = ({ reactive, emitter, props, computed, api }) => {
     treeItems: null,
     currentNode: null,
     checkboxItems: [],
-    isEmpty: false,
+    isEmpty: computed(() => api.computedIsEmpty(props, state)),
     emitter: emitter(),
     expandIcon: props.expandIcon,
     shrinkIcon: props.shrinkIcon,
@@ -255,14 +255,7 @@ const initWatcher = ({ watch, props, api, state }) => {
     { immediate: true }
   )
 
-  watch(
-    () => state.root,
-    () => {
-      state.isEmpty = api.computedIsEmpty(props, state)
-      api.initPlainNodeStore()
-    },
-    { deep: true }
-  )
+  watch(() => state.root, api.initPlainNodeStore, { deep: true })
 }
 
 export const renderless = (

packages/theme/src/tree/index.less

@@ -201,7 +201,6 @@
 .@{tree-node-prefix-cls} {
   white-space: nowrap;
   outline: 0;
-  overflow: hidden;
 
   // 连接线
   &.show-line {

packages/vue/src/tree/src/tree-node.vue

@@ -219,8 +219,8 @@
   </div>
 </template>
 
-<script lang="tsx">
-import { setup, directive, h } from '@opentiny/vue-common'
+<script lang="ts">
+import { setup, directive, h, isVue2 } from '@opentiny/vue-common'
 import { renderless, api } from '@opentiny/vue-renderless/tree-node/vue'
 import CollapseTransition from '@opentiny/vue-collapse-transition'
 import {
@@ -348,7 +348,7 @@ export default {
     }
   },
   setup(props, context) {
-    return setup({ props, context, renderless, api, mono: true })
+    return setup({ props, context, renderless, api, mono: true, extendOptions: { isVue2 } })
   }
 }
 </script>