stk-table-vue 0.6.13 → 0.6.14

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,7 +1089,8 @@ function useVirtualScroll({
   });
   const virtual_offsetBottom = computed(() => {
     if (!virtual_on.value) return 0;
-    const { startIndex, rowHeight } = virtualScroll.value;
+    const { startIndex } = virtualScroll.value;
+    const rowHeight = getRowHeightFn.value();
     return (dataSourceCopy.value.length - startIndex - virtual_dataSourcePart.value.length) * rowHeight;
   });
   const virtualX_on = computed(() => {
@@ -1126,9 +1127,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 +1154,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);
@@ -1180,7 +1193,8 @@ function useVirtualScroll({
   }
   function getAutoRowHeight(row) {
     var _a;
-    const rowKey = String(rowKeyGen(row));
+    if (!row) return;
+    const rowKey = rowKeyGen(row);
     const storedHeight = autoRowHeightMap.get(rowKey);
     if (storedHeight) {
       return storedHeight;
@@ -1193,32 +1207,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,9 +1229,8 @@ 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) {
           startIndex = i;
@@ -1245,7 +1245,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.14",
   "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,7 +107,8 @@ export function useVirtualScroll<DT extends Record<string, any>>({
 
     const virtual_offsetBottom = computed(() => {
         if (!virtual_on.value) return 0;
-        const { startIndex, rowHeight } = virtualScroll.value;
+        const { startIndex } = virtualScroll.value;
+        const rowHeight = getRowHeightFn.value();
         return (dataSourceCopy.value.length - startIndex - virtual_dataSourcePart.value.length) * rowHeight;
     });
 
@@ -162,10 +163,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 +199,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);
@@ -234,13 +246,14 @@ export function useVirtualScroll<DT extends Record<string, any>>({
         autoRowHeightMap.clear();
     }
 
-    function getAutoRowHeight(row: DT) {
-        const rowKey = String(rowKeyGen(row));
+    function getAutoRowHeight(row?: DT) {
+        if (!row) return;
+        const rowKey = rowKeyGen(row);
         const storedHeight = autoRowHeightMap.get(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 +261,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 +275,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,10 +291,8 @@ 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) {
                     startIndex = i;
@@ -312,7 +310,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;
             }
         }