finally table height

src/components/table/VirtualScrollTable.vue

@@ -17,6 +17,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 const { list: values, containerProps, wrapperProps } = useVirtualList(computed(() => props.list), {
     itemHeight: () => props.itemHeight,
+    overscan: 3
 })
 
 const tableTop = ref<HTMLSpanElement | null>(null);
@@ -29,11 +30,18 @@ const ypx = computed(() => {
     }
     return y;
 })
-const scrollBarTop = computed(() => {
+const computedHeaderHeight = computed(() => {
     const h = props.headerHeight ?? props.itemHeight ?? 0;
     
     return h + 'px';
 })
+const computedWrapperProps = computed(() => ({
+    ...wrapperProps.value,
+    style: {
+        ...wrapperProps.value.style,
+        height: `calc(${wrapperProps.value.style.height} + ${computedHeaderHeight.value} + 1px)`
+    }
+}))
 const itemHeightStyle = computed(() => {
     const h = props.itemHeight ?? 0;
     
@@ -44,9 +52,11 @@ const itemHeightStyle = computed(() => {
 <template>
     <span ref="tableTop" class="h-0" />
     <div v-if="list.length > 0" v-bind="containerProps" class="table-container">
-        <table v-bind="wrapperProps">
-            <slot :list="values" />
-        </table>
+        <div v-bind="computedWrapperProps">
+            <table>
+                <slot :list="values" />
+            </table>
+        </div>
     </div>
     <slot v-else name="empty" />
 </template>
@@ -55,18 +65,20 @@ const itemHeightStyle = computed(() => {
 div.table-container {
     @apply bg-slate-600;
     max-height: calc(100vh - v-bind(ypx));
-    :deep(>table) {
+    :deep(>div) {
         @apply bg-slate-800;
-        >thead {
-            @apply sticky z-10;
-            top: -1px;
-        }
-        >*>tr, >*>tr>td {
-            height: v-bind(itemHeightStyle);
+        >table {
+            >thead {
+                @apply sticky z-10;
+                top: -1px;
+            }
+            >*>tr, >*>tr>td {
+                height: v-bind(itemHeightStyle);
+            }
         }
     }
     &::-webkit-scrollbar-track {
-        margin-top: v-bind(scrollBarTop);
+        margin-top: v-bind(computedHeaderHeight);
     }
 }
 </style>