diff --git a/src/components/table/VirtualScrollTable.vue b/src/components/table/VirtualScrollTable.vue index 8df9058..d2d960d 100644 --- a/src/components/table/VirtualScrollTable.vue +++ b/src/components/table/VirtualScrollTable.vue @@ -17,6 +17,7 @@ const props = withDefaults(defineProps(), { const { list: values, containerProps, wrapperProps } = useVirtualList(computed(() => props.list), { itemHeight: () => props.itemHeight, + overscan: 3 }) const tableTop = ref(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(() => { @@ -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); } } \ No newline at end of file