stk-table-vue 0.8.6 → 0.8.7

package/lib/style.css

@@ -184,8 +184,10 @@
 }
 .stk-table .row-by-row-table-height{
   width:1px;
+  flex-shrink:0;
   position:absolute;
   left:0;
+  top:0;
 }
 .stk-table th,
 .stk-table td{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stk-table-vue",
-  "version": "0.8.6",
+  "version": "0.8.7",
   "description": "Simple realtime virtual table for vue3 and vue2.7",
   "main": "./lib/stk-table-vue.js",
   "types": "./lib/src/StkTable/index.d.ts",

package/src/StkTable/StkTable.vue

@@ -36,12 +36,7 @@
         @scroll="onTableScroll"
         @wheel="onTableWheel"
     >
-        
-        <div
-            v-if="isSRBRActive && virtual"
-            class="row-by-row-table-height"
-            :style="{ height: dataSourceCopy.length * virtualScroll.rowHeight + 'px' }"
-        ></div>
+        <div v-if="SRBRTotalHeight" class="row-by-row-table-height" :style="`height: ${SRBRTotalHeight}px`"></div>
 
         <div v-if="colResizable" ref="colResizeIndicatorRef" class="column-resize-indicator"></div>
         <table
@@ -240,6 +235,7 @@
                     </template>
                 </tr>
                 <tr v-if="virtual_on && !isSRBRActive" :style="`height: ${virtual_offsetBottom}px`"></tr>
+                <tr v-if="SRBRBottomHeight" :style="`height: ${SRBRBottomHeight}px`"></tr>
             </tbody>
         </table>
         <div v-if="(!dataSourceCopy || !dataSourceCopy.length) && showNoData" class="stk-table-no-data" :class="{ 'no-data-full': noDataFull }">
@@ -744,6 +740,18 @@ const getEmptyCellText = computed(() => {
     }
 });
 
+/** scroll-row-by-row total-height */
+const SRBRTotalHeight = computed(() => {
+    if (!isSRBRActive.value || !props.virtual) return 0;
+    return (
+        dataSourceCopy.value.length * virtualScroll.value.rowHeight + tableHeaderHeight.value //+
+    );
+});
+const SRBRBottomHeight = computed(() => {
+    if (!isSRBRActive.value || !props.virtual) return 0;
+    return (virtualScroll.value.containerHeight - tableHeaderHeight.value) % virtualScroll.value.rowHeight;
+});
+
 const rowKeyGenCache = new WeakMap();
 
 const { isSRBRActive } = useScrollRowByRow({ props, tableContainerRef });
@@ -763,6 +771,7 @@ const {
     virtualX_on,
     virtualX_columnPart,
     virtualX_offsetRight,
+    tableHeaderHeight,
     initVirtualScroll,
     initVirtualScrollY,
     initVirtualScrollX,
@@ -880,7 +889,7 @@ watch(
             console.warn('invalid dataSource');
             return;
         }
-      
+
         let needInitVirtualScrollY = false;
         if (dataSourceCopy.value.length !== val.length) {
             needInitVirtualScrollY = true;
@@ -1346,7 +1355,7 @@ function onTableScroll(e: Event) {
     }
 
     if (isYScroll) {
-        const {  startIndex, endIndex } = virtualScroll.value;
+        const { startIndex, endIndex } = virtualScroll.value;
         emits('scroll', e, { startIndex, endIndex });
     }
     if (isXScroll) {

package/src/StkTable/style.less

@@ -275,8 +275,10 @@
 
     .row-by-row-table-height {
         width: 1px;
+        flex-shrink: 0;
         position: absolute;
         left: 0;
+        top: 0;
     }
 
     th,

package/src/StkTable/useVirtualScroll.ts

@@ -67,7 +67,8 @@ export function useVirtualScroll<DT extends Record<string, any>>({
     rowKeyGen,
     maxRowSpan,
 }: Option<DT>) {
-    const tableHeaderHeight = ref(props.headerRowHeight);
+    const tableHeaderHeight = computed(() => props.headerRowHeight * tableHeaders.value.length);
+
 
     const virtualScroll = ref<VirtualScrollStore>({
         containerHeight: 0,
@@ -188,10 +189,6 @@ export function useVirtualScroll<DT extends Record<string, any>>({
         return rowHeightFn;
     });
 
-    function getTableHeaderHeight() {
-        return props.headerRowHeight * tableHeaders.value.length;
-    }
-
     /**
      * 初始化虚拟滚动参数
      * @param {number} [height] 虚拟滚动的高度
@@ -210,18 +207,16 @@ export function useVirtualScroll<DT extends Record<string, any>>({
             console.warn('initVirtualScrollY: height must be a number');
             height = 0;
         }
-        const { offsetHeight, scrollHeight } = tableContainerRef.value || {};
+        const { clientHeight, scrollHeight } = tableContainerRef.value || {};
         let scrollTop = tableContainerRef.value?.scrollTop || 0;
 
         const rowHeight = getRowHeightFn.value();
-        const containerHeight = height || offsetHeight || DEFAULT_TABLE_HEIGHT;
+        const containerHeight = height || clientHeight || DEFAULT_TABLE_HEIGHT;
         const { headless } = props;
         let pageSize = Math.ceil(containerHeight / rowHeight);
-        const headerHeight = getTableHeaderHeight();
-        tableHeaderHeight.value = headerHeight;
         if (!headless) {
             /** 表头高度占几行表体高度数 */
-            const headerToBodyRowHeightCount = Math.floor(headerHeight / rowHeight);
+            const headerToBodyRowHeightCount = Math.floor(tableHeaderHeight.value / rowHeight);
             pageSize -= headerToBodyRowHeightCount; //减去表头行数
         }
         const maxScrollTop = dataSourceCopy.value.length * rowHeight + tableHeaderHeight.value - containerHeight;
@@ -487,6 +482,7 @@ export function useVirtualScroll<DT extends Record<string, any>>({
         virtualX_on,
         virtualX_columnPart,
         virtualX_offsetRight,
+        tableHeaderHeight,
         initVirtualScroll,
         initVirtualScrollY,
         initVirtualScrollX,