From c1fb02a82284935cb15db952e0d54346ffe52f08 Mon Sep 17 00:00:00 2001
From: xpyjs <bot@xpy.email>
Date: Thu, 14 Dec 2023 16:17:32 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9B=20=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E5=88=97=E5=BE=AA=E7=8E=AF=E5=88=9B=E5=BB=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

可以通过 v-for 指令循环创建多个 x-gantt-column

Closes #52, #68
---
 src/models/param/slotsBox.ts | 56 ++++++++++++++++++++++++------------
 1 file changed, 38 insertions(+), 18 deletions(-)

diff --git a/src/models/param/slotsBox.ts b/src/models/param/slotsBox.ts
index aecded5..e3616cc 100644
--- a/src/models/param/slotsBox.ts
+++ b/src/models/param/slotsBox.ts
@@ -6,7 +6,8 @@ import {
   h,
   type Slots,
   Comment,
-  isVNode
+  isVNode,
+  Fragment
 } from 'vue';
 import { TableHeader } from './header';
 
@@ -39,26 +40,42 @@ export default class SlotsBox {
     return !(isVNode(v) && v.type === Comment);
   }
 
+  /**
+   * 将 slots 中的 fragment 平铺
+   */
+  private __flatFragment(slots: VNode[]): VNode[] {
+    return slots.reduce<VNode[]>((p, v) => {
+      if (
+        v.type === Fragment &&
+        Array.isArray(v.children) &&
+        v.children.length > 0
+      ) {
+        return [...p, ...(v.children as VNode[])];
+      } else {
+        return [...p, v];
+      }
+    }, []);
+  }
+
   private setMultiColumn(col: VNode, column: TableHeader['columns'][0]) {
-    const s: () => VNode[] = (col.children as any)?.default;
+    const slot: () => VNode[] = (col.children as any)?.default;
 
-    if (s) {
+    if (slot) {
       try {
-        s()
-          .filter(v => {
-            const type = (v.type as Component)?.name;
-            return (
-              type &&
-              SlotsBox.__isValidComponent(v) &&
-              SlotsBox.__isCustomComponent(v) &&
-              SlotsBox.__checkType(type, Variables.name.column)
-            );
-          })
-          .forEach(v => {
-            const c = this.tableHeaders.setSubColumn(v, column);
-
-            this.setMultiColumn(v, c);
-          });
+        const s = this.__flatFragment(slot());
+        s.filter(v => {
+          const type = (v.type as Component)?.name;
+          return (
+            type &&
+            SlotsBox.__isValidComponent(v) &&
+            SlotsBox.__isCustomComponent(v) &&
+            SlotsBox.__checkType(type, Variables.name.column)
+          );
+        }).forEach(v => {
+          const c = this.tableHeaders.setSubColumn(v, column);
+
+          this.setMultiColumn(v, c);
+        });
       } catch (err) {
         // pass
       }
@@ -89,6 +106,9 @@ export default class SlotsBox {
       s = slots;
     }
 
+    // 首先要处理循环等非节点的情况
+    s = this.__flatFragment(s);
+
     // 1、slots.default 应该只包含 x-gantt-column 和 x-gantt-slider
     if (s.length > 0) {
       let index = 0;