stk-table-vue 0.8.5 → 0.8.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stk-table-vue",
-  "version": "0.8.5",
+  "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
@@ -83,7 +78,6 @@
                         @drop="onThDrop"
                         @dragover="onThDragOver"
                     >
-                        <!-- 列宽拖动handler -->
                         <div
                             v-if="colResizeOn(col) && colIndex > 0"
                             class="table-header-resizer left"
@@ -241,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 }">
@@ -745,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 });
@@ -764,6 +771,7 @@ const {
     virtualX_on,
     virtualX_columnPart,
     virtualX_offsetRight,
+    tableHeaderHeight,
     initVirtualScroll,
     initVirtualScrollY,
     initVirtualScrollX,
@@ -881,7 +889,7 @@ watch(
             console.warn('invalid dataSource');
             return;
         }
-      
+
         let needInitVirtualScrollY = false;
         if (dataSourceCopy.value.length !== val.length) {
             needInitVirtualScrollY = true;
@@ -1083,7 +1091,7 @@ const cellStyleMap = computed(() => {
 });
 
 function getRowIndex(rowIndex: number) {
-    return rowIndex + (virtual_on ? virtualScroll.value.startIndex : 0);
+    return rowIndex + (virtual_on.value ? virtualScroll.value.startIndex : 0);
 }
 
 /** th title */
@@ -1302,13 +1310,13 @@ function onTableWheel(e: WheelEvent) {
      * 只有虚拟滚动时，才要用 wheel 代理scroll，防止滚动过快导致的白屏。
      * 滚动条在边界情况时，not preventDefault 。因为会阻塞父级滚动条滚动。
      */
-    if (virtual_on && deltaY) {
+    if (virtual_on.value && deltaY) {
         if ((deltaY > 0 && !isScrollBottom) || (deltaY < 0 && scrollTop > 0)) {
             e.preventDefault();
         }
         dom.scrollTop += deltaY;
     }
-    if (virtualX_on && deltaX) {
+    if (virtualX_on.value && deltaX) {
         if ((deltaX > 0 && !isScrollRight) || (deltaX < 0 && scrollLeft > 0)) {
             e.preventDefault();
         }
@@ -1347,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,