✨ feat: 表格

src/components/ZmTable/index.vue

@@ -1,5 +1,335 @@
-<script lang="ts" setup></script>
+<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' }
+]
+</script>
 
 <template>
-  <div></div>
+  <div class="flex flex-col h-full bg-white dark:bg-[#1d1e1f] shadow rounded-lg">
+    <div class="flex-1 relative">
+      <el-auto-resizer class="absolute">
+        <template #default="{ width, height }">
+          <el-table
+            size="default"
+            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>
+        </template>
+      </el-auto-resizer>
+    </div>
+  </div>
 </template>
+
+<style scoped></style>

src/views/test/index.vue

@@ -1,4 +1,8 @@
 <script lang="ts" setup></script>
 <template>
-  <div></div>
+  <div
+    class="h-[calc(100vh-20px-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height))]"
+  >
+    <zm-table />
+  </div>
 </template>