表格分组递归

src/components/table/column/groupColumn.vue

@@ -0,0 +1,41 @@
+<template>
+    <template v-for="(item, index) in props.column" :key="index + '-column'">
+        <vxe-table-colgroup
+            v-if="item.children"
+            :field="item.field"
+            :title="item.title"
+            :min-width="item.width"
+            show-overflow
+            align="center"
+        >
+            <!-- 递归调用 -->
+            <GroupColumn :column="item.children" />
+        </vxe-table-colgroup>
+        <Column :attr="item" :tree-node="item.treeNode" v-else>
+            <template v-if="item.render" #default="scope">
+                <FieldRender
+                    :field="item"
+                    :row="scope.row"
+                    :column="scope.column"
+                    :index="scope.rowIndex"
+                    :key="
+                        index +
+                        '-' +
+                        item.render +
+                        '-' +
+                        (item.field ? '-' + item.field + '-' + scope.row[item.field] : '')
+                    "
+                />
+            </template>
+        </Column>
+    </template>
+</template>
+
+<script setup lang="ts">
+import FieldRender from '@/components/table/fieldRender/index.vue'
+import Column from '@/components/table/column/index.vue'
+
+const props = defineProps<{
+    column: any[]
+}>()
+</script>

src/components/table/index.vue

@@ -11,40 +11,7 @@
         >
             <!-- Column 组件内部是 el-table-column -->
             <template v-if="isGroup">
-                <vxe-table-colgroup
-                    v-if="isGroup"
-                    v-for="(item, index) in tableStore.table.column"
-                    :field="item.field"
-                    :title="item.title"
-                    :key="index + '-column'"
-                    :min-width="item.width"
-                    show-overflow
-                    align="center"
-                >
-                    <Column
-                        :attr="child"
-                        :key="key + '-column' + '-' + index"
-                        v-for="(child, key) in item.children"
-                        :tree-node="child.treeNode"
-                    >
-                        <!-- tableStore 预设的列 render 方案 -->
-                        <template v-if="child.render" #default="scope">
-                            <FieldRender
-                                :field="child"
-                                :row="scope.row"
-                                :column="scope.column"
-                                :index="scope.rowIndex"
-                                :key="
-                                    key +
-                                    '-' +
-                                    child.render +
-                                    '-' +
-                                    (child.field ? '-' + child.field + '-' + scope.row[child.field] : '')
-                                "
-                            />
-                        </template>
-                    </Column>
-                </vxe-table-colgroup>
+                <GroupColumn :column="tableStore.table.column" />
             </template>
             <template v-else>
                 <Column
@@ -96,6 +63,7 @@ import type { ElTable } from 'element-plus'
 import { VxeTableEvents, VxeTableInstance } from 'vxe-table'
 import FieldRender from '@/components/table/fieldRender/index.vue'
 import Column from '@/components/table/column/index.vue'
+import GroupColumn from '@/components/table/column/groupColumn.vue'
 import { useConfig } from '@/stores/config'
 import type TableStoreClass from '@/utils/tableStore'
 
@@ -180,3 +148,4 @@ defineExpose({
     }
 }
 </style>
+@/components/table/column/GroupColumn.vue@/components/table/column/GroupColumn.vue