diff --git a/examples/sites/demos/pc/app/tree/node-key.vue b/examples/sites/demos/pc/app/tree/node-key.vue
index 955fe70c98..cb808b17d7 100644
--- a/examples/sites/demos/pc/app/tree/node-key.vue
+++ b/examples/sites/demos/pc/app/tree/node-key.vue
@@ -44,7 +44,7 @@
-
+
diff --git a/packages/renderless/src/common/deps/tree-model/node.ts b/packages/renderless/src/common/deps/tree-model/node.ts
index d803ce9828..042f92daed 100644
--- a/packages/renderless/src/common/deps/tree-model/node.ts
+++ b/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() {
diff --git a/packages/renderless/src/tree-node/index.ts b/packages/renderless/src/tree-node/index.ts
index 47e34c0ed2..1e810afcd2 100644
--- a/packages/renderless/src/tree-node/index.ts
+++ b/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
})
}
diff --git a/packages/renderless/src/tree-node/vue.ts b/packages/renderless/src/tree-node/vue.ts
index 251072acdc..91488a04d2 100644
--- a/packages/renderless/src/tree-node/vue.ts
+++ b/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', () => {
diff --git a/packages/renderless/src/tree/vue.ts b/packages/renderless/src/tree/vue.ts
index d9ab221749..832a1a04bc 100644
--- a/packages/renderless/src/tree/vue.ts
+++ b/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 = (
diff --git a/packages/theme/src/tree/index.less b/packages/theme/src/tree/index.less
index c738a9c75b..a233989a47 100644
--- a/packages/theme/src/tree/index.less
+++ b/packages/theme/src/tree/index.less
@@ -201,7 +201,6 @@
.@{tree-node-prefix-cls} {
white-space: nowrap;
outline: 0;
- overflow: hidden;
// 连接线
&.show-line {
diff --git a/packages/vue/src/tree/src/tree-node.vue b/packages/vue/src/tree/src/tree-node.vue
index 6c25702a09..34e406a73a 100644
--- a/packages/vue/src/tree/src/tree-node.vue
+++ b/packages/vue/src/tree/src/tree-node.vue
@@ -219,8 +219,8 @@
-