fix: directory tree fieldsname error #4726

close #4726

Author: tangjinzhou

components/tree/DirectoryTree.tsx

@@ -1,5 +1,5 @@
 import type { ExtractPropTypes, PropType } from 'vue';
-import { nextTick, onUpdated, ref, watch, defineComponent } from 'vue';
+import { nextTick, onUpdated, ref, watch, defineComponent, computed } from 'vue';
 import debounce from 'lodash-es/debounce';
 import FolderOpenOutlined from '@ant-design/icons-vue/FolderOpenOutlined';
 import FolderOutlined from '@ant-design/icons-vue/FolderOutlined';
@@ -8,7 +8,11 @@ import classNames from '../_util/classNames';
 import type { AntdTreeNodeAttribute, TreeProps } from './Tree';
 import Tree, { treeProps } from './Tree';
 import initDefaultProps from '../_util/props-util/initDefaultProps';
-import { convertDataToEntities, convertTreeToData } from '../vc-tree/utils/treeUtil';
+import {
+  convertDataToEntities,
+  convertTreeToData,
+  fillFieldNames,
+} from '../vc-tree/utils/treeUtil';
 import type { DataNode, EventDataNode, Key } from '../vc-tree/interface';
 import { conductExpandParent } from '../vc-tree/util';
 import { calcRangeKeys, convertDirectoryKeysToNodes } from './utils/dictUtil';
@@ -168,7 +172,7 @@ export default defineComponent({
       emit('doubleclick', event, node);
       emit('dblclick', event, node);
     };
-
+    const fieldNames = computed(() => fillFieldNames(props.fieldNames));
     const onSelect = (
       keys: Key[],
       event: {
@@ -181,8 +185,7 @@ export default defineComponent({
     ) => {
       const { multiple } = props;
       const { node, nativeEvent } = event;
-      const { key = '' } = node;
-
+      const key = node[fieldNames.value.key];
       // const newState: DirectoryTreeState = {};
 
       // We need wrap this event since some value is not same
@@ -202,7 +205,11 @@ export default defineComponent({
         newSelectedKeys = keys;
         lastSelectedKey.value = key;
         cachedSelectedKeys.value = newSelectedKeys;
-        newEvent.selectedNodes = convertDirectoryKeysToNodes(treeData.value, newSelectedKeys);
+        newEvent.selectedNodes = convertDirectoryKeysToNodes(
+          treeData.value,
+          newSelectedKeys,
+          fieldNames.value,
+        );
       } else if (multiple && shiftPick) {
         // Shift click
         newSelectedKeys = Array.from(
@@ -213,16 +220,25 @@ export default defineComponent({
               expandedKeys: expandedKeys.value,
               startKey: key,
               endKey: lastSelectedKey.value,
+              fieldNames: fieldNames.value,
             }),
           ]),
         );
-        newEvent.selectedNodes = convertDirectoryKeysToNodes(treeData.value, newSelectedKeys);
+        newEvent.selectedNodes = convertDirectoryKeysToNodes(
+          treeData.value,
+          newSelectedKeys,
+          fieldNames.value,
+        );
       } else {
         // Single click
-        newSelectedKeys = [key];
+        newSelectedKeys = keys;
         lastSelectedKey.value = key;
         cachedSelectedKeys.value = newSelectedKeys;
-        newEvent.selectedNodes = convertDirectoryKeysToNodes(treeData.value, newSelectedKeys);
+        newEvent.selectedNodes = convertDirectoryKeysToNodes(
+          treeData.value,
+          newSelectedKeys,
+          fieldNames.value,
+        );
       }
 
       emit('update:selectedKeys', newSelectedKeys);

components/tree/utils/dictUtil.ts

@@ -1,4 +1,4 @@
-import type { DataNode, Key } from '../../vc-tree/interface';
+import type { DataNode, FieldNames, Key } from '../../vc-tree/interface';
 
 enum Record {
   None,
@@ -8,12 +8,14 @@ enum Record {
 
 function traverseNodesKey(
   treeData: DataNode[],
+  fieldNames: FieldNames,
   callback: (key: Key | number | null, node: DataNode) => boolean,
 ) {
   function processNode(dataNode: DataNode) {
-    const { key, children } = dataNode;
+    const key = dataNode[fieldNames.key];
+    const children = dataNode[fieldNames.children];
     if (callback(key, dataNode) !== false) {
-      traverseNodesKey(children || [], callback);
+      traverseNodesKey(children || [], fieldNames, callback);
     }
   }
 
@@ -26,11 +28,13 @@ export function calcRangeKeys({
   expandedKeys,
   startKey,
   endKey,
+  fieldNames,
 }: {
   treeData: DataNode[];
   expandedKeys: Key[];
   startKey?: Key;
   endKey?: Key;
+  fieldNames: FieldNames;
 }): Key[] {
   const keys: Key[] = [];
   let record: Record = Record.None;
@@ -46,7 +50,7 @@ export function calcRangeKeys({
     return key === startKey || key === endKey;
   }
 
-  traverseNodesKey(treeData, (key: Key) => {
+  traverseNodesKey(treeData, fieldNames, (key: Key) => {
     if (record === Record.End) {
       return false;
     }
@@ -76,10 +80,14 @@ export function calcRangeKeys({
   return keys;
 }
 
-export function convertDirectoryKeysToNodes(treeData: DataNode[], keys: Key[]) {
+export function convertDirectoryKeysToNodes(
+  treeData: DataNode[],
+  keys: Key[],
+  fieldNames: FieldNames,
+) {
   const restKeys: Key[] = [...keys];
   const nodes: DataNode[] = [];
-  traverseNodesKey(treeData, (key: Key, node: DataNode) => {
+  traverseNodesKey(treeData, fieldNames, (key: Key, node: DataNode) => {
     const index = restKeys.indexOf(key);
     if (index !== -1) {
       nodes.push(node);