diff --git a/components/tree/DirectoryTree.tsx b/components/tree/DirectoryTree.tsx index 28743f91f..6aa77f545 100644 --- a/components/tree/DirectoryTree.tsx +++ b/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); diff --git a/components/tree/utils/dictUtil.ts b/components/tree/utils/dictUtil.ts index 00b7285c6..73c9102e5 100644 --- a/components/tree/utils/dictUtil.ts +++ b/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);