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 @@ -