total in acquisition table

src/components/table/VirtualScrollTable.vue

@@ -6,7 +6,8 @@ interface Props {
     list?: any[];
     itemHeight: number;
     headerHeight?: number;
-    bottom?: string;
+    footerHeight?: number;
+    bottom?: string; // FIXME: use css variable
 }
 
 
@@ -35,11 +36,16 @@ const computedHeaderHeight = computed(() => {
     
     return h + 'px';
 })
+const computedFooterHeight = computed(() => {
+    const h = props.footerHeight ?? 0;
+    
+    return h + 'px';
+})
 const computedWrapperProps = computed(() => ({
     ...wrapperProps.value,
     style: {
         ...wrapperProps.value.style,
-        height: `calc(${wrapperProps.value.style.height} + ${computedHeaderHeight.value} + 1px)`
+        height: `calc(${wrapperProps.value.style.height} + ${computedHeaderHeight.value} + ${computedFooterHeight.value} + 1px)`
     }
 }))
 const itemHeightStyle = computed(() => {
@@ -72,6 +78,10 @@ div.table-container {
                 @apply sticky z-10;
                 top: -1px;
             }
+            >tfoot {
+                @apply bg-slate-600 sticky z-10;
+                bottom: -1px;
+            }
             >*>tr, >*>tr>td {
                 height: v-bind(itemHeightStyle);
             }
@@ -79,6 +89,7 @@ div.table-container {
     }
     &::-webkit-scrollbar-track {
         margin-top: v-bind(computedHeaderHeight);
+        margin-bottom: v-bind(computedFooterHeight);
     }
 }
 </style>