From ac70da19f564acf9c9c3a15440017aac465a5dde Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Thu, 7 Oct 2021 15:22:34 +0800 Subject: [PATCH] fix: tree fieldNames error #4726 --- components/tree/utils/dictUtil.ts | 8 ++++++-- components/vc-tree/NodeList.tsx | 18 ++++++------------ components/vc-tree/Tree.tsx | 16 +++++++--------- components/vc-tree/TreeNode.tsx | 3 ++- components/vc-tree/util.tsx | 4 ++-- components/vc-tree/utils/diffUtil.ts | 6 +++--- components/vc-tree/utils/treeUtil.ts | 3 ++- 7 files changed, 28 insertions(+), 30 deletions(-) diff --git a/components/tree/utils/dictUtil.ts b/components/tree/utils/dictUtil.ts index 73c9102e5..82eee747b 100644 --- a/components/tree/utils/dictUtil.ts +++ b/components/tree/utils/dictUtil.ts @@ -28,13 +28,17 @@ export function calcRangeKeys({ expandedKeys, startKey, endKey, - fieldNames, + fieldNames = { + title: 'title', + key: 'key', + children: 'children', + }, }: { treeData: DataNode[]; expandedKeys: Key[]; startKey?: Key; endKey?: Key; - fieldNames: FieldNames; + fieldNames?: FieldNames; }): Key[] { const keys: Key[] = []; let record: Record = Record.None; diff --git a/components/vc-tree/NodeList.tsx b/components/vc-tree/NodeList.tsx index e17dbc3b5..b0e75797d 100644 --- a/components/vc-tree/NodeList.tsx +++ b/components/vc-tree/NodeList.tsx @@ -71,20 +71,17 @@ export function getMinimumRangeTransitionRange( } function itemKey(item: FlattenNode) { - const { - data: { key }, - pos, - } = item; + const { key, pos } = item; return getKey(key, pos); } function getAccessibilityPath(item: FlattenNode): string { - let path = String(item.data.key); + let path = String(item.key); let current = item; while (current.parent) { current = current.parent; - path = `${current.data.key} > ${path}`; + path = `${current.key} > ${path}`; } return path; @@ -104,7 +101,6 @@ export default defineComponent({ }, getIndentWidth: () => indentMeasurerRef.value.offsetWidth, }); - // ============================== Motion ============================== const transitionData = ref(props.data); const transitionRange = ref([]); @@ -121,12 +117,10 @@ export default defineComponent({ [() => [...props.expandedKeys], () => props.data], ([expandedKeys, data], [prevExpandedKeys, prevData]) => { const diffExpanded = findExpandedKeys(prevExpandedKeys, expandedKeys); - if (diffExpanded.key !== null) { const { virtual, height, itemHeight } = props; if (diffExpanded.add) { - const keyIndex = prevData.findIndex(({ data: { key } }) => key === diffExpanded.key); - + const keyIndex = prevData.findIndex(({ key }) => key === diffExpanded.key); const rangeNodes = getMinimumRangeTransitionRange( getExpandRange(prevData, data, diffExpanded.key), virtual, @@ -141,7 +135,7 @@ export default defineComponent({ transitionRange.value = rangeNodes; motionType.value = 'show'; } else { - const keyIndex = data.findIndex(({ data: { key } }) => key === diffExpanded.key); + const keyIndex = data.findIndex(({ key }) => key === diffExpanded.key); const rangeNodes = getMinimumRangeTransitionRange( getExpandRange(data, prevData, diffExpanded.key), @@ -295,7 +289,7 @@ export default defineComponent({ {...restProps} {...treeNodeProps} title={title} - active={!!activeItem && key === activeItem.data.key} + active={!!activeItem && key === activeItem.key} pos={pos} data={treeNode.data} isStart={isStart} diff --git a/components/vc-tree/Tree.tsx b/components/vc-tree/Tree.tsx index d8a222aad..56845490e 100644 --- a/components/vc-tree/Tree.tsx +++ b/components/vc-tree/Tree.tsx @@ -160,7 +160,6 @@ export default defineComponent({ const flattenNodes = computed(() => { return flattenTreeData(treeData.value, expandedKeys.value, fieldNames.value); }); - // ================ selectedKeys ================= watchEffect(() => { if (props.selectable) { @@ -499,10 +498,9 @@ export default defineComponent({ cleanDragState(); if (dropTargetKey === null) return; - const abstractDropNodeProps = { ...getTreeNodeProps(dropTargetKey, treeNodeRequiredProps.value), - active: activeItem.value?.data.key === dropTargetKey, + active: activeItem.value?.key === dropTargetKey, data: keyEntities.value[dropTargetKey].node, }; const dropToChild = dragChildrenKeys.indexOf(dropTargetKey) !== -1; @@ -663,7 +661,7 @@ export default defineComponent({ new Promise((resolve, reject) => { // We need to get the latest state of loading/loaded keys const { loadData, onLoad } = props; - const { key } = treeNode; + const key = treeNode[fieldNames.value.key]; if ( !loadData || @@ -836,11 +834,11 @@ export default defineComponent({ return null; } - return flattenNodes.value.find(({ data: { key } }) => key === activeKey.value) || null; + return flattenNodes.value.find(({ key }) => key === activeKey.value) || null; }); const offsetActiveKey = (offset: number) => { - let index = flattenNodes.value.findIndex(({ data: { key } }) => key === activeKey.value); + let index = flattenNodes.value.findIndex(({ key }) => key === activeKey.value); // Align with index if (index === -1 && offset < 0) { @@ -851,7 +849,7 @@ export default defineComponent({ const item = flattenNodes.value[index]; if (item) { - const { key } = item.data; + const { key } = item; onActiveChange(key); } else { onActiveChange(null); @@ -894,7 +892,7 @@ export default defineComponent({ if (expandable && expandedKeys.value.includes(activeKey.value)) { onNodeExpand({} as MouseEvent, eventNode); } else if (item.parent) { - onActiveChange(item.parent.data.key); + onActiveChange(item.parent.key); } event.preventDefault(); break; @@ -904,7 +902,7 @@ export default defineComponent({ if (expandable && !expandedKeys.value.includes(activeKey.value)) { onNodeExpand({} as MouseEvent, eventNode); } else if (item.children && item.children.length) { - onActiveChange(item.children[0].data.key); + onActiveChange(item.children[0].key); } event.preventDefault(); break; diff --git a/components/vc-tree/TreeNode.tsx b/components/vc-tree/TreeNode.tsx index 85a26d095..3e07512c7 100644 --- a/components/vc-tree/TreeNode.tsx +++ b/components/vc-tree/TreeNode.tsx @@ -117,6 +117,7 @@ export default defineComponent({ isLeaf: isLeaf.value, }; }); + const instance = getCurrentInstance(); const eventData = computed(() => { return convertNodePropsToEventData(props); }); @@ -125,7 +126,7 @@ export default defineComponent({ eventKey: computed(() => props.eventKey), selectHandle, pos: computed(() => props.pos), - key: getCurrentInstance().vnode.key as Key, + key: instance.vnode.key as Key, }); expose(dragNodeEvent); const onSelectorDoubleClick = (e: MouseEvent) => { diff --git a/components/vc-tree/util.tsx b/components/vc-tree/util.tsx index c98b87cfb..0512e2d4e 100644 --- a/components/vc-tree/util.tsx +++ b/components/vc-tree/util.tsx @@ -113,10 +113,10 @@ export function calcDropPosition( if (clientY < top + height / 2) { // first half, set abstract drop node to previous node const nodeIndex = flattenedNodes.findIndex( - flattenedNode => flattenedNode.data.key === abstractDropNodeEntity.key, + flattenedNode => flattenedNode.key === abstractDropNodeEntity.key, ); const prevNodeIndex = nodeIndex <= 0 ? 0 : nodeIndex - 1; - const prevNodeKey = flattenedNodes[prevNodeIndex].data.key; + const prevNodeKey = flattenedNodes[prevNodeIndex].key; abstractDropNodeEntity = keyEntities[prevNodeKey]; } diff --git a/components/vc-tree/utils/diffUtil.ts b/components/vc-tree/utils/diffUtil.ts index 1c4f5e891..a00d36586 100644 --- a/components/vc-tree/utils/diffUtil.ts +++ b/components/vc-tree/utils/diffUtil.ts @@ -33,12 +33,12 @@ export function findExpandedKeys(prev: Key[] = [], next: Key[] = []) { } export function getExpandRange(shorter: FlattenNode[], longer: FlattenNode[], key: Key) { - const shorterStartIndex = shorter.findIndex(({ data }) => data.key === key); + const shorterStartIndex = shorter.findIndex(item => item.key === key); const shorterEndNode = shorter[shorterStartIndex + 1]; - const longerStartIndex = longer.findIndex(({ data }) => data.key === key); + const longerStartIndex = longer.findIndex(item => item.key === key); if (shorterEndNode) { - const longerEndIndex = longer.findIndex(({ data }) => data.key === shorterEndNode.data.key); + const longerEndIndex = longer.findIndex(item => item.key === shorterEndNode.key); return longer.slice(longerStartIndex + 1, longerEndIndex); } return longer.slice(longerStartIndex + 1); diff --git a/components/vc-tree/utils/treeUtil.ts b/components/vc-tree/utils/treeUtil.ts index 1617ae384..c1379fa4e 100644 --- a/components/vc-tree/utils/treeUtil.ts +++ b/components/vc-tree/utils/treeUtil.ts @@ -401,6 +401,7 @@ export function convertNodePropsToEventData(props: TreeNodeProps): EventDataNode dragOverGapBottom, pos, active, + eventKey, } = props; const eventData = { dataRef: data, @@ -416,7 +417,7 @@ export function convertNodePropsToEventData(props: TreeNodeProps): EventDataNode dragOverGapBottom, pos, active, - eventKey: data.key, + eventKey, }; if (!('props' in eventData)) { Object.defineProperty(eventData, 'props', {