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,10 +52,12 @@ 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">
+        <div v-bind="computedWrapperProps">
+            <table>
                 <slot :list="values" />
             </table>
         </div>
+    </div>
     <slot v-else name="empty" />
 </template>
 
@@ -55,8 +65,9 @@ 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;
+        >table {
             >thead {
                 @apply sticky z-10;
                 top: -1px;
@@ -65,8 +76,9 @@ div.table-container {
                 height: v-bind(itemHeightStyle);
             }
         }
+    }
     &::-webkit-scrollbar-track {
-        margin-top: v-bind(scrollBarTop);
+        margin-top: v-bind(computedHeaderHeight);
     }
 }
 </style>