stk-table-vue 0.6.13 → 0.6.15

package/lib/src/StkTable/StkTable.vue.d.ts

@@ -646,12 +646,12 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     maxWidth: string;
     sortConfig: SortConfig<DT>;
     rowHeight: number;
-    headerRowHeight: number | null;
     headless: boolean;
     autoRowHeight: boolean | AutoRowHeightConfig<DT>;
     stripe: boolean;
     optimizeVue2Scroll: boolean;
     rowKey: UniqKeyProp;
+    headerRowHeight: number | null;
     colKey: UniqKeyProp;
     fixedMode: boolean;
     theme: "light" | "dark";

package/lib/src/StkTable/types/index.d.ts

@@ -211,7 +211,7 @@ export type HeaderDragConfig<DT extends Record<string, any> = any> = boolean | {
 };
 export type AutoRowHeightConfig<DT> = {
     /** Estimated row height */
-    expectedHeight?: number | ((row: DT, index: number) => number);
+    expectedHeight?: number | ((row: DT) => number);
 };
 export type ColResizableConfig<DT extends Record<string, any>> = {
     disabled: (col: StkTableColumn<DT>) => boolean;

package/lib/stk-table-vue.js

@@ -1061,7 +1061,7 @@ function useVirtualScroll({
   const virtualScroll = ref({
     containerHeight: 0,
     rowHeight: props.rowHeight,
-    pageSize: 10,
+    pageSize: 0,
     startIndex: 0,
     endIndex: 0,
     offsetTop: 0,
@@ -1080,7 +1080,7 @@ function useVirtualScroll({
     return tableHeaderLast.value.some((col) => col.type === "expand");
   });
   const virtual_on = computed(() => {
-    return props.virtual && dataSourceCopy.value.length > virtualScroll.value.pageSize * 2;
+    return props.virtual && dataSourceCopy.value.length > virtualScroll.value.pageSize;
   });
   const virtual_dataSourcePart = computed(() => {
     if (!virtual_on.value) return dataSourceCopy.value;
@@ -1089,8 +1089,18 @@ function useVirtualScroll({
   });
   const virtual_offsetBottom = computed(() => {
     if (!virtual_on.value) return 0;
-    const { startIndex, rowHeight } = virtualScroll.value;
-    return (dataSourceCopy.value.length - startIndex - virtual_dataSourcePart.value.length) * rowHeight;
+    const { startIndex, endIndex } = virtualScroll.value;
+    const dataSourceCopyValue = dataSourceCopy.value;
+    const rowHeight = getRowHeightFn.value();
+    if (props.autoRowHeight) {
+      let offsetBottom = 0;
+      for (let i = endIndex; 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;
@@ -1126,9 +1136,22 @@ function useVirtualScroll({
     }
     return width;
   });
+  const getRowHeightFn = computed(() => {
+    var _a;
+    let rowHeightFn = () => props.rowHeight || DEFAULT_ROW_HEIGHT;
+    if (props.autoRowHeight) {
+      const tempRowHeightFn = rowHeightFn;
+      rowHeightFn = (row) => getAutoRowHeight(row) || tempRowHeightFn(row);
+    }
+    if (hasExpandCol.value) {
+      const expandedRowHeight = (_a = props.expandConfig) == null ? void 0 : _a.height;
+      const tempRowHeightFn = rowHeightFn;
+      rowHeightFn = (row) => row && row.__EXPANDED_ROW__ && expandedRowHeight || tempRowHeightFn(row);
+    }
+    return rowHeightFn;
+  });
   function getTableHeaderHeight() {
-    const { headerRowHeight } = props;
-    return headerRowHeight * tableHeaders.value.length;
+    return props.headerRowHeight * tableHeaders.value.length;
   }
   function initVirtualScroll(height) {
     initVirtualScrollY(height);
@@ -1140,10 +1163,9 @@ function useVirtualScroll({
       console.warn("initVirtualScrollY: height must be a number");
       height = 0;
     }
-    if (!virtual_on.value) return;
     const { offsetHeight, scrollHeight } = tableContainerRef.value || {};
     let scrollTop = ((_a = tableContainerRef.value) == null ? void 0 : _a.scrollTop) || 0;
-    const { rowHeight } = virtualScroll.value;
+    const rowHeight = getRowHeightFn.value(props.dataSource[0]);
     const containerHeight = height || offsetHeight || DEFAULT_TABLE_HEIGHT;
     const { headless } = props;
     let pageSize = Math.ceil(containerHeight / rowHeight);
@@ -1170,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() {
@@ -1180,8 +1202,9 @@ function useVirtualScroll({
   }
   function getAutoRowHeight(row) {
     var _a;
-    const rowKey = String(rowKeyGen(row));
-    const storedHeight = autoRowHeightMap.get(rowKey);
+    if (!row) return;
+    const rowKey = rowKeyGen(row);
+    const storedHeight = autoRowHeightMap.get(String(rowKey));
     if (storedHeight) {
       return storedHeight;
     }
@@ -1193,32 +1216,19 @@ function useVirtualScroll({
         return expectedHeight;
       }
     }
-    return props.rowHeight || DEFAULT_ROW_HEIGHT;
-  }
-  function createGetRowHeightFn() {
-    var _a;
-    if (props.autoRowHeight) {
-      return (row) => getAutoRowHeight(row);
-    }
-    if (hasExpandCol.value) {
-      const { rowHeight } = virtualScroll.value;
-      const expandedRowHeight = ((_a = props.expandConfig) == null ? void 0 : _a.height) || rowHeight;
-      return (row) => row.__EXPANDED_ROW__ ? expandedRowHeight : rowHeight;
-    }
-    return () => props.rowHeight || DEFAULT_ROW_HEIGHT;
   }
   function updateVirtualScrollY(sTop = 0) {
     var _a;
-    const { rowHeight, pageSize, scrollTop, startIndex: oldStartIndex, endIndex: oldEndIndex } = virtualScroll.value;
+    const { pageSize, scrollTop, startIndex: oldStartIndex, endIndex: oldEndIndex } = virtualScroll.value;
     virtualScroll.value.scrollTop = sTop;
     if (!virtual_on.value) {
       return;
     }
     const dataSourceCopyTemp = dataSourceCopy.value;
+    const rowHeight = getRowHeightFn.value(dataSourceCopyTemp[0]);
     const { autoRowHeight, stripe, optimizeVue2Scroll } = props;
     let startIndex = 0;
     let autoRowHeightTop = 0;
-    let getRowHeight = null;
     const dataLength = dataSourceCopyTemp.length;
     if (autoRowHeight || hasExpandCol.value) {
       if (autoRowHeight) {
@@ -1228,11 +1238,10 @@ function useVirtualScroll({
           autoRowHeightMap.set(rowKey, tr.offsetHeight);
         });
       }
-      getRowHeight = createGetRowHeightFn();
       for (let i = 0; i < dataLength; i++) {
-        const height = getRowHeight(dataSourceCopyTemp[i]);
+        const height = getRowHeightFn.value(dataSourceCopyTemp[i]);
         autoRowHeightTop += height;
-        if (autoRowHeightTop >= sTop) {
+        if (autoRowHeightTop > sTop) {
           startIndex = i;
           autoRowHeightTop -= height;
           break;
@@ -1245,7 +1254,7 @@ function useVirtualScroll({
     if (stripe && startIndex > 0 && startIndex % 2) {
       startIndex -= 1;
       if (autoRowHeight || hasExpandCol.value) {
-        const height = getRowHeight(dataSourceCopyTemp[startIndex]);
+        const height = getRowHeightFn.value(dataSourceCopyTemp[startIndex]);
         autoRowHeightTop -= height;
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stk-table-vue",
-  "version": "0.6.13",
+  "version": "0.6.15",
   "description": "Simple realtime virtual table for vue3 and vue2.7",
   "main": "./lib/stk-table-vue.js",
   "types": "./lib/src/StkTable/index.d.ts",
@@ -65,6 +65,7 @@
     "vite-plugin-dts": "3.9.1",
     "vitepress": "^1.5.0",
     "vitepress-demo-plugin": "^1.3.1",
+    "vitepress-plugin-llms": "^1.1.3",
     "vitest": "^2.1.3",
     "vue": "^3.5.12",
     "vue-eslint-parser": "^9.4.2"

package/src/StkTable/types/index.ts

@@ -231,7 +231,7 @@ export type HeaderDragConfig<DT extends Record<string, any> = any> =
 
 export type AutoRowHeightConfig<DT> = {
     /** Estimated row height */
-    expectedHeight?: number | ((row: DT, index: number) => number);
+    expectedHeight?: number | ((row: DT) => number);
 };
 
 export type ColResizableConfig<DT extends Record<string, any>> = {

package/src/StkTable/useVirtualScroll.ts

@@ -1,6 +1,6 @@
 import { Ref, ShallowRef, computed, ref } from 'vue';
 import { DEFAULT_ROW_HEIGHT, DEFAULT_TABLE_HEIGHT, DEFAULT_TABLE_WIDTH } from './const';
-import { StkTableColumn, UniqKey } from './types';
+import { AutoRowHeightConfig, StkTableColumn, UniqKey } from './types';
 import { getCalculatedColWidth } from './utils/constRefUtils';
 
 type Option<DT extends Record<string, any>> = {
@@ -71,7 +71,7 @@ export function useVirtualScroll<DT extends Record<string, any>>({
     const virtualScroll = ref<VirtualScrollStore>({
         containerHeight: 0,
         rowHeight: props.rowHeight,
-        pageSize: 10,
+        pageSize: 0,
         startIndex: 0,
         endIndex: 0,
         offsetTop: 0,
@@ -96,7 +96,7 @@ export function useVirtualScroll<DT extends Record<string, any>>({
 
     /** 是否虚拟滚动标志 */
     const virtual_on = computed(() => {
-        return props.virtual && dataSourceCopy.value.length > virtualScroll.value.pageSize * 2;
+        return props.virtual && dataSourceCopy.value.length > virtualScroll.value.pageSize;
     });
 
     const virtual_dataSourcePart = computed(() => {
@@ -107,8 +107,19 @@ export function useVirtualScroll<DT extends Record<string, any>>({
 
     const virtual_offsetBottom = computed(() => {
         if (!virtual_on.value) return 0;
-        const { startIndex, rowHeight } = virtualScroll.value;
-        return (dataSourceCopy.value.length - startIndex - virtual_dataSourcePart.value.length) * rowHeight;
+        const { startIndex, endIndex } = virtualScroll.value;
+        const dataSourceCopyValue = dataSourceCopy.value;
+        const rowHeight = getRowHeightFn.value();
+        if (props.autoRowHeight) {
+            let offsetBottom = 0;
+            for (let i = endIndex; 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(() => {
@@ -162,10 +173,22 @@ export function useVirtualScroll<DT extends Record<string, any>>({
         return width;
     });
 
-    /** 表头高度 */
+    const getRowHeightFn = computed(() => {
+        let rowHeightFn: (row?: DT) => number = () => props.rowHeight || DEFAULT_ROW_HEIGHT;
+        if (props.autoRowHeight) {
+            const tempRowHeightFn = rowHeightFn;
+            rowHeightFn = (row?: DT) => getAutoRowHeight(row) || tempRowHeightFn(row);
+        }
+        if (hasExpandCol.value) {
+            const expandedRowHeight = props.expandConfig?.height;
+            const tempRowHeightFn = rowHeightFn;
+            rowHeightFn = (row?: DT) => (row && row.__EXPANDED_ROW__ && expandedRowHeight) || tempRowHeightFn(row);
+        }
+        return rowHeightFn;
+    });
+
     function getTableHeaderHeight() {
-        const { headerRowHeight } = props;
-        return headerRowHeight * tableHeaders.value.length;
+        return props.headerRowHeight * tableHeaders.value.length;
     }
 
     /**
@@ -186,11 +209,10 @@ export function useVirtualScroll<DT extends Record<string, any>>({
             console.warn('initVirtualScrollY: height must be a number');
             height = 0;
         }
-        if (!virtual_on.value) return;
         const { offsetHeight, scrollHeight } = tableContainerRef.value || {};
         let scrollTop = tableContainerRef.value?.scrollTop || 0;
 
-        const { rowHeight } = virtualScroll.value;
+        const rowHeight = getRowHeightFn.value(props.dataSource[0]);
         const containerHeight = height || offsetHeight || DEFAULT_TABLE_HEIGHT;
         const { headless } = props;
         let pageSize = Math.ceil(containerHeight / rowHeight);
@@ -220,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);
         }
     }
 
@@ -234,13 +256,14 @@ export function useVirtualScroll<DT extends Record<string, any>>({
         autoRowHeightMap.clear();
     }
 
-    function getAutoRowHeight(row: DT) {
-        const rowKey = String(rowKeyGen(row));
-        const storedHeight = autoRowHeightMap.get(rowKey);
+    function getAutoRowHeight(row?: DT) {
+        if (!row) return;
+        const rowKey = rowKeyGen(row);
+        const storedHeight = autoRowHeightMap.get(String(rowKey));
         if (storedHeight) {
             return storedHeight;
         }
-        const expectedHeight = props.autoRowHeight?.expectedHeight;
+        const expectedHeight: AutoRowHeightConfig<DT>['expectedHeight'] = props.autoRowHeight?.expectedHeight;
         if (expectedHeight) {
             if (typeof expectedHeight === 'function') {
                 return expectedHeight(row);
@@ -248,24 +271,11 @@ export function useVirtualScroll<DT extends Record<string, any>>({
                 return expectedHeight;
             }
         }
-        return props.rowHeight || DEFAULT_ROW_HEIGHT;
-    }
-
-    function createGetRowHeightFn(): (row: DT) => number {
-        if (props.autoRowHeight) {
-            return (row: DT) => getAutoRowHeight(row);
-        }
-        if (hasExpandCol.value) {
-            const { rowHeight } = virtualScroll.value;
-            const expandedRowHeight: number = props.expandConfig?.height || rowHeight;
-            return (row: DT) => (row.__EXPANDED_ROW__ ? expandedRowHeight : rowHeight);
-        }
-        return () => props.rowHeight || (DEFAULT_ROW_HEIGHT as number);
     }
 
     /** 通过滚动条位置，计算虚拟滚动的参数 */
     function updateVirtualScrollY(sTop = 0) {
-        const { rowHeight, pageSize, scrollTop, startIndex: oldStartIndex, endIndex: oldEndIndex } = virtualScroll.value;
+        const { pageSize, scrollTop, startIndex: oldStartIndex, endIndex: oldEndIndex } = virtualScroll.value;
         // 先更新滚动条位置记录，其他地方有依赖。(stripe 时ArrowUp/Down滚动依赖)
         virtualScroll.value.scrollTop = sTop;
 
@@ -275,11 +285,11 @@ export function useVirtualScroll<DT extends Record<string, any>>({
         }
 
         const dataSourceCopyTemp = dataSourceCopy.value;
+        const rowHeight = getRowHeightFn.value(dataSourceCopyTemp[0]);
         const { autoRowHeight, stripe, optimizeVue2Scroll } = props;
 
         let startIndex = 0;
         let autoRowHeightTop = 0;
-        let getRowHeight: ReturnType<typeof createGetRowHeightFn> | null = null;
         const dataLength = dataSourceCopyTemp.length;
 
         if (autoRowHeight || hasExpandCol.value) {
@@ -291,12 +301,10 @@ export function useVirtualScroll<DT extends Record<string, any>>({
                 });
             }
 
-            getRowHeight = createGetRowHeightFn();
-
             for (let i = 0; i < dataLength; i++) {
-                const height = getRowHeight(dataSourceCopyTemp[i]);
+                const height = getRowHeightFn.value(dataSourceCopyTemp[i]);
                 autoRowHeightTop += height;
-                if (autoRowHeightTop >= sTop) {
+                if (autoRowHeightTop > sTop) {
                     startIndex = i;
                     autoRowHeightTop -= height;
                     break;
@@ -312,7 +320,7 @@ export function useVirtualScroll<DT extends Record<string, any>>({
             // 斑马纹情况下，每滚动偶数行才加载。防止斑马纹错位。
             startIndex -= 1; // 奇数-1变成偶数
             if (autoRowHeight || hasExpandCol.value) {
-                const height = getRowHeight!(dataSourceCopyTemp[startIndex]);
+                const height = getRowHeightFn.value(dataSourceCopyTemp[startIndex]);
                 autoRowHeightTop -= height;
             }
         }