fix(Tree): 优化顶层 node 的 no expand 逻辑 (#843)

WeBankFinTech · Jun 14, 2024 · b7203f8 · b7203f8
1 parent 1c11954
commit b7203f8
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 31 deletions.
diff --git a/components/tree/props.ts b/components/tree/props.ts
@@ -123,7 +123,6 @@ export interface TreeInst {
     expandNode: (value: TreeNodeKey, event: Event) => void;
     checkNode: (value: TreeNodeKey, event: Event) => void;
     hasSelected: (value: TreeNodeKey) => boolean;
-    hasNoExpandableNode: ComputedRef<boolean>;
     nodeList: Map<TreeNodeKey, InnerTreeOption>;
     handleDragstart: (value: TreeNodeKey, event: DragEvent) => void;
     handleDragenter: (value: TreeNodeKey, event: DragEvent) => void;

diff --git a/components/tree/tree.tsx b/components/tree/tree.tsx
@@ -127,7 +127,6 @@ export default defineComponent({
             expandNode,
             checkNode,
             hasSelected,
-            hasNoExpandableNode,
             nodeList,
             handleDragstart,
             handleDragenter,
@@ -141,6 +140,7 @@ export default defineComponent({
 
         const renderNode = (value: TreeNodeKey) => {
             const node = nodeList.get(value);
+
             const itemSlots: {
                 [key: string]: () => VNodeChild | string;
             } = {};
@@ -156,6 +156,10 @@ export default defineComponent({
             if (isString(node.suffix)) {
                 itemSlots.suffix = () => node.suffix as string;
             }
+
+            // 当前 node 在最顶层，且顶层所有 node 都没有 children
+            const noExpand = node.level === 1 && hasNoExpandableNode.value;
+
             return (
                 <TreeNode
                     key={node.uid}
@@ -170,7 +174,8 @@ export default defineComponent({
                     draggable={
                         props.draggable && !props.inline && !node.disabled
                     }
-                ></TreeNode>
+                    noExpand={noExpand}
+                />
             );
         };
 

diff --git a/components/tree/treeNode.tsx b/components/tree/treeNode.tsx
@@ -49,6 +49,10 @@ const treeNodeProps = {
         type: Boolean,
         default: false,
     },
+    noExpand: {
+        type: Boolean,
+        default: false,
+    },
 } as const satisfies ComponentObjectPropsOptions;
 
 export type TreeNodeProps = Partial<ExtractPropTypes<typeof treeNodeProps>>;
@@ -174,28 +178,25 @@ export default defineComponent({
             return null;
         };
         const renderSwitcher = () => {
-            const switcherClassList = [
-                `${prefixCls}-switcher`,
-                root.hasNoExpandableNode.value && 'no-expand',
-            ].filter(Boolean);
-
             if (props.isLeaf) {
-                return <span class={switcherClassList} />;
+                const leafClass = [`${prefixCls}-switcher`];
+                if (props.noExpand) {
+                    leafClass.push('no-expand');
+                }
+                return <span class={leafClass} />;
             }
+
+            const icon = isLoading.value
+                ? <LoadingOutlined />
+                : (
+                    <CaretDownOutlined
+                        class={[`${prefixCls}-switcher-icon`, isExpanded.value ? 'is-expanded' : '']}
+                    />
+                    );
+
             return (
-                <span class={switcherClassList} onClick={handleClickSwitcher}>
-                    {isLoading.value
-                        ? (
-                            <LoadingOutlined />
-                            )
-                        : (
-                            <CaretDownOutlined
-                                class={[
-                                `${prefixCls}-switcher-icon`,
-                                isExpanded.value ? 'is-expanded' : '',
-                                ]}
-                            />
-                            )}
+                <span class={`${prefixCls}-switcher`} onClick={handleClickSwitcher}>
+                    {icon}
                 </span>
             );
         };

diff --git a/components/tree/useData.ts b/components/tree/useData.ts
@@ -80,7 +80,7 @@ export default ({ props, emit }: { props: TreeProps; emit: any }) => {
         indexPath: TreeNodeKey[] = [],
         level = 1,
         parent: InnerTreeOption = undefined,
-    ) =>
+    ): TreeNodeKey[] =>
         nodes.reduce((res, node) => {
             const copy = transformNode(node, indexPath, level);
             // 收集 parent
@@ -100,11 +100,11 @@ export default ({ props, emit }: { props: TreeProps; emit: any }) => {
                 );
                 copy.children = children;
                 copy.childrenPath = keys;
-                // 比Array.concat快
-                concat(res as InnerTreeOption[], keys);
+                // 比 Array.concat 快
+                concat(res, keys);
             }
             return res;
-        }, []) as TreeNodeKey[];
+        }, [] as TreeNodeKey[]);
 
     watch(
         [() => props.data],

diff --git a/docs/.vitepress/components/tree/async.vue b/docs/.vitepress/components/tree/async.vue
@@ -39,7 +39,7 @@ function createLabel(level) {
 
 export default {
     setup() {
-        const data = reactive(createData(2));
+        const data = reactive(createData(1));
         const loadData = (node) => {
             return new Promise((resolve) => {
                 setTimeout(() => {

diff --git a/docs/.vitepress/components/tree/common.vue b/docs/.vitepress/components/tree/common.vue
@@ -2,11 +2,11 @@
     <FGrid>
         <FGridItem :span="12">
             默认为可选中：
-            <FTree :data="data" />
+            <FTree :data="data1" />
         </FGridItem>
         <FGridItem :span="12">
             选中后无法取消：
-            <FTree :data="data" :cancelable="false" />
+            <FTree :data="data2" :cancelable="false" />
         </FGridItem>
     </FGrid>
 </template>
@@ -48,9 +48,53 @@ function createLabel(level) {
 
 export default {
     setup() {
-        const data = reactive(createData(4));
+        const data1 = reactive(createData(3));
+        console.log(JSON.stringify(data1, null, 2));
+        const data2 = [
+            {
+                label: '二生三',
+                value: '20',
+                children: [
+                    {
+                        label: '三生万物',
+                        value: '2010',
+                        prefix: null,
+                        suffix: null,
+                        children: [
+                            {
+                                label: '三生万物',
+                                value: '312010',
+                                prefix: null,
+                                suffix: null,
+                            },
+                            {
+                                label: '三生万物',
+                                value: '312011',
+                                prefix: null,
+                                suffix: null,
+                            },
+                        ],
+                    },
+                    {
+                        label: '三生万物',
+                        value: '2011',
+                        prefix: null,
+                        suffix: null,
+                    },
+                ],
+                prefix: null,
+                suffix: null,
+            },
+            {
+                label: '二生三',
+                value: '21',
+                prefix: null,
+                suffix: null,
+            },
+        ];
         return {
-            data,
+            data1,
+            data2,
         };
     },
 };