🦄 refactor: 暂存

src/components/ZmTable/index.vue

@@ -1,17 +1,5 @@
 <script lang="ts" setup>
-interface TableColumn<T = any> {
-  key: string
-  label: string
-  fixed?: 'left' | 'right'
-  align?: 'left' | 'center' | 'right'
-  prop?: keyof T | string
-  visible?: boolean
-  sortable?: boolean
-  minWidth?: number
-  searchable?: boolean
-  formatter?: (row: T) => string
-  render?: (scope: { row: T; value: any }) => any
-}
+import { TableColumn } from './types'
 
 const props = defineProps<{
   data: any[]
@@ -23,7 +11,7 @@ const props = defineProps<{
   pageSize?: number
 }>()
 
-const { pageNo, pageSize } = toRefs(props)
+const { pageNo, pageSize, columns } = toRefs(props)
 
 const emits = defineEmits(['sortfn', 'handleQuery', 'handleSizeChange', 'handleCurrentChange'])
 </script>
@@ -44,7 +32,32 @@ const emits = defineEmits(['sortfn', 'handleQuery', 'handleSizeChange', 'handleC
             :width="width"
             scrollbar-always-on
             border
-          />
+          >
+            <template v-for="col in columns" :key="col.key">
+              <el-table-column
+                :align="col.align"
+                :fixed="col.fixed"
+                :label="col.label"
+                :prop="col.prop"
+                :min-width="col.minWidth"
+                resizable
+                v-if="col.children && col.children.length > 0"
+              >
+                <template v-for="child in col.children" :key="child.key">
+                  <el-table-column
+                    :align="child.align"
+                    :fixed="col.fixed"
+                    :label="col.label"
+                    :prop="col.prop"
+                    :min-width="col.minWidth"
+                    resizable
+                  >
+                    <template #header> </template>
+                  </el-table-column>
+                </template>
+              </el-table-column>
+            </template>
+          </el-table>
         </template>
       </el-auto-resizer>
     </div>

src/components/ZmTable/types.ts

@@ -0,0 +1,14 @@
+export interface TableColumn<T = Record<string, any>> {
+  key: string
+  label: string
+  fixed?: 'left' | 'right'
+  align?: 'left' | 'center' | 'right'
+  prop: keyof T | string
+  visible?: boolean
+  sortable?: boolean
+  minWidth?: number
+  searchable?: boolean
+  formatter?: (row: T) => string
+  render?: (scope: { row: T; value: any }) => any
+  children?: TableColumn[]
+}

src/views/test/index.vue

@@ -1,4 +1,48 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { TableColumn } from '@/components/ZmTable/types'
+
+interface List {
+  name: string
+  age: number
+  gender: string
+  createTime: string
+  updateTime: string
+}
+const loading = ref(false)
+
+const total = ref(2)
+
+const list = ref<List[]>([])
+
+const columns = ref<TableColumn<List>[]>([{}])
+
+function fetchList(params) {
+  loading.value = true
+  console.log('查询参数', params)
+
+  // mock
+  setTimeout(() => {
+    list.value = [
+      {
+        name: '张三',
+        age: 18,
+        gender: '男',
+        createTime: '2023-01-01 00:00:00',
+        updateTime: '2023-01-01 00:00:00'
+      },
+      {
+        name: '李四',
+        age: 20,
+        gender: '男',
+        createTime: '2023-01-02 00:00:00',
+        updateTime: '2023-01-02 00:00:00'
+      }
+    ]
+    total.value = 2
+    loading.value = false
+  }, 500)
+}
+</script>
 <template>
   <div
     class="h-[calc(100vh-20px-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height))]"