stk-table-vue 0.6.15 → 0.6.17

package/lib/stk-table-vue.js

@@ -64,17 +64,18 @@ function insertToOrderedArray(sortState, newItem, targetArray, sortConfig = {})
     data.unshift(newItem);
     return data;
   }
-  if (sortConfig.emptyToBottom && isEmptyValue(newItem)) {
+  const targetVal = newItem[dataIndex];
+  if (sortConfig.emptyToBottom && isEmptyValue(targetVal)) {
     data.push(newItem);
+  } else {
+    const isNumber = sortType === "number";
+    const sIndex = binarySearch(data, (midIndex) => {
+      const midVal = data[midIndex][dataIndex];
+      const compareRes = strCompare(midVal, targetVal, isNumber, sortConfig.stringLocaleCompare);
+      return order === "asc" ? compareRes : -compareRes;
+    });
+    data.splice(sIndex, 0, newItem);
   }
-  const isNumber = sortType === "number";
-  const targetVal = newItem[dataIndex];
-  const sIndex = binarySearch(data, (midIndex) => {
-    const midVal = data[midIndex][dataIndex];
-    const compareRes = strCompare(midVal, targetVal, isNumber, sortConfig.stringLocaleCompare);
-    return order === "asc" ? compareRes : -compareRes;
-  });
-  data.splice(sIndex, 0, newItem);
   return data;
 }
 function binarySearch(searchArray, compareCallback) {
@@ -1094,7 +1095,7 @@ function useVirtualScroll({
     const rowHeight = getRowHeightFn.value();
     if (props.autoRowHeight) {
       let offsetBottom = 0;
-      for (let i = endIndex; i < dataSourceCopyValue.length; i++) {
+      for (let i = endIndex + 1; i < dataSourceCopyValue.length; i++) {
         const rowHeight2 = getRowHeightFn.value(dataSourceCopyValue[i]);
         offsetBottom += rowHeight2;
       }
@@ -1165,7 +1166,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);
@@ -1219,17 +1220,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) => {
@@ -1241,16 +1243,24 @@ function useVirtualScroll({
       for (let i = 0; i < dataLength; i++) {
         const height = getRowHeightFn.value(dataSourceCopyTemp[i]);
         autoRowHeightTop += height;
-        if (autoRowHeightTop > sTop) {
+        if (autoRowHeightTop >= sTop) {
           startIndex = i;
           autoRowHeightTop -= height;
           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.15",
+  "version": "0.6.17",
   "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

@@ -112,7 +112,7 @@ export function useVirtualScroll<DT extends Record<string, any>>({
         const rowHeight = getRowHeightFn.value();
         if (props.autoRowHeight) {
             let offsetBottom = 0;
-            for (let i = endIndex; i < dataSourceCopyValue.length; i++) {
+            for (let i = endIndex + 1; i < dataSourceCopyValue.length; i++) {
                 const rowHeight = getRowHeightFn.value(dataSourceCopyValue[i]);
                 offsetBottom += rowHeight;
             }
@@ -212,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);
@@ -275,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;
 
@@ -285,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) {
@@ -300,22 +301,30 @@ 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;
-                if (autoRowHeightTop > sTop) {
+                if (autoRowHeightTop >= sTop) {
                     startIndex = i;
                     autoRowHeightTop -= height;
                     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变成偶数
@@ -326,8 +335,6 @@ export function useVirtualScroll<DT extends Record<string, any>>({
         }
 
         startIndex = Math.max(0, startIndex);
-
-        // 溢出修正
         endIndex = Math.min(endIndex, dataLength);
 
         if (startIndex >= endIndex) {

package/src/StkTable/utils/index.ts

@@ -34,21 +34,21 @@ export function insertToOrderedArray<T extends object>(sortState: SortState<T>,
         return data;
     }
 
-    if (sortConfig.emptyToBottom && isEmptyValue(newItem)) {
+    const targetVal: any = newItem[dataIndex];
+    if (sortConfig.emptyToBottom && isEmptyValue(targetVal)) {
         // 空值排在最下方
         data.push(newItem);
+    } else {
+        const isNumber = sortType === 'number';
+        // 二分插入
+        const sIndex = binarySearch(data, midIndex => {
+            const midVal: any = data[midIndex][dataIndex];
+            const compareRes = strCompare(midVal, targetVal, isNumber, sortConfig.stringLocaleCompare);
+            return order === 'asc' ? compareRes : -compareRes;
+        });
+        data.splice(sIndex, 0, newItem);
     }
 
-    const isNumber = sortType === 'number';
-
-    // 二分插入
-    const targetVal: any = newItem[dataIndex];
-    const sIndex = binarySearch(data, midIndex => {
-        const midVal: any = data[midIndex][dataIndex];
-        const compareRes = strCompare(midVal, targetVal, isNumber, sortConfig.stringLocaleCompare);
-        return order === 'asc' ? compareRes : -compareRes;
-    });
-    data.splice(sIndex, 0, newItem);
     return data;
 }