From 9bb99851ce67c25a4c97eea8a2059d261a9d841b Mon Sep 17 00:00:00 2001 From: Huangyilin19 Date: Fri, 27 Oct 2023 02:16:22 -0700 Subject: [PATCH 1/3] fix(tree): fix some bugs: lazy load nodes failed --- examples/sites/demos/pc/app/tree/node-key.vue | 2 +- .../src/common/deps/tree-model/node.ts | 17 ++++++++++------- packages/renderless/src/tree-node/index.ts | 4 ++-- packages/renderless/src/tree-node/vue.ts | 12 ++++++++++-- packages/renderless/src/tree/vue.ts | 11 ++--------- packages/theme/src/tree/index.less | 1 - packages/vue/src/tree/src/tree-node.vue | 6 +++--- 7 files changed, 28 insertions(+), 25 deletions(-) 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 @@ - From 77866043c8417a6fef16d5a6263f27a166fb942a Mon Sep 17 00:00:00 2001 From: Huangyilin19 Date: Mon, 30 Oct 2023 23:18:59 -0700 Subject: [PATCH 2/3] fix(tree): Solve the problem of ineffective default selection of single selection under lazy loading of tree components --- .../renderless/src/dialog-select/index.ts | 2 +- packages/renderless/src/tree/index.ts | 28 +++++++++++++++---- 2 files changed, 23 insertions(+), 7 deletions(-) diff --git a/packages/renderless/src/dialog-select/index.ts b/packages/renderless/src/dialog-select/index.ts index 3984ef8a1c..a971efbfe8 100644 --- a/packages/renderless/src/dialog-select/index.ts +++ b/packages/renderless/src/dialog-select/index.ts @@ -300,7 +300,7 @@ const getTreeRadio = (vm) => { const currentRadio = vm.$refs.multiTree.state.currentRadio const plainNode = find(plainNodes, (plainNode) => plainNode.node.id === currentRadio.value) - return [plainNode.node.data] + return plainNode?.node ? [plainNode.node.data] : [] } export const multiTreeCheck = diff --git a/packages/renderless/src/tree/index.ts b/packages/renderless/src/tree/index.ts index 68b91973bf..c9150134ef 100644 --- a/packages/renderless/src/tree/index.ts +++ b/packages/renderless/src/tree/index.ts @@ -268,6 +268,27 @@ export const dragEnd = dragState.showDropIndicator = false } +const afterLoadHandler = + ({ state, emit, props, api }) => + (params) => { + const { lazy, afterLoad, showRadio } = props + state.loaded = true + if (lazy) { + if (state.root) { + state.root.childNodes = [...state.root.childNodes] + } + + if (showRadio) { + api.setCurrentRadio() + } + } + emit('load-data', params) + + if (typeof afterLoad === 'function') { + afterLoad(params) + } + } + export const initTreeStore = ({ api, props, state, emit }) => () => { @@ -280,12 +301,7 @@ export const initTreeStore = lazy, props: props.props, load, - afterLoad(params) { - !state.loaded && (state.loaded = true) - lazy && state.root && (state.root.childNodes = [...state.root.childNodes]) - emit('load-data', params) - afterLoad && afterLoad(params) - }, + afterLoad: afterLoadHandler({ api, emit, props, state }), currentNodeKey, checkStrictly, checkDescendants, From a9fafd9f98cd5be2caf60e9f52b4ff91575bf72e Mon Sep 17 00:00:00 2001 From: Huangyilin19 Date: Mon, 30 Oct 2023 23:20:54 -0700 Subject: [PATCH 3/3] fix(tree): Fix the style of radio in the tree --- packages/theme/src/tree-menu/vars.less | 2 +- packages/theme/src/tree/index.less | 9 +-------- 2 files changed, 2 insertions(+), 9 deletions(-) diff --git a/packages/theme/src/tree-menu/vars.less b/packages/theme/src/tree-menu/vars.less index 0f7b0773a9..3a8d1969ce 100644 --- a/packages/theme/src/tree-menu/vars.less +++ b/packages/theme/src/tree-menu/vars.less @@ -38,5 +38,5 @@ // 节点序号字号 --tree-menu-node-number-font-size: var(--ti-common-font-size-base); // 活跃节点竖线与文本的间距 - --tree-menu-node-vertical-line-margin-right: var(--ti-common-size-5x); + --tree-menu-node-vertical-line-margin-right: var(--ti-common-size-4x); } diff --git a/packages/theme/src/tree/index.less b/packages/theme/src/tree/index.less index a233989a47..731ba95eb1 100644 --- a/packages/theme/src/tree/index.less +++ b/packages/theme/src/tree/index.less @@ -313,11 +313,6 @@ } } - &.is-root { - .@{tree-node-prefix-cls}__content-box { - padding-left: 0; - } - } &.is-leaf:not(.is-root) { .@{tree-node-prefix-cls}__content { @@ -354,7 +349,7 @@ } } - & label.@{css-prefix}checkbox { + & label.@{css-prefix}checkbox, .@{css-prefix}radio { margin: 0 calc(var(--ti-tree-node-label-margin-left) / 2); } @@ -478,8 +473,6 @@ } .@{radio-prefix-cls} { - margin-right: 0; - .@{radio-prefix-cls}__label { display: none; }