stk-table-vue 0.6.4 → 0.6.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stk-table-vue",
-  "version": "0.6.4",
+  "version": "0.6.6",
   "description": "Simple realtime virtual table for vue3 and vue2.7",
   "main": "./lib/stk-table-vue.js",
   "types": "./lib/src/StkTable/index.d.ts",
@@ -13,9 +13,10 @@
     "dev": "vite",
     "build": "vite build",
     "test": "vitest",
-    "docs:dev": "vitepress dev docs",
-    "docs:build": "vitepress build docs",
-    "docs:preview": "vitepress preview docs"
+    "docs:dev": "vitepress dev docs-src",
+    "docs:build": "vitepress build docs-src",
+    "docs:preview": "vitepress preview docs-src",
+    "docs:update": "cp -rf ./docs-src/.vitepress/dist/* ./docs"
   },
   "keywords": [
     "virtual table",
@@ -40,6 +41,7 @@
   "license": "MIT",
   "devDependencies": {
     "@types/d3-interpolate": "^3.0.4",
+    "@types/mockjs": "^1.0.10",
     "@types/node": "^20.12.10",
     "@typescript-eslint/eslint-plugin": "^7.7.0",
     "@typescript-eslint/parser": "^7.7.0",
@@ -52,6 +54,8 @@
     "eslint-plugin-vue": "^9.25.0",
     "happy-dom": "^12.10.3",
     "less": "^4.2.0",
+    "mitt": "^3.0.1",
+    "mockjs": "^1.1.0",
     "postcss": "^8.4.47",
     "postcss-discard-comments": "^6.0.2",
     "postcss-preset-env": "^9.5.11",
@@ -60,7 +64,7 @@
     "vite": "^5.4.10",
     "vite-plugin-dts": "^4.3.0",
     "vitepress": "^1.5.0",
-    "vitepress-demo-plugin": "^1.1.1",
+    "vitepress-demo-plugin": "^1.2.2",
     "vitest": "^2.1.3",
     "vue": "^3.5.12",
     "vue-eslint-parser": "^9.4.2"

package/src/StkTable/StkTable.vue

@@ -102,11 +102,11 @@
                             </span>
                             <!-- 列宽拖动handler -->
                             <div
-                                v-if="colResizable && colIndex > 0"
+                                v-if="colResizeOn(col) && colIndex > 0"
                                 class="table-header-resizer left"
                                 @mousedown="e => onThResizeMouseDown(e, col, true)"
                             ></div>
-                            <div v-if="colResizable" class="table-header-resizer right" @mousedown="e => onThResizeMouseDown(e, col)"></div>
+                            <div v-if="colResizeOn(col)" class="table-header-resizer right" @mousedown="e => onThResizeMouseDown(e, col)"></div>
                         </div>
                     </th>
                     <!-- 这个th用于横向虚拟滚动表格右边距 width、maxWidth 用于兼容低版本浏览器-->
@@ -139,7 +139,8 @@
                         'expanded-row': row && row.__EXPANDED_ROW__,
                     }"
                     :style="{
-                        '--row-height': row && row.__EXPANDED_ROW__ && virtual_on && props.expandConfig?.height && props.expandConfig?.height + 'px',
+                        '--row-height':
+                            row && row.__EXPANDED_ROW__ && props.virtual && props.expandConfig?.height && props.expandConfig?.height + 'px',
                     }"
                     @click="e => onRowClick(e, row)"
                     @dblclick="e => onRowDblclick(e, row)"
@@ -226,6 +227,7 @@
         <div v-if="(!dataSourceCopy || !dataSourceCopy.length) && showNoData" class="stk-table-no-data" :class="{ 'no-data-full': noDataFull }">
             <slot name="empty">暂无数据</slot>
         </div>
+        <slot name="customBottom"></slot>
     </div>
 </template>
 
@@ -253,6 +255,7 @@ import {
     StkTableColumn,
     TagType,
     UniqKeyProp,
+    ColResizableConfig,
 } from './types/index';
 import { useAutoResize } from './useAutoResize';
 import { useColResize } from './useColResize';
@@ -354,7 +357,7 @@ const props = withDefaults(
          * 列宽拖动时，每一列都必须要有width，且minWidth/maxWidth不生效。table width会变为"fit-content"。
          * - 会自动更新props.columns中的with属性
          */
-        colResizable?: boolean;
+        colResizable?: boolean | ColResizableConfig<DT>;
         /** 可拖动至最小的列宽 */
         colMinWidth?: number;
         /**
@@ -385,7 +388,7 @@ const props = withDefaults(
         seqConfig?: SeqConfig;
         /** 展开行配置 */
         expandConfig?: ExpandConfig;
-        /** 列拖动配置 */
+        /** 行拖动配置 */
         dragRowConfig?: DragRowConfig;
         /**
          * 固定头，固定列实现方式。(非响应式)
@@ -747,10 +750,10 @@ const { fixedCols, fixedColClassMap, updateFixedShadow } = useFixedCol({
     getFixedColPosition,
     tableContainerRef,
     tableHeaders,
-    tableHeaderLast,
+    tableHeadersForCalc,
 });
 
-const { isColResizing, onThResizeMouseDown } = useColResize({
+const { isColResizing, onThResizeMouseDown, colResizeOn } = useColResize({
     props,
     emits,
     colKeyGen,
@@ -1286,6 +1289,7 @@ function setSelectedCell(row?: DT, col?: StkTableColumn<DT>, option = { silent:
  * @param option.sort 是否触发排序-默认true
  * @param option.silent 是否禁止触发回调-默认true
  * @param option.force 是否触发排序-默认true
+ * @return 表格数据
  */
 function setSorter(colKey: string, order: Order, option: { sortOption?: SortOption<DT>; force?: boolean; silent?: boolean; sort?: boolean } = {}) {
     const newOption = { silent: true, sortOption: null, sort: true, ...option };
@@ -1323,7 +1327,10 @@ function getTableData() {
     return toRaw(dataSourceCopy.value);
 }
 
-/** get current sort info */
+/**
+ * get current sort info
+ * @return {{key:string,order:Order}[]}
+ */
 function getSortColumns() {
     const sortOrder = sortSwitchOrder[sortOrderIndex.value];
     if (!sortOrder) return [];

package/src/StkTable/index.ts

@@ -1,4 +1,4 @@
 export { default as StkTable } from './StkTable.vue';
-export { tableSort, insertToOrderedArray, strCompare } from './utils';
+export { tableSort, insertToOrderedArray, strCompare, binarySearch } from './utils';
 export type { StkTableColumn } from './types/index';
 import './style.less';

package/src/StkTable/style.less

@@ -50,9 +50,6 @@
     flex-direction: column;
     box-sizing: border-box;
 
-    /* 下面border用于表格内容不满高度时，绘制表格边界线 */
-    background-image: var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
-
     /**深色模式 */
     &.dark {
         --th-bgc: #202029;
@@ -85,17 +82,20 @@
         /* ⭐这里加background-color会导致表格出滚动白屏*/
         color: #d1d1e0;
     }
+       
 
     &.headless {
-        border-top: 1px solid var(--border-color);
-        background-image: var(--bg-border-right), var(--bg-border-bottom);
+        &.border {
+            border-top: 1px solid var(--border-color);
+            background-image: var(--bg-border-right), var(--bg-border-bottom);
+        }
     }
 
     /* 调整列宽的话，表格宽度应当自适应 */
     &.col-resizable {
         .stk-table-main {
-            width: fit-content !important;
-            min-width: min-content !important;
+            width: fit-content;
+            min-width: min-content;
         }
     }
 
@@ -115,6 +115,8 @@
         * - sticky 定位方案需要占用位置。高度为0。
         */
         border-left: 1px solid var(--border-color);
+        /* 下面border用于表格内容不满高度时，绘制表格边界线 */
+        background-image: var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
 
         th,
         td {
@@ -155,17 +157,18 @@
             background-color: var(--stripe-bgc);
         }
 
-        &.row-hover .stk-tbody-main tr:hover {
+        &.row-hover .stk-table-main .stk-tbody-main tr:hover {
             background-color: var(--tr-hover-bgc);
         }
 
-        &.row-active .stk-tbody-main tr.active {
+        &.row-active .stk-table-main .stk-tbody-main tr.active {
             background-color: var(--tr-active-bgc);
         }
     }
 
 
-    &.row-hover .stk-tbody-main tr:hover {
+    /** more weight for custom row background*/
+    &.row-hover .stk-table-main .stk-tbody-main tr:hover {
         background-color: var(--tr-hover-bgc);
     }
 
@@ -213,6 +216,10 @@
         .table-header-cell-wrapper {
             overflow: hidden;
             max-height: calc(var(--header-row-height) * var(--row-span, 1));
+
+            .table-header-title {
+                max-height: inherit;
+            }
         }
 
         tbody td {
@@ -379,8 +386,7 @@
     .expand-cell {
         cursor: pointer;
 
-        .table-cell-wrapper {
-            &.expanded-cell-wrapper {
+            .expanded-cell-wrapper {
                 &::before {
                     content: '';
                     display: inline-block;
@@ -397,7 +403,6 @@
                     margin-left: var(--cell-padding-x)
                 }
             }
-        }
 
         &.expanded {
             .table-cell-wrapper::before {

package/src/StkTable/types/index.ts

@@ -200,6 +200,7 @@ export type SeqConfig = {
 
 /** Configuration options for the expand column  */
 export type ExpandConfig = {
+    /** worked in virtual mode */
     height?: number;
 };
 
@@ -232,3 +233,7 @@ export type AutoRowHeightConfig<DT> = {
     /** Estimated row height */
     expectedHeight?: number | ((row: DT, index: number) => number);
 };
+
+export type ColResizableConfig<DT extends Record<string, any>> = {
+    disabled: (col: StkTableColumn<DT>) => boolean;
+};

package/src/StkTable/useColResize.ts

@@ -1,4 +1,4 @@
-import { ComputedRef, Ref, ShallowRef, onBeforeUnmount, onMounted, ref } from 'vue';
+import { ComputedRef, Ref, ShallowRef, computed, onBeforeUnmount, onMounted, ref } from 'vue';
 import { StkTableColumn, UniqKey } from './types';
 import { getCalculatedColWidth } from './utils/constRefUtils';
 
@@ -47,6 +47,14 @@ export function useColResize<DT extends Record<string, any>>({
         revertMoveX: false,
     };
 
+    /** 是否可拖动 */
+    const colResizeOn = computed(() => {
+        if (Object.prototype.toString.call(props.colResizable) === '[object Object]') {
+            return (col: StkTableColumn<DT>) => !props.colResizable.disabled(col);
+        }
+        return () => props.colResizable;
+    });
+
     onMounted(() => {
         initColResizeEvent();
     });
@@ -93,7 +101,7 @@ export function useColResize<DT extends Record<string, any>>({
                 // 对于固定右侧的列，拖动左侧的把，需要反向计算
                 revertMoveX = true;
             } else {
-                // 默认拖动右侧的把，取上一列
+                // 取上一列
                 if (colIndex - 1 >= 0) {
                     col = tableHeaderLastValue[colIndex - 1];
                 }
@@ -198,6 +206,7 @@ export function useColResize<DT extends Record<string, any>>({
     }
 
     return {
+        colResizeOn,
         isColResizing,
         onThResizeMouseDown,
     };

package/src/StkTable/useFixedCol.ts

@@ -8,7 +8,7 @@ type Params<T extends Record<string, any>> = {
     colKeyGen: ComputedRef<(col: StkTableColumn<T>) => UniqKey>;
     getFixedColPosition: ComputedRef<(col: StkTableColumn<T>) => number>;
     tableHeaders: ShallowRef<StkTableColumn<T>[][]>;
-    tableHeaderLast: ShallowRef<StkTableColumn<T>[]>;
+    tableHeadersForCalc: ShallowRef<StkTableColumn<T>[][]>;
     tableContainerRef: Ref<HTMLDivElement | undefined>;
 };
 
@@ -21,7 +21,7 @@ export function useFixedCol<DT extends Record<string, any>>({
     colKeyGen,
     getFixedColPosition,
     tableHeaders,
-    tableHeaderLast,
+    tableHeadersForCalc,
     tableContainerRef,
 }: Params<DT>) {
     /** 保存需要出现阴影的列 */
@@ -56,27 +56,26 @@ export function useFixedCol<DT extends Record<string, any>>({
      * @param type 1-shadow（阴影） 2-active(被固定的列)
      *
      */
-    function getColAndParentCols(col: StkTableColumn<DT> | null, type: 1 | 2 = 1) {
-        if (!col) return [];
-        const colsTemp: StkTableColumn<DT>[] = [];
-        let node: any = { __PARENT__: col };
-        while ((node = node.__PARENT__)) {
-            if (type === 1 && node.fixed) {
-                // shadow
-                colsTemp.push(node);
-            }
-            if (type === 2) {
-                // active
-                colsTemp.push(node);
-            }
-        }
-        return colsTemp;
-    }
+    // function getColAndParentCols(col: StkTableColumn<DT> | null, type: 1 | 2 = 1) {
+    //     if (!col) return [];
+    //     const colsTemp: StkTableColumn<DT>[] = [];
+    //     let node: any = { __PARENT__: col };
+    //     while ((node = node.__PARENT__)) {
+    //         if (type === 1 && node.fixed) {
+    //             // shadow
+    //             colsTemp.push(node);
+    //         }
+    //         if (type === 2) {
+    //             // active
+    //             colsTemp.push(node);
+    //         }
+    //     }
+    //     return colsTemp;
+    // }
 
     /** 滚动条变化时，更新需要展示阴影的列 */
     function updateFixedShadow(virtualScrollX?: Ref<VirtualScrollXStore>) {
         const fixedColsTemp: StkTableColumn<DT>[] = [];
-        const fixedShadowColsTemp: (StkTableColumn<DT> | null)[] = [];
         let clientWidth, /* scrollWidth, */ scrollLeft;
 
         if (virtualScrollX?.value) {
@@ -95,31 +94,38 @@ export function useFixedCol<DT extends Record<string, any>>({
          * 根据横向滚动位置，计算出哪个列需要展示阴影
          *****/
         /** 左侧需要展示阴影的列 */
-        let leftShadowCol: StkTableColumn<DT> | null = null;
+        const leftShadowCol: StkTableColumn<DT>[] = [];
         /** 右侧展示阴影的列 */
-        let rightShadowCol: StkTableColumn<DT> | null = null;
-        let left = 0;
-        /**
-         * 左侧第n个fixed:left 计算要加上前面所有left 的列宽。
-         */
-        tableHeaderLast.value.forEach(col => {
-            const position = getFixedColPosition.value(col);
-            if (col.fixed === 'left' && position + scrollLeft > left) {
-                leftShadowCol = col;
-                fixedColsTemp.push(...getColAndParentCols(col, 2));
-            }
-            left += getCalculatedColWidth(col);
-            if (!rightShadowCol && col.fixed === 'right' && scrollLeft + clientWidth - left < position) {
-                rightShadowCol = col;
-            }
-            if (rightShadowCol && col.fixed === 'right') {
-                fixedColsTemp.push(...getColAndParentCols(col, 2));
-            }
+        const rightShadowCol: StkTableColumn<DT>[] = [];
+        tableHeadersForCalc.value.forEach((row, level) => {
+            /**
+             * 左侧第n个fixed:left 计算要加上前面所有left 的列宽。
+             */
+            let left = 0;
+            row.forEach(col => {
+                const position = getFixedColPosition.value(col);
+                const isFixedLeft = col.fixed === 'left';
+                const isFixedRight = col.fixed === 'right';
+
+                if (isFixedLeft && position + scrollLeft > left) {
+                    fixedColsTemp.push(col);
+                    leftShadowCol[level] = col;
+                }
+
+                left += getCalculatedColWidth(col);
+
+                if (isFixedRight && scrollLeft + clientWidth - left < position) {
+                    fixedColsTemp.push(col);
+                    // 右固定列阴影，只要第一列
+                    if (!rightShadowCol[level]) {
+                        rightShadowCol[level] = col;
+                    }
+                }
+            });
         });
 
         if (props.fixedColShadow) {
-            fixedShadowColsTemp.push(...getColAndParentCols(leftShadowCol), ...getColAndParentCols(rightShadowCol));
-            fixedShadowCols.value = (fixedShadowColsTemp as (StkTableColumn<DT> | null)[]).filter(Boolean) as StkTableColumn<DT>[];
+            fixedShadowCols.value = [...leftShadowCol, ...rightShadowCol].filter(Boolean) as StkTableColumn<DT>[];
         }
 
         fixedCols.value = fixedColsTemp;

package/src/StkTable/useHighlight.ts

@@ -89,7 +89,7 @@ export function useHighlight({ props, stkTableId, tableContainerRef }: Params) {
                         const { ts, duration } = store;
                         const timeOffset = nowTs - ts;
                         if (nowTs - ts < duration) {
-                            updateRowBgc(rowKeyValue, store, timeOffset);
+                            updateRowAnimation(rowKeyValue, store, timeOffset);
                         } else {
                             highlightDimRowsAnimation.delete(rowKeyValue);
                         }
@@ -197,7 +197,7 @@ export function useHighlight({ props, stkTableId, tableContainerRef }: Params) {
                     const rowKeyValue = rowKeyValues[i];
                     const store: HighlightDimRowStore = { ts: nowTs, visible: false, keyframe, duration };
                     highlightDimRowsAnimation.set(rowKeyValue, store);
-                    updateRowBgc(rowKeyValue, store, 0);
+                    updateRowAnimation(rowKeyValue, store, 0);
                 }
                 calcRowHighlightLoop();
             } else {
@@ -279,7 +279,7 @@ export function useHighlight({ props, stkTableId, tableContainerRef }: Params) {
      * @param store highlightDimRowStore 的引用对象
      * @param timeOffset 距动画开始经过的时长
      */
-    function updateRowBgc(rowKeyValue: UniqKey, store: HighlightDimRowStore, timeOffset: number) {
+    function updateRowAnimation(rowKeyValue: UniqKey, store: HighlightDimRowStore, timeOffset: number) {
         const rowEl = document.getElementById(stkTableId + '-' + String(rowKeyValue));
         const { visible, keyframe, duration: initialDuration } = store;
         if (!rowEl) {

package/src/StkTable/useThDrag.ts

@@ -1,5 +1,6 @@
 import { computed, ComputedRef } from 'vue';
 import { StkTableColumn, UniqKey } from './types';
+import { isEmptyValue } from './utils';
 
 type Params<T extends Record<string, any>> = {
     props: any;
@@ -57,7 +58,6 @@ export function useThDrag<DT extends Record<string, any>>({ props, emits, colKey
         const th = findParentTH(e);
         if (!th) return;
         const dragStartKey = e.dataTransfer?.getData('text');
-
         if (dragStartKey !== th.dataset.colKey) {
             handleColOrderChange(dragStartKey, th.dataset.colKey);
         }
@@ -66,7 +66,7 @@ export function useThDrag<DT extends Record<string, any>>({ props, emits, colKey
 
     /** 列拖动交换顺序 */
     function handleColOrderChange(dragStartKey: string | undefined, dragEndKey: string | undefined) {
-        if (!dragStartKey || !dragEndKey) return;
+        if (isEmptyValue(dragStartKey) || isEmptyValue(dragEndKey)) return;
 
         if (dragConfig.value.mode !== 'none') {
             const columns = [...props.columns];

package/src/StkTable/useVirtualScroll.ts

@@ -79,6 +79,8 @@ export function useVirtualScroll<DT extends Record<string, any>>({
         scrollHeight: 0,
     });
 
+    // TODO: init pageSize
+
     const virtualScrollX = ref<VirtualScrollXStore>({
         containerWidth: 0,
         scrollWidth: 0,
@@ -88,6 +90,10 @@ export function useVirtualScroll<DT extends Record<string, any>>({
         scrollLeft: 0,
     });
 
+    const hasExpandCol = computed(() => {
+        return tableHeaderLast.value.some(col => col.type === 'expand');
+    });
+
     /** 是否虚拟滚动标志 */
     const virtual_on = computed(() => {
         return props.virtual && dataSourceCopy.value.length > virtualScroll.value.pageSize * 2;
@@ -198,10 +204,9 @@ export function useVirtualScroll<DT extends Record<string, any>>({
             const headerToBodyRowHeightCount = Math.floor(headerHeight / rowHeight);
             pageSize -= headerToBodyRowHeightCount; //减去表头行数
         }
-        /** 最大的scrollTop */
         const maxScrollTop = dataSourceCopy.value.length * rowHeight + tableHeaderHeight.value - containerHeight;
         if (scrollTop > maxScrollTop) {
-            /** 用于修复： 滚动条不在顶部时，表格数据变少，导致滚动条位置有误 */
+            /** fix： 滚动条不在顶部时，表格数据变少，导致滚动条位置有误 */
             scrollTop = maxScrollTop;
         }
         Object.assign(virtualScroll.value, { containerHeight, pageSize, scrollHeight });
@@ -237,7 +242,8 @@ export function useVirtualScroll<DT extends Record<string, any>>({
         let expectedHeight;
         if (storedHeight) {
             return storedHeight;
-        } else if ((expectedHeight = props.autoRowHeight?.expectedHeight)) {
+        }
+        if ((expectedHeight = props.autoRowHeight?.expectedHeight)) {
             if (typeof expectedHeight === 'function') {
                 return expectedHeight(row);
             } else {
@@ -247,6 +253,18 @@ export function useVirtualScroll<DT extends Record<string, any>>({
         return props.rowHeight || DEFAULT_ROW_HEIGHT;
     };
 
+    const 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;
@@ -257,24 +275,32 @@ export function useVirtualScroll<DT extends Record<string, any>>({
         if (!virtual_on.value) {
             return;
         }
+
+        const dataSourceCopyTemp = dataSourceCopy.value;
         const { autoRowHeight, stripe, optimizeVue2Scroll } = props;
 
         let startIndex = 0;
-
         let autoRowHeightTop = 0;
-        if (autoRowHeight) {
-            trRef.value?.forEach(tr => {
-                const { rowKey } = tr.dataset;
-                if (!rowKey || autoRowHeightMap.has(rowKey)) return;
-                autoRowHeightMap.set(rowKey, tr.offsetHeight);
-            });
-
-            for (let i = 0; i < dataSourceCopy.value.length; i++) {
-                const height = getAutoRowHeight(dataSourceCopy.value[i]);
+        let getRowHeight: ReturnType<typeof createGetRowHeightFn> | null = null;
+        const dataLength = dataSourceCopyTemp.length;
+
+        if (autoRowHeight || hasExpandCol.value) {
+            if (autoRowHeight) {
+                trRef.value?.forEach(tr => {
+                    const { rowKey } = tr.dataset;
+                    if (!rowKey || autoRowHeightMap.has(rowKey)) return;
+                    autoRowHeightMap.set(rowKey, tr.offsetHeight);
+                });
+            }
+
+            getRowHeight = createGetRowHeightFn();
+
+            for (let i = 0; i < dataLength; i++) {
+                const height = getRowHeight(dataSourceCopyTemp[i]);
                 autoRowHeightTop += height;
                 if (autoRowHeightTop >= sTop) {
                     startIndex = i;
-                    autoRowHeightTop = autoRowHeightTop - height;
+                    autoRowHeightTop -= height;
                     break;
                 }
             }
@@ -287,8 +313,8 @@ export function useVirtualScroll<DT extends Record<string, any>>({
         if (stripe && startIndex > 0 && startIndex % 2) {
             // 斑马纹情况下，每滚动偶数行才加载。防止斑马纹错位。
             startIndex -= 1; // 奇数-1变成偶数
-            if (autoRowHeight) {
-                const height = getAutoRowHeight(dataSourceCopy.value[startIndex]);
+            if (autoRowHeight || hasExpandCol.value) {
+                const height = getRowHeight!(dataSourceCopyTemp[startIndex]);
                 autoRowHeightTop -= height;
             }
         }
@@ -296,7 +322,7 @@ export function useVirtualScroll<DT extends Record<string, any>>({
         startIndex = Math.max(0, startIndex);
 
         // 溢出修正
-        endIndex = Math.min(endIndex, dataSourceCopy.value.length);
+        endIndex = Math.min(endIndex, dataLength);
 
         if (startIndex >= endIndex) {
             // 兜底，不一定会执行到这里
@@ -308,7 +334,7 @@ export function useVirtualScroll<DT extends Record<string, any>>({
         }
 
         let offsetTop = 0;
-        if (autoRowHeight) {
+        if (autoRowHeight || hasExpandCol.value) {
             offsetTop = autoRowHeightTop;
         } else {
             if (oldStartIndex === startIndex && oldEndIndex === endIndex) {