fix(Tree): 解决节点初始化选中时，点击其他节点不会取消选中的问题

Author: xingyan95

packages/devui-vue/devui/tree/src/composables/use-init-select-collection.ts

@@ -0,0 +1,23 @@
+import { IInnerTreeNode, IUseInitSelectCollection } from './use-tree-types';
+
+let selectedNodes: IInnerTreeNode[] = [];
+
+export default function useInitSelectCollection(): IUseInitSelectCollection {
+ const setInitSelectedNode = (node: IInnerTreeNode): void => {
+ selectedNodes.push(node);
+ };
+
+ const getInitSelectedNodes = (): IInnerTreeNode[] => {
+ return selectedNodes;
+ };
+
+ const clearInitSelectedNodes = (): void => {
+ selectedNodes = [];
+ };
+
+ return {
+ setInitSelectedNode,
+ getInitSelectedNodes,
+ clearInitSelectedNodes,
+ };
+}

packages/devui-vue/devui/tree/src/composables/use-select.ts

@@ -1,17 +1,29 @@
 import { Ref, SetupContext } from 'vue';
+import useInitSelectCollection from './use-init-select-collection';
 import { IInnerTreeNode, IUseCore, IUseSelect } from './use-tree-types';
 
 export default function () {
  return function useSelect(data: Ref<IInnerTreeNode[]>, core: IUseCore, context: SetupContext): IUseSelect {
  const { setNodeValue } = core;
+ const { getInitSelectedNodes, clearInitSelectedNodes } = useInitSelectCollection();
 
  let prevActiveNode: IInnerTreeNode;
 
  const selectNode = (node: IInnerTreeNode): void => {
- if (node.disableSelect) { return; }
+ if (node.disableSelect) {
+ return;
+ }
+
+ const initSelectedNodes = getInitSelectedNodes();
+ if (initSelectedNodes.length) {
+ initSelectedNodes.forEach((item) => {
+ setNodeValue(item, 'selected', false);
+ });
+ clearInitSelectedNodes();
+ }
 
  if (prevActiveNode) {
- const prevActiveNodeIndex = data.value.findIndex(item => item.id === prevActiveNode.id);
+ const prevActiveNodeIndex = data.value.findIndex((item) => item.id === prevActiveNode.id);
  setNodeValue(data.value[prevActiveNodeIndex], 'selected', false);
  }
 
@@ -34,7 +46,7 @@ export default function () {
  };
 
  const getSelectedNode = (): IInnerTreeNode => {
- return data.value.find(node => node.selected);
+ return data.value.find((node) => node.selected);
  };
 
  return {

packages/devui-vue/devui/tree/src/composables/use-tree-types.ts

@@ -96,6 +96,12 @@ export interface IUseLazyLoad {
  lazyLoadNodes: (node: IInnerTreeNode) => void;
 }
 
+export interface IUseInitSelectCollection {
+ setInitSelectedNode: (node: IInnerTreeNode) => void;
+ getInitSelectedNodes: () => IInnerTreeNode[];
+ clearInitSelectedNodes: () => void;
+}
+
 export interface SearchFilterOption {
  isFilter: boolean; // 是否是过滤节点
  matchKey?: string; // node节点中匹配搜索过滤的字段名
@@ -110,14 +116,14 @@ export interface IUseSearchFilter {
 export type IUseTree = {
  treeData: Ref<IInnerTreeNode[]>;
 } & IUseCore &
-IUseToggle &
-IUseSelect &
-IUseCheck &
-IUseDisable &
-IUseOperate &
-IUseMergeNodes &
-IUseLazyLoad &
-IUseSearchFilter;
+ IUseToggle &
+ IUseSelect &
+ IUseCheck &
+ IUseDisable &
+ IUseOperate &
+ IUseMergeNodes &
+ IUseLazyLoad &
+ IUseSearchFilter;
 
 export type ICheckStrategy = 'upward' | 'downward' | 'both' | 'none';
 

packages/devui-vue/devui/tree/src/composables/utils.ts

@@ -1,4 +1,5 @@
 import { randomId } from '../../../shared/utils';
+import useInitSelectCollection from './use-init-select-collection';
 import { IInnerTreeNode, ITreeNode } from './use-tree-types';
 
 export function flatToNested(flatTree: IInnerTreeNode[]): ITreeNode[] {
@@ -44,8 +45,9 @@ export function omit<T>(obj: T, ...keys: Array<keyof T>): { [key: string]: unkno
  * - 'isLeaf'：是否是叶子节点，用于决定是否渲染展开/收起按钮
  * - 'idType'：(没有传入 id 的节点会生成一个随机的 id，idType 用来标识 id 是否是随机生成的)
  * - 'parentChildNodeCount'：父级子节点数量
- * - 'curentIndex'：当前节点在父节点的索引
+ * - 'currentIndex'：当前节点在父节点的索引
  */
+const { setInitSelectedNode } = useInitSelectCollection();
 export function generateInnerTree(tree: ITreeNode[], key = 'children', level = 0, path: ITreeNode[] = []): IInnerTreeNode[] {
  level++;
 
@@ -56,6 +58,10 @@ export function generateInnerTree(tree: ITreeNode[], key = 'children', level = 0
  newItem.idType = 'random';
  }
 
+ if (newItem.selected) {
+ setInitSelectedNode(newItem);
+ }
+
  newItem.level = level;
  newItem.parentChildNodeCount = tree.length;
  newItem.currentIndex = currentIndex;