stk-table-vue 0.6.14 → 0.6.16

package/lib/stk-table-vue.js

@@ -1089,9 +1089,18 @@ function useVirtualScroll({
   });
   const virtual_offsetBottom = computed(() => {
     if (!virtual_on.value) return 0;
-    const { startIndex } = virtualScroll.value;
+    const { startIndex, endIndex } = virtualScroll.value;
+    const dataSourceCopyValue = dataSourceCopy.value;
     const rowHeight = getRowHeightFn.value();
-    return (dataSourceCopy.value.length - startIndex - virtual_dataSourcePart.value.length) * rowHeight;
+    if (props.autoRowHeight) {
+      let offsetBottom = 0;
+      for (let i = endIndex + 1; i < dataSourceCopyValue.length; i++) {
+        const rowHeight2 = getRowHeightFn.value(dataSourceCopyValue[i]);
+        offsetBottom += rowHeight2;
+      }
+      return offsetBottom;
+    }
+    return (dataSourceCopyValue.length - startIndex - virtual_dataSourcePart.value.length) * rowHeight;
   });
   const virtualX_on = computed(() => {
     return props.virtualX && tableHeaderLast.value.reduce((sum, col) => sum += getCalculatedColWidth(col), 0) > virtualScrollX.value.containerWidth + 100;
@@ -1156,7 +1165,7 @@ function useVirtualScroll({
     }
     const { offsetHeight, scrollHeight } = tableContainerRef.value || {};
     let scrollTop = ((_a = tableContainerRef.value) == null ? void 0 : _a.scrollTop) || 0;
-    const rowHeight = getRowHeightFn.value(props.dataSource[0]);
+    const rowHeight = getRowHeightFn.value();
     const containerHeight = height || offsetHeight || DEFAULT_TABLE_HEIGHT;
     const { headless } = props;
     let pageSize = Math.ceil(containerHeight / rowHeight);
@@ -1183,9 +1192,9 @@ function useVirtualScroll({
   const autoRowHeightMap = /* @__PURE__ */ new Map();
   function setAutoHeight(rowKey, height) {
     if (!height) {
-      autoRowHeightMap.delete(rowKey);
+      autoRowHeightMap.delete(String(rowKey));
     } else {
-      autoRowHeightMap.set(rowKey, height);
+      autoRowHeightMap.set(String(rowKey), height);
     }
   }
   function clearAllAutoHeight() {
@@ -1195,7 +1204,7 @@ function useVirtualScroll({
     var _a;
     if (!row) return;
     const rowKey = rowKeyGen(row);
-    const storedHeight = autoRowHeightMap.get(rowKey);
+    const storedHeight = autoRowHeightMap.get(String(rowKey));
     if (storedHeight) {
       return storedHeight;
     }
@@ -1210,17 +1219,18 @@ function useVirtualScroll({
   }
   function updateVirtualScrollY(sTop = 0) {
     var _a;
-    const { pageSize, scrollTop, startIndex: oldStartIndex, endIndex: oldEndIndex } = virtualScroll.value;
+    const { pageSize, scrollTop, startIndex: oldStartIndex, endIndex: oldEndIndex, containerHeight } = virtualScroll.value;
     virtualScroll.value.scrollTop = sTop;
     if (!virtual_on.value) {
       return;
     }
     const dataSourceCopyTemp = dataSourceCopy.value;
-    const rowHeight = getRowHeightFn.value(dataSourceCopyTemp[0]);
+    const rowHeight = getRowHeightFn.value();
     const { autoRowHeight, stripe, optimizeVue2Scroll } = props;
+    const dataLength = dataSourceCopyTemp.length;
     let startIndex = 0;
+    let endIndex = dataLength;
     let autoRowHeightTop = 0;
-    const dataLength = dataSourceCopyTemp.length;
     if (autoRowHeight || hasExpandCol.value) {
       if (autoRowHeight) {
         (_a = trRef.value) == null ? void 0 : _a.forEach((tr) => {
@@ -1238,10 +1248,18 @@ function useVirtualScroll({
           break;
         }
       }
+      let containerHeightSum = 0;
+      for (let i = startIndex + 1; i < dataLength; i++) {
+        containerHeightSum += getRowHeightFn.value(dataSourceCopyTemp[i]);
+        if (containerHeightSum >= containerHeight) {
+          endIndex = i;
+          break;
+        }
+      }
     } else {
       startIndex = Math.floor(sTop / rowHeight);
+      endIndex = startIndex + pageSize;
     }
-    let endIndex = startIndex + pageSize;
     if (stripe && startIndex > 0 && startIndex % 2) {
       startIndex -= 1;
       if (autoRowHeight || hasExpandCol.value) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stk-table-vue",
-  "version": "0.6.14",
+  "version": "0.6.16",
   "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/useVirtualScroll.ts

@@ -107,9 +107,19 @@ export function useVirtualScroll<DT extends Record<string, any>>({
 
     const virtual_offsetBottom = computed(() => {
         if (!virtual_on.value) return 0;
-        const { startIndex } = virtualScroll.value;
+        const { startIndex, endIndex } = virtualScroll.value;
+        const dataSourceCopyValue = dataSourceCopy.value;
         const rowHeight = getRowHeightFn.value();
-        return (dataSourceCopy.value.length - startIndex - virtual_dataSourcePart.value.length) * rowHeight;
+        if (props.autoRowHeight) {
+            let offsetBottom = 0;
+            for (let i = endIndex + 1; i < dataSourceCopyValue.length; i++) {
+                const rowHeight = getRowHeightFn.value(dataSourceCopyValue[i]);
+                offsetBottom += rowHeight;
+            }
+            return offsetBottom;
+        }
+
+        return (dataSourceCopyValue.length - startIndex - virtual_dataSourcePart.value.length) * rowHeight;
     });
 
     const virtualX_on = computed(() => {
@@ -202,7 +212,7 @@ export function useVirtualScroll<DT extends Record<string, any>>({
         const { offsetHeight, scrollHeight } = tableContainerRef.value || {};
         let scrollTop = tableContainerRef.value?.scrollTop || 0;
 
-        const rowHeight = getRowHeightFn.value(props.dataSource[0]);
+        const rowHeight = getRowHeightFn.value();
         const containerHeight = height || offsetHeight || DEFAULT_TABLE_HEIGHT;
         const { headless } = props;
         let pageSize = Math.ceil(containerHeight / rowHeight);
@@ -232,13 +242,13 @@ export function useVirtualScroll<DT extends Record<string, any>>({
     let vue2ScrollYTimeout: null | number = null;
 
     /** every row actual height */
-    const autoRowHeightMap = new Map<UniqKey, number>();
+    const autoRowHeightMap = new Map<string, number>();
     /** 如果行高度有变化，则要调用此方法清除保存的行高 */
     function setAutoHeight(rowKey: UniqKey, height?: number | null) {
         if (!height) {
-            autoRowHeightMap.delete(rowKey);
+            autoRowHeightMap.delete(String(rowKey));
         } else {
-            autoRowHeightMap.set(rowKey, height);
+            autoRowHeightMap.set(String(rowKey), height);
         }
     }
 
@@ -249,7 +259,7 @@ export function useVirtualScroll<DT extends Record<string, any>>({
     function getAutoRowHeight(row?: DT) {
         if (!row) return;
         const rowKey = rowKeyGen(row);
-        const storedHeight = autoRowHeightMap.get(rowKey);
+        const storedHeight = autoRowHeightMap.get(String(rowKey));
         if (storedHeight) {
             return storedHeight;
         }
@@ -265,7 +275,7 @@ export function useVirtualScroll<DT extends Record<string, any>>({
 
     /** 通过滚动条位置，计算虚拟滚动的参数 */
     function updateVirtualScrollY(sTop = 0) {
-        const { pageSize, scrollTop, startIndex: oldStartIndex, endIndex: oldEndIndex } = virtualScroll.value;
+        const { pageSize, scrollTop, startIndex: oldStartIndex, endIndex: oldEndIndex, containerHeight } = virtualScroll.value;
         // 先更新滚动条位置记录，其他地方有依赖。(stripe 时ArrowUp/Down滚动依赖)
         virtualScroll.value.scrollTop = sTop;
 
@@ -275,12 +285,13 @@ export function useVirtualScroll<DT extends Record<string, any>>({
         }
 
         const dataSourceCopyTemp = dataSourceCopy.value;
-        const rowHeight = getRowHeightFn.value(dataSourceCopyTemp[0]);
+        const rowHeight = getRowHeightFn.value();
         const { autoRowHeight, stripe, optimizeVue2Scroll } = props;
+        const dataLength = dataSourceCopyTemp.length;
 
         let startIndex = 0;
+        let endIndex = dataLength;
         let autoRowHeightTop = 0;
-        const dataLength = dataSourceCopyTemp.length;
 
         if (autoRowHeight || hasExpandCol.value) {
             if (autoRowHeight) {
@@ -290,7 +301,7 @@ export function useVirtualScroll<DT extends Record<string, any>>({
                     autoRowHeightMap.set(rowKey, tr.offsetHeight);
                 });
             }
-
+            // calculate startIndex
             for (let i = 0; i < dataLength; i++) {
                 const height = getRowHeightFn.value(dataSourceCopyTemp[i]);
                 autoRowHeightTop += height;
@@ -300,12 +311,20 @@ export function useVirtualScroll<DT extends Record<string, any>>({
                     break;
                 }
             }
+            // calculate endIndex
+            let containerHeightSum = 0;
+            for (let i = startIndex + 1; i < dataLength; i++) {
+                containerHeightSum += getRowHeightFn.value(dataSourceCopyTemp[i]);
+                if (containerHeightSum >= containerHeight) {
+                    endIndex = i;
+                    break;
+                }
+            }
         } else {
             startIndex = Math.floor(sTop / rowHeight);
+            endIndex = startIndex + pageSize;
         }
 
-        let endIndex = startIndex + pageSize;
-
         if (stripe && startIndex > 0 && startIndex % 2) {
             // 斑马纹情况下，每滚动偶数行才加载。防止斑马纹错位。
             startIndex -= 1; // 奇数-1变成偶数
@@ -316,8 +335,6 @@ export function useVirtualScroll<DT extends Record<string, any>>({
         }
 
         startIndex = Math.max(0, startIndex);
-
-        // 溢出修正
         endIndex = Math.min(endIndex, dataLength);
 
         if (startIndex >= endIndex) {