🦄 refactor: 暂存

src/components/ZmTable/index.vue

@@ -1,284 +1,31 @@
 <script lang="ts" setup>
-const list = [
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' },
-  { 1: '123123123123123' }
-]
+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
+}
+
+const props = defineProps<{
+  data: any[]
+  columns: TableColumn[]
+  loading: boolean
+  showPagination?: boolean
+  total?: number
+  pageNo?: number
+  pageSize?: number
+}>()
+
+const { pageNo, pageSize } = toRefs(props)
+
+const emits = defineEmits(['sortfn', 'handleQuery', 'handleSizeChange', 'handleCurrentChange'])
 </script>
 
 <template>
@@ -287,48 +34,33 @@ const list = [
       <el-auto-resizer class="absolute">
         <template #default="{ width, height }">
           <el-table
-            size="default"
+            :data="data"
+            v-loading="loading"
+            stripe
             class="absolute"
             :max-height="height"
             :height="height"
             show-overflow-tooltip
             :width="width"
-            :data="list"
-            border
             scrollbar-always-on
-            stripe
-          >
-            <el-table-column prop="1" label="1" width="200" />
-            <el-table-column prop="1" label="1" width="200" />
-            <el-table-column prop="1" label="1" width="200" />
-            <el-table-column prop="1" label="1" width="200" />
-            <el-table-column prop="1" label="1" width="200" />
-            <el-table-column prop="1" label="1" width="200" />
-            <el-table-column prop="1" label="1" width="200" />
-            <el-table-column prop="1" label="1" width="200" />
-            <el-table-column prop="1" label="1" width="200" />
-            <el-table-column prop="1" label="1" width="200" />
-            <el-table-column prop="1" label="1" width="200" />
-            <el-table-column prop="1" label="1" width="200" />
-            <el-table-column prop="1" label="1" width="200" />
-            <el-table-column prop="1" label="1" width="200" />
-            <el-table-column prop="1" label="1" width="200" />
-            <el-table-column prop="1" label="1" width="200" />
-            <el-table-column prop="1" label="1" width="200" />
-            <el-table-column prop="1" label="1" width="200" />
-            <el-table-column prop="1" label="1" width="200" />
-            <el-table-column prop="1" label="1" width="200" />
-            <el-table-column prop="1" label="1" width="200" />
-            <el-table-column prop="1" label="1" width="200" />
-            <el-table-column prop="1" label="1" width="200" />
-            <el-table-column prop="1" label="1" width="200" />
-            <el-table-column prop="1" label="1" width="200" />
-            <el-table-column prop="1" label="1" width="200" />
-            <el-table-column prop="1" label="1" width="200" />
-          </el-table>
+            border
+          />
         </template>
       </el-auto-resizer>
     </div>
+    <div v-show="showPagination" class="h-10 mt-4 flex items-center justify-end">
+      <el-pagination
+        size="default"
+        v-model:current-page="pageNo"
+        v-model:page-size="pageSize"
+        :background="true"
+        :page-sizes="[10, 20, 30, 50, 100]"
+        :total="total"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="emits('handleSizeChange')"
+        @current-change="emits('handleCurrentChange')"
+      />
+    </div>
   </div>
 </template>