fix: tree fieldNames error #4726

Author: tangjinzhou

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;

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<FlattenNode[]>(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}

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<void>((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;

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) => {

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];
   }
 

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);

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', {