fix(组件): 树组件&穿梭框组件展开折叠逻辑调整

This commit is contained in:
baiqi 2024-07-24 11:04:58 +08:00 committed by 刘瑞斌
parent 25a8a43b03
commit 52f9301240
2 changed files with 34 additions and 14 deletions

View File

@ -33,7 +33,6 @@
:data="getTreeData()"
:keyword="sourceKeyword"
block-node
default-expand-all
:selectable="false"
:virtual-list-props="{
height: '100%',
@ -159,7 +158,7 @@
key: itemKey,
label: itemTitle,
children: itemChildren ? travel(itemChildren) : [],
expanded: true,
expanded: item.expanded,
});
}
});

View File

@ -98,7 +98,7 @@
import type { ActionsItem } from '@/components/pure/ms-table-more-action/types';
import useContainerShadow from '@/hooks/useContainerShadow';
import { mapTree, traverseTree } from '@/utils';
import { findNodeByKey, mapTree, traverseTree } from '@/utils';
import type { MsTreeExpandedData, MsTreeFieldNames, MsTreeNodeData, MsTreeSelectedData } from './types';
import { VirtualListProps } from '@arco-design/web-vue/es/_components/virtual-list-v2/interface';
@ -177,7 +177,7 @@
(e: 'moreActionSelect', item: ActionsItem, node: MsTreeNodeData): void;
(e: 'moreActionsClose'): void;
(e: 'check', val: Array<string | number>, node: MsTreeNodeData): void;
(e: 'expand', node: MsTreeExpandedData): void;
(e: 'expand', node: MsTreeExpandedData, _expandKeys: Array<string | number>): void;
}>();
const data = defineModel<MsTreeNodeData[]>('data', {
@ -195,6 +195,7 @@
const focusNodeKey = defineModel<string | number>('focusNodeKey', {
default: '',
});
const expandKeys = ref<Set<string | number>>(new Set([]));
const treeContainerRef: Ref = ref(null);
const treeRef = ref<TreeInstance>();
@ -262,33 +263,46 @@
}
}, props.searchDebounce);
onBeforeMount(() => {
if (props.useMapData) {
filterTreeData.value = mapTree(data.value, (node) => {
node.expanded = props.defaultExpandAll;
return node;
});
} else {
traverseTree(data.value, (node) => {
node.expanded = props.defaultExpandAll;
});
filterTreeData.value = data.value;
}
nextTick(() => {
if (props.defaultExpandAll && treeRef.value) {
treeRef.value.expandAll(true);
}
});
});
watch(
() => data.value,
debounce((val) => {
if (!props.keyword) {
if (props.useMapData) {
filterTreeData.value = mapTree(val, (node) => {
node.expanded = props.defaultExpandAll;
node.expanded = expandKeys.value.has(node[props.fieldNames.key]);
return node;
});
} else {
traverseTree(val, (node) => {
node.expanded = props.defaultExpandAll;
node.expanded = expandKeys.value.has(node[props.fieldNames.key]);
});
filterTreeData.value = val;
}
nextTick(() => {
if (props.defaultExpandAll && treeRef.value) {
treeRef.value.expandAll(true);
}
});
} else {
updateDebouncedSearch();
}
}, 0),
{
deep: true,
immediate: true,
}
);
@ -447,11 +461,18 @@
function handleExpand(node: MsTreeNodeData) {
node.expanded = !node.expanded;
if (props.useMapData) {
const realNode = findNodeByKey<MsTreeNodeData>(data.value, node[props.fieldNames.key]);
if (realNode) {
realNode.expanded = node.expanded;
}
}
treeRef.value?.expandNode(node[props.fieldNames.key], node.expanded);
}
function expand(expandKeys: Array<string | number>, node: MsTreeExpandedData) {
emit('expand', node);
function expand(_expandKeys: Array<string | number>, node: MsTreeExpandedData) {
expandKeys.value = new Set(_expandKeys);
emit('expand', node, _expandKeys);
}
function checkAll(val: boolean) {