stk-table-vue 1.2.0 → 1.2.2

package/lib/style.css

@@ -1,11 +1,170 @@
 /**
  * name: stk-table-vue
- * version: v1.2.0
+ * version: v1.2.2
  * description: High performance realtime virtual table for vue3 and vue2.7
  * author: japlus
  * homepage: https://ja-plus.github.io/stk-table-vue/
  * license: MIT
  */
+.stk-table.header-text-overflow .stk-filter > span{
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
+.stk-filter{
+  display:inline-flex;
+  align-items:center;
+  gap:4px;
+  cursor:pointer;
+  flex:1;
+  min-width:0;
+}
+.stk-filter--light{
+  --icon-active-color:#1b63d9;
+  --icon-hover-color:#1890ff;
+}
+.stk-filter--dark{
+  --icon-active-color:#1b63d9;
+  --icon-hover-color:#4f8df4;
+}
+.stk-filter.stk-filter--active .stk-filter-icon{
+  color:var(--icon-active-color);
+}
+.stk-filter > span{
+  flex:1;
+  min-width:0;
+  overflow:hidden;
+}
+.stk-filter .stk-filter-icon{
+  display:inline-flex;
+  width:16px;
+  height:16px;
+  cursor:pointer;
+  opacity:0.6;
+  transition:opacity 0.2s;
+  flex-shrink:0;
+}
+.stk-filter .stk-filter-icon:hover{
+  opacity:1;
+  color:var(--icon-hover-color);
+}
+.stk-filter-dropdown{
+  --border-color:#303439;
+  --btn-hover-color:#2a2f34;
+  --bg-color:#181c21;
+  --text-color:rgba(255, 255, 255, 0.85);
+  --cell-hover-color:#2a2f34;
+  position:absolute;
+  width:120px;
+  max-height:200px;
+  background-color:#181c21;
+  background-color:var(--bg-color);
+  border:1px solid #303439;
+  border:1px solid var(--border-color);
+  border-radius:4px;
+  box-shadow:0 2px 4px rgba(0, 0, 0, 0.1);
+  z-index:1000;
+  display:flex;
+  flex-direction:column;
+  color:rgba(255, 255, 255, 0.85);
+  color:var(--text-color);
+}
+.stk-filter-dropdown--light{
+  --border-color:#e8e8e8;
+  --btn-hover-color:#f5f5f5;
+  --bg-color:#ffffff;
+  --text-color:rgba(0, 0, 0, 0.85);
+  --cell-hover-color:#fafafa;
+  box-shadow:0 2px 8px rgba(0, 0, 0, 0.15);
+}
+.stk-filter-dropdown > .stk-table{
+  --cell-padding-x:4px;
+  padding:8px 0;
+  flex:1;
+  min-height:0;
+}
+.stk-filter-dropdown > .stk-table tr{
+  cursor:pointer;
+}
+.stk-filter-dropdown .stk-filter-dropdown-checkbox{
+  text-align:center;
+}
+.stk-filter-dropdown .stk-filter-dropdown-checkbox > [type='checkbox']{
+  vertical-align:middle;
+}
+.stk-filter-dropdown footer{
+  display:flex;
+  border-top:1px solid var(--border-color);
+}
+.stk-filter-dropdown footer button{
+  flex:1;
+  cursor:pointer;
+  background:transparent;
+  border:none;
+  color:var(--text-color);
+}
+.stk-filter-dropdown footer button:first-child{
+  border-right:1px solid var(--border-color);
+}
+.stk-filter-dropdown footer button:hover{
+  background-color:var(--btn-hover-color);
+}
+.stk-editable-cell{
+  height:100%;
+  display:flex;
+  align-items:center;
+  cursor:default;
+  min-width:0;
+}
+.stk-editable-cell-input{
+  width:100%;
+  font-size:inherit;
+  line-height:inherit;
+  font-family:inherit;
+  box-sizing:border-box;
+  outline:none;
+  padding:0 4px;
+  border:none;
+  background:transparent;
+}
+.stk-checkbox-cell{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  width:100%;
+  height:100%;
+}
+.stk-checkbox-cell .stk-checkbox-native{
+  width:16px;
+  height:16px;
+  cursor:pointer;
+  vertical-align:middle;
+}
+.stk-change-cell{
+  --stk-change-red:#e02020;
+  --stk-change-green:#00a870;
+  --stk-change-flat:#666;
+  display:inline-flex;
+  align-items:center;
+  gap:2px;
+}
+.stk-change-cell--red{
+  color:var(--stk-change-red);
+}
+.stk-change-cell--green{
+  color:var(--stk-change-green);
+}
+.stk-change-cell--flat{
+  color:var(--stk-change-flat);
+}
+.stk-change-cell__arrow{
+  font-size:0.85em;
+  line-height:1;
+}
+.stk-table.dark .stk-change-cell{
+  --stk-change-red:#ff5c5c;
+  --stk-change-green:#26c281;
+  --stk-change-flat:#aaa;
+}
 @keyframes stk-table-dim{
   from{
     background-color:var(--highlight-color);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stk-table-vue",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "description": "High performance realtime virtual table for vue3 and vue2.7",
   "main": "./lib/stk-table-vue.js",
   "types": "./lib/src/StkTable/index.d.ts",
@@ -19,7 +19,7 @@
     "test": "test"
   },
   "type": "module",
-  "sideEffects": false,
+  "sideEffects": ["./src/**", "./lib/**/*.css"],
   "scripts": {
     "dev": "vite",
     "build": "vite build",

package/src/StkTable/StkTable.vue

@@ -882,6 +882,7 @@ const [sortStates, sortCol, onColumnSort, setSorter, resetSorter, getSortColumns
     tableHeaderLast,
     dataSourceCopy,
     initDataSource,
+    onDataSourceChange,
 );
 
 const [isSRBRActive] = useScrollRowByRow(props, tableContainerRef);
@@ -936,6 +937,7 @@ const [
     getMaxRowSpanValue,
     scrollbarOptions,
     isExperimentalScrollY,
+    isRelativeMode,
     mergeCellsCache,
 );
 
@@ -1219,6 +1221,8 @@ onMounted(() => {
 });
 
 async function onDataSourceChange() {
+    // 数据顺序/行数变化后重算 rowspan 映射（排序后 mergeCells 的 rowIndex 会变化）
+    updateMaxRowSpan();
     await nextTick();
     initVirtualScrollY();
     updateCustomScrollbar();
@@ -1250,6 +1254,9 @@ function setFilter(
     filterStatus.value = status;
     if (!option?.remote) {
         initDataSource();
+        // #80：筛选改变 dataSourceCopy 后重算虚拟滚动窗口，
+        // 否则残留 startIndex/endIndex/scrollHeight 会导致只渲染 1 行或空白视口
+        onDataSourceChange();
     }
     if (!option?.silent) {
         emits('filter-change', status);
@@ -1525,14 +1532,16 @@ function getTHProps(col: PrivateStkTableColumn<DT>) {
         colspan: col.__C_SP__,
         style: cellStyleMap.value[TagType.TH].get(colKey),
         title: getHeaderTitle(col),
+        // class 用预拼接字符串（而非数组），降低每格 vnode diff 与 GC 开销
         class: [
             col.sorter ? 'sortable' : '',
-            isSorted && 'sorter-' + sortState?.order,
+            isSorted ? 'sorter-' + sortState?.order : '',
             col.headerClassName,
             fixedColClassMap.value.get(colKey),
-            col.headerAlign &&
-                (col.headerAlign === 'left' ? 'text-l' : col.headerAlign === 'right' ? 'text-r' : col.headerAlign === 'center' ? 'text-c' : null),
-        ],
+            col.headerAlign === 'left' ? 'text-l' : col.headerAlign === 'right' ? 'text-r' : col.headerAlign === 'center' ? 'text-c' : '',
+        ]
+            .filter(Boolean)
+            .join(' '),
     };
 }
 
@@ -1546,7 +1555,9 @@ function getTFProps(col: StkTableColumn<DT>) {
             fixedColClassMap.value.get(colKey),
             col.type === 'seq' ? 'seq-column' : '',
             col.align === 'center' ? 'text-c' : col.align === 'right' ? 'text-r' : '',
-        ],
+        ]
+            .filter(Boolean)
+            .join(' '),
     };
 }
 
@@ -1596,7 +1607,7 @@ function getTDProps(row: PrivateRowDT | null | undefined, col: StkTableColumn<Pr
     return {
         'data-col-key': colKey,
         style: cellStyleMap.value[TagType.TD].get(colKey),
-        class: classList,
+        class: classList.filter(Boolean).join(' '),
         ...mergeCellsWrapper(row, col, rowIndex, (col as PrivateStkTableColumn<DT>).__LF_S__ ?? 0),
     };
 }
@@ -2090,7 +2101,8 @@ function scrollTo(options?: ScrollToOptions | number | null, leftArg?: number |
     if (top === null && left === null) return;
     // 钳制到合法滚动范围（基于理论内容尺寸，与滚动条语义一致）
     if (top !== null) top = Math.min(Math.max(top, 0), getMaxScrollTop());
-    if (left !== null) left = Math.min(Math.max(left, 0), Math.max(0, getColLeft(tableHeaderLast.value.length) - virtualScrollX.value.containerWidth));
+    if (left !== null)
+        left = Math.min(Math.max(left, 0), Math.max(0, getColLeft(tableHeaderLast.value.length) - virtualScrollX.value.containerWidth));
     if (options.behavior === 'smooth') {
         smoothScrollTo(top, left);
     } else {

package/src/StkTable/useFixedStyle.ts

@@ -34,8 +34,6 @@ export function useFixedStyle<DT extends Record<string, any>>(
 
         const { headerRowHeight, rowHeight } = props;
         const isFixedLeft = fixed === 'left';
-        const { scrollLeft, scrollWidth, offsetLeft, containerWidth } = virtualScrollX.value;
-        const scrollRight = scrollWidth - containerWidth - scrollLeft;
 
         let style = '';
 
@@ -60,6 +58,8 @@ export function useFixedStyle<DT extends Record<string, any>>(
                     style += `right:${lr};`;
                 }
             } else {
+                const { scrollLeft, scrollWidth, offsetLeft, containerWidth } = virtualScrollX.value;
+                const scrollRight = scrollWidth - containerWidth - scrollLeft;
                 if (isFixedLeft) {
                     style += `left:${scrollLeft - (virtualX_on.value ? offsetLeft : 0)}px;`;
                 } else {

package/src/StkTable/useMergeCells.ts

@@ -48,6 +48,131 @@ export function useMergeCells(
 
     /** column index cache */
     let colIndexCache: Map<UniqKey, number> | null = null;
+    /** 空合并段列表（start 为绝对行索引）。禁止合并时返回共享空数组 */
+    const EMPTY_BLOCKS: { start: number; count: number }[] = [];
+
+    /** 空下方占位段列表。无下方合并行时返回共享空数组 */
+    const EMPTY_SEGMENTS: { count: number }[] = [];
+
+    /**
+     * mergeCellsWrapper 返回值记忆化缓存（WeakMap<行对象, Map<colKey, 结果>>）。
+     * 签名 = 绝对行索引 + 代际（wrapperCacheGen）：窗口/列/视口修正（上方空行段、
+     * 下方占位段、viewportEndIndex、下方行数）任一变化即整体失效。
+     */
+    const wrapperCache = new WeakMap<
+        object,
+        Map<UniqKey, { absRowIndex: number; gen: number; result: { colspan?: number; rowspan?: number } | undefined }>
+    >();
+
+    /** 是否存在合并列（仅依赖列配置，跨滚动帧缓存，不随数据/滚动重算） */
+    const hasMergeColumn = computed(() => tableHeaderLast.value.some(col => !!col.mergeCells));
+
+    /**
+     * 视口上方连续「无 td」空行段（行数 >= 2 才成段；单行保留独立 tr）。
+     * 空行判定与渲染保持一致：aboveViewportColumnMap 中列结果为空且非展开行。
+     * 供模板合并渲染（StkTable aboveRenderParts）与 rowspan 属性修正共用。
+     */
+    const aboveEmptyBlocks = computed<{ start: number; count: number }[]>(() => {
+        if (!canMergeEmptyRows.value) return EMPTY_BLOCKS;
+        const data = virtual_dataSourcePart.value;
+        const { startIndex, viewportStartIndex } = virtualScroll.value;
+        const aboveCount = Math.min(data.length, Math.max(0, viewportStartIndex - startIndex));
+        if (aboveCount <= 0) return EMPTY_BLOCKS;
+        const colMap = aboveViewportColumnMap.value;
+
+        const isEmptyRow = (row: PrivateRowDT): boolean => {
+            // 展开行有独立行高且渲染内容，不能参与合并
+            if (!row || row.__EXP_R__) return false;
+            const cols = colMap.get(rowKeyGen(row));
+            // 仅当映射中明确为空列结果时才算空行；缺失（异常）时保留原渲染
+            return cols !== void 0 && cols.length === 0;
+        };
+
+        const blocks: { start: number; count: number }[] = [];
+        let runStart = -1;
+        const flushRun = (endExclusive: number) => {
+            if (endExclusive - runStart >= 2) {
+                blocks.push({ start: startIndex + runStart, count: endExclusive - runStart });
+            }
+            runStart = -1;
+        };
+        for (let i = 0; i < aboveCount; i++) {
+            if (isEmptyRow(data[i])) {
+                if (runStart < 0) runStart = i;
+                continue;
+            }
+            if (runStart >= 0) flushRun(i);
+        }
+        if (runStart >= 0) flushRun(aboveCount);
+        return blocks.length ? blocks : EMPTY_BLOCKS;
+    });
+
+    /**
+     * 视口下方占位段：把 [viewportEndIndex+1, endIndex] 按跨界 rowspan 的
+     * 去重结束行切分为多段，每段渲染一个占位 tr。
+     *
+     * 单个占位 tr 无法表达多个 rowspan 的不同逻辑结束位置（不规律合并下
+     * 多个单元格会塌缩到同一 tr 底边，滚动时高度跳动）；按结束行切段后，
+     * 每个单元格的修正 rowspan 恰好止于包含其逻辑结束行的段。
+     * 超长 rowspan 场景只有一个结束行（= 区域末端），仍只产生 1 段，不增加 DOM。
+     */
+    const belowPhSegments = computed<{ count: number }[]>(() => {
+        const belowCount = belowViewportRowCount.value;
+        if (belowCount <= 0) return EMPTY_SEGMENTS;
+        const data = virtual_dataSourcePart.value;
+        const { startIndex, viewportEndIndex, endIndex } = virtualScroll.value;
+        // 下方区域末端钳制到窗口最后一行（endIndex 可能超出数据长度）
+        const regionEnd = Math.min(endIndex, startIndex + data.length - 1);
+        const columns = virtualX_columnPart.value;
+
+        // 跨界 rowspan 的锚点只可能在视口上方保留行与视口行内，收集其去重结束行
+        const endsSet = new Set<number>();
+        const anchorRowEnd = Math.min(data.length - 1, viewportEndIndex - startIndex);
+        for (let rowOffset = 0; rowOffset <= anchorRowEnd; rowOffset++) {
+            const row = data[rowOffset];
+            if (!row) continue;
+            const absRowIndex = startIndex + rowOffset;
+            for (let colIdx = 0; colIdx < columns.length; colIdx++) {
+                const col = columns[colIdx];
+                if (!col.mergeCells) continue;
+                const leafIndex = col.__LF_S__ ?? colIdx;
+                const { rowspan } = mergeCellsCache.getMergeCellsResult(row, col, absRowIndex, leafIndex);
+                if (rowspan <= 1) continue;
+                const spanEnd = absRowIndex + rowspan - 1;
+                if (spanEnd > viewportEndIndex) endsSet.add(Math.min(spanEnd, regionEnd));
+            }
+        }
+
+        // 兜底：未收集到跨界结束行时保持单段（与合并前行为一致）
+        if (!endsSet.size) return [{ count: belowCount }];
+
+        const ends = Array.from(endsSet).sort((a, b) => a - b);
+        const segments: { count: number }[] = [];
+        let prev = viewportEndIndex;
+        for (let i = 0; i < ends.length; i++) {
+            const count = ends[i] - prev;
+            if (count > 0) segments.push({ count });
+            prev = ends[i];
+        }
+        if (regionEnd > prev) segments.push({ count: regionEnd - prev });
+        return segments;
+    });
+
+    let wrapperCacheGen = 0;
+
+    watch(
+        [
+            virtual_dataSourcePart,
+            tableHeaderLast,
+            aboveEmptyBlocks,
+            belowPhSegments,
+            () => virtualScroll.value.viewportEndIndex,
+            belowViewportRowCount,
+        ],
+        () => {
+            wrapperCacheGen++;
+        },
+    );
 
     /**
      * 数据/列真正变化时才清空 mergeCells 结果缓存。
@@ -65,9 +190,6 @@ export function useMergeCells(
         buildHiddenCellMap();
     });
 
-    /** 是否存在合并列（仅依赖列配置，跨滚动帧缓存，不随数据/滚动重算） */
-    const hasMergeColumn = computed(() => tableHeaderLast.value.some(col => !!col.mergeCells));
-
     /**
      * Pre-build hiddenCellMap and hoverRowMap before rendering to avoid
      * a two-render cycle (null → populated) that causes visual flicker.
@@ -204,21 +326,34 @@ export function useMergeCells(
         // 渲染传入的是切片内相对索引，统一换算为绝对行索引后再调用 mergeCells，
         // 保证与 buildHiddenCellMap / aboveViewportColumnMap 的入参及缓存键一致
         const absRowIndex = virtualScroll.value.startIndex + rowIndex;
-        const { colspan, rowspan } = mergeCellsCache.getMergeCellsResult(row, col, absRowIndex, colIndex);
-
-        if (colspan === 1 && rowspan === 1) return;
-
-        const rowKey = rowKeyGen(row);
         const colKey = colKeyGen.value(col);
-        const mergedCellKey = pureCellKeyGen(rowKey, colKey);
 
-        for (let i = rowIndex; i < rowIndex + rowspan; i++) {
-            const targetRow = virtual_dataSourcePart.value[i];
-            if (!targetRow) break;
-            hideCells(rowKeyGen(targetRow), colKey, colspan, i === rowIndex, mergedCellKey);
+        // 返回值记忆化：命中时跳过 getMergeCellsResult、rowspan 修正循环与对象分配。
+        // hideCells 为幂等写入（buildHiddenCellMap 已在渲染前按相同输入构建），命中时跳过安全。
+        let rowCache = wrapperCache.get(row);
+        if (!rowCache) {
+            rowCache = new Map();
+            wrapperCache.set(row, rowCache);
         }
+        const hit = rowCache.get(colKey);
+        if (hit && hit.absRowIndex === absRowIndex && hit.gen === wrapperCacheGen) return hit.result;
 
-        return { colspan, rowspan: adjustRowspanForMergedRows(absRowIndex, rowspan) };
+        const { colspan, rowspan } = mergeCellsCache.getMergeCellsResult(row, col, absRowIndex, colIndex);
+
+        let result: { colspan?: number; rowspan?: number } | undefined;
+        if (colspan === 1 && rowspan === 1) {
+            result = void 0;
+        } else {
+            const mergedCellKey = pureCellKeyGen(rowKeyGen(row), colKey);
+            for (let i = rowIndex; i < rowIndex + rowspan; i++) {
+                const targetRow = virtual_dataSourcePart.value[i];
+                if (!targetRow) break;
+                hideCells(rowKeyGen(targetRow), colKey, colspan, i === rowIndex, mergedCellKey);
+            }
+            result = { colspan, rowspan: adjustRowspanForMergedRows(absRowIndex, rowspan) };
+        }
+        rowCache.set(colKey, { absRowIndex, gen: wrapperCacheGen, result });
+        return result;
     }
 
     /**
@@ -383,103 +518,6 @@ export function useMergeCells(
         return map;
     });
 
-    /** 空合并段列表（start 为绝对行索引）。禁止合并时返回共享空数组 */
-    const EMPTY_BLOCKS: { start: number; count: number }[] = [];
-
-    /** 空下方占位段列表。无下方合并行时返回共享空数组 */
-    const EMPTY_SEGMENTS: { count: number }[] = [];
-
-    /**
-     * 视口上方连续「无 td」空行段（行数 >= 2 才成段；单行保留独立 tr）。
-     * 空行判定与渲染保持一致：aboveViewportColumnMap 中列结果为空且非展开行。
-     * 供模板合并渲染（StkTable aboveRenderParts）与 rowspan 属性修正共用。
-     */
-    const aboveEmptyBlocks = computed<{ start: number; count: number }[]>(() => {
-        if (!canMergeEmptyRows.value) return EMPTY_BLOCKS;
-        const data = virtual_dataSourcePart.value;
-        const { startIndex, viewportStartIndex } = virtualScroll.value;
-        const aboveCount = Math.min(data.length, Math.max(0, viewportStartIndex - startIndex));
-        if (aboveCount <= 0) return EMPTY_BLOCKS;
-        const colMap = aboveViewportColumnMap.value;
-
-        const isEmptyRow = (row: PrivateRowDT): boolean => {
-            // 展开行有独立行高且渲染内容，不能参与合并
-            if (!row || row.__EXP_R__) return false;
-            const cols = colMap.get(rowKeyGen(row));
-            // 仅当映射中明确为空列结果时才算空行；缺失（异常）时保留原渲染
-            return cols !== void 0 && cols.length === 0;
-        };
-
-        const blocks: { start: number; count: number }[] = [];
-        let runStart = -1;
-        const flushRun = (endExclusive: number) => {
-            if (endExclusive - runStart >= 2) {
-                blocks.push({ start: startIndex + runStart, count: endExclusive - runStart });
-            }
-            runStart = -1;
-        };
-        for (let i = 0; i < aboveCount; i++) {
-            if (isEmptyRow(data[i])) {
-                if (runStart < 0) runStart = i;
-                continue;
-            }
-            if (runStart >= 0) flushRun(i);
-        }
-        if (runStart >= 0) flushRun(aboveCount);
-        return blocks.length ? blocks : EMPTY_BLOCKS;
-    });
-
-    /**
-     * 视口下方占位段：把 [viewportEndIndex+1, endIndex] 按跨界 rowspan 的
-     * 去重结束行切分为多段，每段渲染一个占位 tr。
-     *
-     * 单个占位 tr 无法表达多个 rowspan 的不同逻辑结束位置（不规律合并下
-     * 多个单元格会塌缩到同一 tr 底边，滚动时高度跳动）；按结束行切段后，
-     * 每个单元格的修正 rowspan 恰好止于包含其逻辑结束行的段。
-     * 超长 rowspan 场景只有一个结束行（= 区域末端），仍只产生 1 段，不增加 DOM。
-     */
-    const belowPhSegments = computed<{ count: number }[]>(() => {
-        const belowCount = belowViewportRowCount.value;
-        if (belowCount <= 0) return EMPTY_SEGMENTS;
-        const data = virtual_dataSourcePart.value;
-        const { startIndex, viewportEndIndex, endIndex } = virtualScroll.value;
-        // 下方区域末端钳制到窗口最后一行（endIndex 可能超出数据长度）
-        const regionEnd = Math.min(endIndex, startIndex + data.length - 1);
-        const columns = virtualX_columnPart.value;
-
-        // 跨界 rowspan 的锚点只可能在视口上方保留行与视口行内，收集其去重结束行
-        const endsSet = new Set<number>();
-        const anchorRowEnd = Math.min(data.length - 1, viewportEndIndex - startIndex);
-        for (let rowOffset = 0; rowOffset <= anchorRowEnd; rowOffset++) {
-            const row = data[rowOffset];
-            if (!row) continue;
-            const absRowIndex = startIndex + rowOffset;
-            for (let colIdx = 0; colIdx < columns.length; colIdx++) {
-                const col = columns[colIdx];
-                if (!col.mergeCells) continue;
-                const leafIndex = col.__LF_S__ ?? colIdx;
-                const { rowspan } = mergeCellsCache.getMergeCellsResult(row, col, absRowIndex, leafIndex);
-                if (rowspan <= 1) continue;
-                const spanEnd = absRowIndex + rowspan - 1;
-                if (spanEnd > viewportEndIndex) endsSet.add(Math.min(spanEnd, regionEnd));
-            }
-        }
-
-        // 兜底：未收集到跨界结束行时保持单段（与合并前行为一致）
-        if (!endsSet.size) return [{ count: belowCount }];
-
-        const ends = Array.from(endsSet).sort((a, b) => a - b);
-        const segments: { count: number }[] = [];
-        let prev = viewportEndIndex;
-        for (let i = 0; i < ends.length; i++) {
-            const count = ends[i] - prev;
-            if (count > 0) segments.push({ count });
-            prev = ends[i];
-        }
-        if (regionEnd > prev) segments.push({ count: regionEnd - prev });
-        return segments;
-    });
-
     function updateActiveMergedCells(clear?: boolean, rowKey?: UniqKey) {
         if (!rowActiveProp.value.enabled) return;
         if (clear) {

package/src/StkTable/useSorter.ts

@@ -13,11 +13,12 @@ const SORT_SWITCH_ORDER: Order[] = [null, 'desc', 'asc'] as const;
  * 排序 Hook
  * 管理表格排序状态和相关操作
  * @param props 表格 props
- * @param colKeyGen 列 key 生成函数
+ * @param colKeyGen 列 key 生成函数 
  * @param tableHeaderLast 表头最后一行（叶子节点）
  * @param dataSourceCopy 数据源副本 ref
  * @param initDataSource 初始化数据源函数
  * @param emits 事件发射函数
+ * @param onDataSourceChange 数据源变化后的刷新回调（重算虚拟滚动等，见 #80）
  * @returns 排序相关状态和方法
  */
 export function useSorter<DT extends Record<string, any>>(
@@ -27,6 +28,7 @@ export function useSorter<DT extends Record<string, any>>(
     tableHeaderLast: Ref<StkTableColumn<DT>[]>,
     dataSourceCopy: Ref<DT[]>,
     initDataSource: (data?: DT[], option?: { forceSort?: boolean }) => void,
+    onDataSourceChange: () => void,
 ) {
     /** 多列排序状态数组 */
     const sortStates = ref<SortState<DT>[]>([]);
@@ -182,6 +184,8 @@ export function useSorter<DT extends Record<string, any>>(
 
         if (!props.sortRemote) {
             initDataSource();
+            // #80：排序后数据窗口需重算，否则残留 startIndex/endIndex 会“吃掉”数据
+            onDataSourceChange();
         }
 
         emits('sort-change', col, order, toRaw(dataSourceCopy.value), sortConfig);
@@ -220,6 +224,8 @@ export function useSorter<DT extends Record<string, any>>(
         if (newOption.sort && dataSourceCopy.value?.length) {
             if (!props.sortRemote || newOption.force) {
                 initDataSource(props.dataSource, { forceSort: newOption.force });
+                // #80：与 onColumnSort 一致，排序后重算虚拟滚动窗口
+                onDataSourceChange();
             }
         }
 
@@ -243,6 +249,8 @@ export function useSorter<DT extends Record<string, any>>(
     function resetSorter() {
         sortStates.value = [];
         initDataSource();
+        // #80：重置后同样重算虚拟滚动窗口
+        onDataSourceChange();
     }
 
     /**