stk-table-vue 0.11.0 → 0.11.2

package/lib/index-t5SJ6KNv.js

@@ -1,6 +1,6 @@
 /**
  * name: stk-table-vue
- * version: v0.11.0-beta.4
+ * version: v0.11.2
  * description: High performance realtime virtual table for vue3 and vue2.7
  * author: japlus
  * homepage: https://ja-plus.github.io/stk-table-vue/

package/lib/src/StkTable/features/useAreaSelection.d.ts

@@ -3,8 +3,9 @@ import { CellKeyGen, ColKeyGen, StkTableColumn, UniqKey } from '../types';
 import { VirtualScrollStore, VirtualScrollXStore } from '../useVirtualScroll';
 
 /**
- * 单元格拖拽选区
- * en: Cell drag selection
+ * 单元格区域选择功能
+ * 支持鼠标拖拽选择、键盘导航、复制粘贴等功能
+ * en: Cell area selection feature with mouse drag, keyboard navigation, copy-paste, etc.
  */
 export declare function useAreaSelection<DT extends Record<string, any>>(props: any, emits: any, tableContainerRef: Ref<HTMLDivElement | undefined>, dataSourceCopy: ShallowRef<DT[]>, tableHeaderLast: ShallowRef<StkTableColumn<DT>[]>, colKeyGen: ColKeyGen, cellKeyGen: CellKeyGen, scrollTo: (top: number | null, left: number | null) => void, virtualScroll: Ref<VirtualScrollStore>, virtualScrollX: Ref<VirtualScrollXStore>): {
     isSelecting: Ref<boolean, boolean>;

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

@@ -18,7 +18,7 @@ export type ScrollbarOptions = {
  * @param options 滚动条配置选项
  * @returns 滚动条相关状态和方法
  */
-export declare function useScrollbar(props: any, containerRef: Ref<HTMLDivElement | undefined>, virtualScroll: Ref<VirtualScrollStore>, virtualScrollX: Ref<VirtualScrollXStore>, updateVirtualScrollY: (sTop?: number) => void, scrollbarOptions: Ref<Required<ScrollbarOptions>>): readonly [Ref<{
+export declare function useScrollbar(props: any, containerRef: Ref<HTMLDivElement | undefined>, virtualScroll: Ref<VirtualScrollStore>, virtualScrollX: Ref<VirtualScrollXStore>, updateVirtualScrollY: (sTop?: number) => void, scrollbarOptions: Ref<Required<ScrollbarOptions>>, isExperimentalScrollY: Ref<boolean | undefined>): readonly [Ref<{
     h: number;
     w: number;
     t: number;

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

@@ -41,7 +41,7 @@ export type VirtualScrollXStore = {
  * virtual scroll
  * @returns
  */
-export declare function useVirtualScroll<DT extends Record<string, any>>(props: any, tableContainerRef: Ref<HTMLElement | undefined>, trRef: Ref<HTMLTableRowElement[] | undefined>, dataSourceCopy: ShallowRef<PrivateRowDT[]>, tableHeaderLast: ShallowRef<PrivateStkTableColumn<PrivateRowDT>[]>, tableHeaders: ShallowRef<PrivateStkTableColumn<PrivateRowDT>[][]>, rowKeyGen: RowKeyGen, maxRowSpan: Map<UniqKey, number>, scrollbarOptions: Ref<Required<ScrollbarOptions>>): readonly [Ref<{
+export declare function useVirtualScroll<DT extends Record<string, any>>(props: any, tableContainerRef: Ref<HTMLElement | undefined>, trRef: Ref<HTMLTableRowElement[] | undefined>, dataSourceCopy: ShallowRef<PrivateRowDT[]>, tableHeaderLast: ShallowRef<PrivateStkTableColumn<PrivateRowDT>[]>, tableHeaders: ShallowRef<PrivateStkTableColumn<PrivateRowDT>[][]>, rowKeyGen: RowKeyGen, maxRowSpan: Map<UniqKey, number>, scrollbarOptions: Ref<Required<ScrollbarOptions>>, isExperimentalScrollY: Ref<boolean | undefined>): readonly [Ref<{
     containerHeight: number;
     pageSize: number;
     startIndex: number;

package/lib/stk-table-vue.js

@@ -1,6 +1,6 @@
 /**
  * name: stk-table-vue
- * version: v0.11.0-beta.4
+ * version: v0.11.2
  * description: High performance realtime virtual table for vue3 and vue2.7
  * author: japlus
  * homepage: https://ja-plus.github.io/stk-table-vue/
@@ -338,6 +338,19 @@ function useAreaSelection(props, emits, tableContainerRef, dataSourceCopy, table
   const EDGE_ZONE = 40;
   const SCROLL_SPEED_MAX = 15;
   const POINT_EDGE_OFFSET = 2;
+  const KEY_ARROW_UP = "ArrowUp";
+  const KEY_ARROW_DOWN = "ArrowDown";
+  const KEY_ARROW_LEFT = "ArrowLeft";
+  const KEY_ARROW_RIGHT = "ArrowRight";
+  const KEY_TAB = "Tab";
+  const KEY_ESCAPE = "Escape";
+  const KEY_ESC = "Esc";
+  const KEY_C = "c";
+  const CELL_RANGE_SELECTED = "cell-range-selected";
+  const CELL_RANGE_TOP = "cell-range-t";
+  const CELL_RANGE_BOTTOM = "cell-range-b";
+  const CELL_RANGE_LEFT = "cell-range-l";
+  const CELL_RANGE_RIGHT = "cell-range-r";
   const selectionRange = ref(null);
   const isSelecting = ref(false);
   let anchorCell = null;
@@ -352,6 +365,42 @@ function useAreaSelection(props, emits, tableContainerRef, dataSourceCopy, table
     }
     return map;
   });
+  const getFixedColWidths = computed(() => {
+    const cols = tableHeaderLast.value;
+    const leftAccumulated = [];
+    const rightAccumulated = [];
+    let leftSum = 0;
+    let rightSum = 0;
+    for (let i = 0, j = cols.length - 1; i < cols.length; i++, j--) {
+      const leftCol = cols[i];
+      const rightCol = cols[j];
+      if ((leftCol == null ? void 0 : leftCol.fixed) === "left") {
+        leftSum += getCalculatedColWidth(leftCol);
+        leftAccumulated.push({ i, w: leftSum });
+      }
+      if ((rightCol == null ? void 0 : rightCol.fixed) === "right") {
+        rightSum += getCalculatedColWidth(rightCol);
+        rightAccumulated.unshift({ i: j, w: rightSum });
+      }
+    }
+    return (colIndex) => {
+      let leftFixedWidth = 0;
+      for (let i = leftAccumulated.length - 1; i >= 0; i--) {
+        if (leftAccumulated[i].i < colIndex) {
+          leftFixedWidth = leftAccumulated[i].w;
+          break;
+        }
+      }
+      let rightFixedWidth = 0;
+      for (let i = rightAccumulated.length - 1; i >= 0; i--) {
+        if (rightAccumulated[i].i > colIndex) {
+          rightFixedWidth = rightAccumulated[i].w;
+          break;
+        }
+      }
+      return [leftFixedWidth, rightFixedWidth];
+    };
+  });
   const selectedCellKeys = computed(() => {
     const range = selectionRange.value;
     if (!range) return /* @__PURE__ */ new Set();
@@ -411,6 +460,78 @@ function useAreaSelection(props, emits, tableContainerRef, dataSourceCopy, table
     if (!colKey) return -1;
     return colKeyToIndexMap.value.get(colKey) ?? -1;
   }
+  function getColPosition(colIndex) {
+    let l = 0;
+    let w = 0;
+    const cols = tableHeaderLast.value;
+    for (let i = 0; i < cols.length; i++) {
+      const colWidth = getCalculatedColWidth(cols[i]);
+      if (i < colIndex) {
+        l += colWidth;
+      } else if (i === colIndex) {
+        w = colWidth;
+        break;
+      }
+    }
+    return { l, w };
+  }
+  function getMovementDelta(key, shiftKey) {
+    let rowDelta = 0;
+    let colDelta = 0;
+    switch (key) {
+      case KEY_ARROW_UP:
+        rowDelta = -1;
+        break;
+      case KEY_ARROW_DOWN:
+        rowDelta = 1;
+        break;
+      case KEY_ARROW_LEFT:
+        colDelta = -1;
+        break;
+      case KEY_ARROW_RIGHT:
+        colDelta = 1;
+        break;
+      case KEY_TAB:
+        colDelta = shiftKey ? -1 : 1;
+        break;
+    }
+    return [rowDelta, colDelta];
+  }
+  function clamp(value, min, max) {
+    return Math.max(min, Math.min(value, max));
+  }
+  function handleTabWrap(row, col, rawCol, rowCount, colCount) {
+    let newRow = row;
+    let newCol = col;
+    if (rawCol >= colCount) {
+      newCol = 0;
+      newRow = Math.min(row + 1, rowCount - 1);
+    } else if (rawCol < 0) {
+      newCol = colCount - 1;
+      newRow = Math.max(row - 1, 0);
+    }
+    return [newRow, newCol];
+  }
+  function calculateAutoScrollDelta(mouseX, mouseY, rect) {
+    const { top, bottom, left, right } = rect;
+    let deltaX = 0;
+    let deltaY = 0;
+    if (mouseY < top + EDGE_ZONE) {
+      const dist = Math.max(0, top + EDGE_ZONE - mouseY);
+      deltaY = -Math.ceil(dist / EDGE_ZONE * SCROLL_SPEED_MAX);
+    } else if (mouseY > bottom - EDGE_ZONE) {
+      const dist = Math.max(0, mouseY - (bottom - EDGE_ZONE));
+      deltaY = Math.ceil(dist / EDGE_ZONE * SCROLL_SPEED_MAX);
+    }
+    if (mouseX < left + EDGE_ZONE) {
+      const dist = Math.max(0, left + EDGE_ZONE - mouseX);
+      deltaX = -Math.ceil(dist / EDGE_ZONE * SCROLL_SPEED_MAX);
+    } else if (mouseX > right - EDGE_ZONE) {
+      const dist = Math.max(0, mouseX - (right - EDGE_ZONE));
+      deltaX = Math.ceil(dist / EDGE_ZONE * SCROLL_SPEED_MAX);
+    }
+    return { deltaX, deltaY };
+  }
   function onSelectionMouseDown(e) {
     if (!props.areaSelection || e.button !== 0) return;
     const rowIndex = getClosestTrIndex(e.target);
@@ -484,23 +605,7 @@ function useAreaSelection(props, emits, tableContainerRef, dataSourceCopy, table
       return;
     }
     const rect = container.getBoundingClientRect();
-    const { top, bottom, left, right } = rect;
-    let deltaX = 0;
-    let deltaY = 0;
-    if (lastMouseClientY < top + EDGE_ZONE) {
-      const dist = Math.max(0, top + EDGE_ZONE - lastMouseClientY);
-      deltaY = -Math.ceil(dist / EDGE_ZONE * SCROLL_SPEED_MAX);
-    } else if (lastMouseClientY > bottom - EDGE_ZONE) {
-      const dist = Math.max(0, lastMouseClientY - (bottom - EDGE_ZONE));
-      deltaY = Math.ceil(dist / EDGE_ZONE * SCROLL_SPEED_MAX);
-    }
-    if (lastMouseClientX < left + EDGE_ZONE) {
-      const dist = Math.max(0, left + EDGE_ZONE - lastMouseClientX);
-      deltaX = -Math.ceil(dist / EDGE_ZONE * SCROLL_SPEED_MAX);
-    } else if (lastMouseClientX > right - EDGE_ZONE) {
-      const dist = Math.max(0, lastMouseClientX - (right - EDGE_ZONE));
-      deltaX = Math.ceil(dist / EDGE_ZONE * SCROLL_SPEED_MAX);
-    }
+    const { deltaX, deltaY } = calculateAutoScrollDelta(lastMouseClientX, lastMouseClientY, rect);
     if (deltaX !== 0 || deltaY !== 0) {
       container.scrollTop += deltaY;
       container.scrollLeft += deltaX;
@@ -597,7 +702,7 @@ function useAreaSelection(props, emits, tableContainerRef, dataSourceCopy, table
   function onKeydown(e) {
     if (!props.areaSelection) return;
     const key = e.key;
-    if (key === "Escape" || key === "Esc") {
+    if (key === KEY_ESCAPE || key === KEY_ESC) {
       if (selectionRange.value) {
         clearSelectedArea();
         emitSelectionChange();
@@ -605,14 +710,14 @@ function useAreaSelection(props, emits, tableContainerRef, dataSourceCopy, table
       }
       return;
     }
-    if ((e.ctrlKey || e.metaKey) && key === "c" && selectionRange.value) {
+    if ((e.ctrlKey || e.metaKey) && key === KEY_C && selectionRange.value) {
       copySelectedArea();
       e.preventDefault();
       return;
     }
     if (!keyboardEnabled.value) return;
-    const isArrowKey = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(key);
-    const isTabKey = key === "Tab";
+    const isArrowKey = [KEY_ARROW_UP, KEY_ARROW_DOWN, KEY_ARROW_LEFT, KEY_ARROW_RIGHT].includes(key);
+    const isTabKey = key === KEY_TAB;
     const isNavigationKey = isArrowKey || isTabKey;
     if (!isNavigationKey) return;
     e.preventDefault();
@@ -631,25 +736,13 @@ function useAreaSelection(props, emits, tableContainerRef, dataSourceCopy, table
       scrollToCell(0, 0);
       return;
     }
-    let rowDelta = 0;
-    let colDelta = 0;
-    if (key === "ArrowUp") {
-      rowDelta = -1;
-    } else if (key === "ArrowDown") {
-      rowDelta = 1;
-    } else if (key === "ArrowLeft") {
-      colDelta = -1;
-    } else if (key === "ArrowRight") {
-      colDelta = 1;
-    } else if (key === "Tab") {
-      colDelta = e.shiftKey ? -1 : 1;
-    }
+    const [rowDelta, colDelta] = getMovementDelta(key, e.shiftKey);
     if (e.shiftKey && isArrowKey) {
       const range = selectionRange.value;
       let newEndRow = range.endRowIndex + rowDelta;
       let newEndCol = range.endColIndex + colDelta;
-      newEndRow = Math.max(0, Math.min(newEndRow, rowCount - 1));
-      newEndCol = Math.max(0, Math.min(newEndCol, colCount - 1));
+      newEndRow = clamp(newEndRow, 0, rowCount - 1);
+      newEndCol = clamp(newEndCol, 0, colCount - 1);
       selectionRange.value = {
         ...range,
         endRowIndex: newEndRow,
@@ -661,17 +754,13 @@ function useAreaSelection(props, emits, tableContainerRef, dataSourceCopy, table
       const { minRow, minCol } = normalizeRange(range);
       let newRow = minRow + rowDelta;
       let newCol = minCol + colDelta;
-      newRow = Math.max(0, Math.min(newRow, rowCount - 1));
-      newCol = Math.max(0, Math.min(newCol, colCount - 1));
+      newRow = clamp(newRow, 0, rowCount - 1);
+      newCol = clamp(newCol, 0, colCount - 1);
       if (isTabKey) {
         const rawCol = minCol + colDelta;
-        if (rawCol >= colCount) {
-          newCol = 0;
-          newRow = Math.min(minRow + 1, rowCount - 1);
-        } else if (rawCol < 0) {
-          newCol = colCount - 1;
-          newRow = Math.max(minRow - 1, 0);
-        }
+        const [tabRow, tabCol] = handleTabWrap(minRow, newCol, rawCol, rowCount, colCount);
+        newRow = tabRow;
+        newCol = tabCol;
       }
       anchorCell = { rowIndex: newRow, colIndex: newCol };
       selectionRange.value = {
@@ -692,39 +781,31 @@ function useAreaSelection(props, emits, tableContainerRef, dataSourceCopy, table
     if (!row || !col) return;
     const thead = container.querySelector("thead");
     const headerHeight = thead ? thead.offsetHeight : 0;
+    const tfoot = container.querySelector("tfoot");
+    const footerHeight = tfoot ? tfoot.offsetHeight : 0;
     const vs = virtualScroll.value;
     const vsx = virtualScrollX.value;
     const rowHeight = vs.rowHeight;
     const targetRowTop = rowIndex * rowHeight;
     const targetRowBottom = targetRowTop + rowHeight;
     const visibleTop = container.scrollTop;
-    const visibleBottom = visibleTop + vs.containerHeight - headerHeight;
+    const visibleBottom = visibleTop + vs.containerHeight - headerHeight - footerHeight;
     let newScrollTop = null;
     if (targetRowTop < visibleTop) {
       newScrollTop = targetRowTop;
     } else if (targetRowBottom > visibleBottom) {
-      newScrollTop = targetRowBottom - (vs.containerHeight - headerHeight);
-    }
-    let targetColLeft = 0;
-    let targetColWidth = 0;
-    const cols = tableHeaderLast.value;
-    for (let i = 0; i < cols.length; i++) {
-      const colWidth = getCalculatedColWidth(cols[i]) || 100;
-      if (i < colIndex) {
-        targetColLeft += colWidth;
-      } else if (i === colIndex) {
-        targetColWidth = colWidth;
-        break;
-      }
+      newScrollTop = targetRowBottom - (vs.containerHeight - headerHeight - footerHeight);
     }
+    const { l: targetColLeft, w: targetColWidth } = getColPosition(colIndex);
     const targetColRight = targetColLeft + targetColWidth;
     const visibleLeft = container.scrollLeft;
     const visibleRight = visibleLeft + vsx.containerWidth;
+    const [leftFixedWidth, rightFixedWidth] = getFixedColWidths.value(colIndex);
     let newScrollLeft = null;
-    if (targetColLeft < visibleLeft) {
-      newScrollLeft = targetColLeft;
-    } else if (targetColRight > visibleRight) {
-      newScrollLeft = targetColRight - vsx.containerWidth;
+    if (targetColLeft < visibleLeft + leftFixedWidth) {
+      newScrollLeft = targetColLeft - leftFixedWidth;
+    } else if (targetColRight > visibleRight - rightFixedWidth) {
+      newScrollLeft = targetColRight - vsx.containerWidth + rightFixedWidth;
     }
     if (newScrollTop !== null || newScrollLeft !== null) {
       scrollTo(newScrollTop, newScrollLeft);
@@ -735,11 +816,11 @@ function useAreaSelection(props, emits, tableContainerRef, dataSourceCopy, table
     if (!nr || !selectedCellKeys.value.has(cellKey)) return [];
     const colIndex = colKeyToIndexMap.value.get(colKey);
     if (colIndex === void 0 || colIndex < 0) return [];
-    const classes = ["cell-range-selected"];
-    if (absoluteRowIndex === nr.minRow) classes.push("cell-range-t");
-    if (absoluteRowIndex === nr.maxRow) classes.push("cell-range-b");
-    if (colIndex === nr.minCol) classes.push("cell-range-l");
-    if (colIndex === nr.maxCol) classes.push("cell-range-r");
+    const classes = [CELL_RANGE_SELECTED];
+    if (absoluteRowIndex === nr.minRow) classes.push(CELL_RANGE_TOP);
+    if (absoluteRowIndex === nr.maxRow) classes.push(CELL_RANGE_BOTTOM);
+    if (colIndex === nr.minCol) classes.push(CELL_RANGE_LEFT);
+    if (colIndex === nr.maxCol) classes.push(CELL_RANGE_RIGHT);
     return classes;
   }
   function getSelectedArea() {
@@ -1542,7 +1623,7 @@ function useRowExpand(emits, dataSourceCopy, rowKeyGen) {
   }
   return [toggleExpandRow, setRowExpand];
 }
-function useScrollbar(props, containerRef, virtualScroll, virtualScrollX, updateVirtualScrollY, scrollbarOptions) {
+function useScrollbar(props, containerRef, virtualScroll, virtualScrollX, updateVirtualScrollY, scrollbarOptions, isExperimentalScrollY) {
   const showScrollbar = ref({ x: false, y: false });
   const scrollbar = ref({ h: 0, w: 0, t: 0, l: 0 });
   let isDraggingVertical = false;
@@ -1606,7 +1687,6 @@ function useScrollbar(props, containerRef, virtualScroll, virtualScrollX, update
     document.addEventListener("touchend", onDragEnd);
   }
   function onVerticalDrag(e) {
-    var _a;
     if (!isDraggingVertical) return;
     e.preventDefault();
     const clientY = e instanceof MouseEvent ? e.clientY : e.touches[0].clientY;
@@ -1615,7 +1695,7 @@ function useScrollbar(props, containerRef, virtualScroll, virtualScrollX, update
     const scrollRange = scrollHeight - containerHeight;
     const trackRange = containerHeight - scrollbar.value.h;
     const scrollDelta = deltaY / trackRange * scrollRange;
-    if ((_a = props.experimental) == null ? void 0 : _a.scrollY) {
+    if (isExperimentalScrollY.value) {
       const ratio = containerHeight / scrollHeight;
       const top = Math.round((dragStartTop + scrollDelta) * ratio);
       const maxTop = containerHeight - scrollbar.value.h;
@@ -2062,7 +2142,7 @@ function useTree(props, dataSourceCopy, rowKeyGen, emits) {
   return [toggleTreeNode, setTreeExpand, flatTreeData];
 }
 const VUE2_SCROLL_TIMEOUT_MS = 200;
-function useVirtualScroll(props, tableContainerRef, trRef, dataSourceCopy, tableHeaderLast, tableHeaders, rowKeyGen, maxRowSpan, scrollbarOptions) {
+function useVirtualScroll(props, tableContainerRef, trRef, dataSourceCopy, tableHeaderLast, tableHeaders, rowKeyGen, maxRowSpan, scrollbarOptions, isExperimentalScrollY) {
   const tableHeaderHeight = computed(() => props.headerRowHeight * tableHeaders.value.length);
   const virtualScroll = ref({
     containerHeight: 0,
@@ -2222,7 +2302,6 @@ function useVirtualScroll(props, tableContainerRef, trRef, dataSourceCopy, table
     }
   }
   function updateVirtualScrollY(sTop = 0) {
-    var _a;
     const { pageSize, scrollTop, startIndex: oldStartIndex, endIndex: oldEndIndex, containerHeight } = virtualScroll.value;
     const dataSourceCopyTemp = dataSourceCopy.value;
     const dataLength = dataSourceCopyTemp.length;
@@ -2232,7 +2311,7 @@ function useVirtualScroll(props, tableContainerRef, trRef, dataSourceCopy, table
     const { enabled: scrollbarEnable } = scrollbarOptions.value;
     if (scrollbarEnable) {
       vsValue.scrollHeight = scrollHeight;
-      if ((_a = props.experimental) == null ? void 0 : _a.scrollY) {
+      if (isExperimentalScrollY.value) {
         let maxTop;
         sTop = sTop < 0 ? 0 : sTop < (maxTop = scrollHeight - containerHeight) ? sTop : maxTop;
         vsValue.translateY = props.scrollRowByRow ? 0 : -(sTop % rowHeight);
@@ -2603,6 +2682,13 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       height: 8,
       ...typeof props.scrollbar === "boolean" ? { enabled: props.scrollbar } : props.scrollbar
     }));
+    const isExperimentalScrollY = computed(() => {
+      var _a, _b;
+      if (((_a = scrollbarOptions.value) == null ? void 0 : _a.enabled) && props.scrollRowByRow) {
+        return true;
+      }
+      return (_b = props.experimental) == null ? void 0 : _b.scrollY;
+    });
     const rowKeyGenCache = /* @__PURE__ */ new WeakMap();
     const [isSRBRActive] = useScrollRowByRow(props, tableContainerRef);
     const [onThDragStart, onThDragOver, onThDrop, isHeaderDraggable] = useThDrag(props, emits, colKeyGen);
@@ -2625,7 +2711,18 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       updateVirtualScrollX,
       setAutoHeight,
       clearAllAutoHeight
-    ] = useVirtualScroll(props, tableContainerRef, trRef, dataSourceCopy, tableHeaderLast, tableHeaders, rowKeyGen, maxRowSpan, scrollbarOptions);
+    ] = useVirtualScroll(
+      props,
+      tableContainerRef,
+      trRef,
+      dataSourceCopy,
+      tableHeaderLast,
+      tableHeaders,
+      rowKeyGen,
+      maxRowSpan,
+      scrollbarOptions,
+      isExperimentalScrollY
+    );
     const rafUpdateVirtualScrollYForWheel = rafThrottle((scrollTop) => {
       updateVirtualScrollY(scrollTop);
     });
@@ -2635,7 +2732,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       virtualScroll,
       virtualScrollX,
       updateVirtualScrollY,
-      scrollbarOptions
+      scrollbarOptions,
+      isExperimentalScrollY
     );
     const [hiddenCellMap, mergeCellsWrapper, hoverMergedCells, updateHoverMergedCells, activeMergedCells, updateActiveMergedCells] = useMergeCells(
       rowActiveProp,
@@ -3107,7 +3205,6 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     }
     const [isWheeling, setIsWheeling] = useWheeling();
     function onTableWheel(e) {
-      var _a;
       if (props.smoothScroll) return;
       if (isColResizing.value) {
         e.stopPropagation();
@@ -3125,7 +3222,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         if (isWheeling()) {
           e.preventDefault();
         }
-        if ((_a = props.experimental) == null ? void 0 : _a.scrollY) {
+        if (isExperimentalScrollY.value) {
           rafUpdateVirtualScrollYForWheel(scrollTop + deltaY);
           updateCustomScrollbar();
         } else {
@@ -3443,7 +3540,6 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       setFilter
     });
     return (_ctx, _cache) => {
-      var _a, _b, _c, _d;
       return openBlock(), createElementBlock("div", {
         ref_key: "tableContainerRef",
         ref: tableContainerRef,
@@ -3470,7 +3566,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           "scroll-row-by-row": unref(isSRBRActive),
           "scrollbar-on": scrollbarOptions.value.enabled,
           "is-area-selecting": unref(isAreaSelecting),
-          "exp-scroll-y": (_a = __props.experimental) == null ? void 0 : _a.scrollY
+          "exp-scroll-y": isExperimentalScrollY.value
         }]),
         tabindex: props.areaSelection ? 0 : void 0,
         style: normalizeStyle({
@@ -3485,7 +3581,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         onScroll: onTableScroll,
         onWheel: onTableWheel
       }, [
-        !((_b = __props.experimental) == null ? void 0 : _b.scrollY) && SRBRTotalHeight.value ? (openBlock(), createElementBlock("div", {
+        !isExperimentalScrollY.value && SRBRTotalHeight.value ? (openBlock(), createElementBlock("div", {
           key: 0,
           class: "row-by-row-table-height",
           style: normalizeStyle(`height: ${SRBRTotalHeight.value}px`)
@@ -3612,7 +3708,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
               onMousedown: onCellMouseDown,
               onMouseover: onCellMouseOver
             }, [
-              !((_c = __props.experimental) == null ? void 0 : _c.scrollY) && unref(virtual_on) && !unref(isSRBRActive) ? (openBlock(), createElementBlock("tr", {
+              !isExperimentalScrollY.value && unref(virtual_on) && !unref(isSRBRActive) ? (openBlock(), createElementBlock("tr", {
                 key: 0,
                 style: normalizeStyle(`height:${unref(virtualScroll).offsetTop}px`),
                 class: "padding-top-tr"
@@ -3645,16 +3741,16 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                         row: row.__EXP_R__,
                         col: row.__EXP_C__
                       }, () => {
-                        var _a2;
+                        var _a;
                         return [
-                          createTextVNode(toDisplayString(((_a2 = row.__EXP_R__) == null ? void 0 : _a2[row.__EXP_C__.dataIndex]) ?? ""), 1)
+                          createTextVNode(toDisplayString(((_a = row.__EXP_R__) == null ? void 0 : _a[row.__EXP_C__.dataIndex]) ?? ""), 1)
                         ];
                       })
                     ])
                   ], 8, _hoisted_16)) : (openBlock(true), createElementBlock(Fragment, { key: 2 }, renderList(unref(virtualX_columnPart), (col, colIndex) => {
-                    var _a2;
+                    var _a;
                     return openBlock(), createElementBlock(Fragment, null, [
-                      !unref(hiddenCellMap) || !((_a2 = unref(hiddenCellMap)[rowKeyGen(row)]) == null ? void 0 : _a2.has(colKeyGen.value(col))) ? (openBlock(), createElementBlock("td", mergeProps({
+                      !unref(hiddenCellMap) || !((_a = unref(hiddenCellMap)[rowKeyGen(row)]) == null ? void 0 : _a.has(colKeyGen.value(col))) ? (openBlock(), createElementBlock("td", mergeProps({
                         key: colKeyGen.value(col)
                       }, { ref_for: true }, getTDProps(row, col, rowIndex, colIndex), {
                         onMouseenter: onCellMouseEnter,
@@ -3712,7 +3808,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                   unref(virtualX_on) ? (openBlock(), createElementBlock("td", _hoisted_22)) : createCommentVNode("", true)
                 ], 16, _hoisted_14);
               }), 128)),
-              !((_d = __props.experimental) == null ? void 0 : _d.scrollY) ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+              !isExperimentalScrollY.value ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
                 unref(virtual_on) && !unref(isSRBRActive) ? (openBlock(), createElementBlock("tr", {
                   key: 0,
                   style: normalizeStyle(`height: ${unref(virtual_offsetBottom)}px`)

package/lib/style.css

@@ -1,6 +1,6 @@
 /**
  * name: stk-table-vue
- * version: v0.11.0-beta.4
+ * version: v0.11.2
  * description: High performance realtime virtual table for vue3 and vue2.7
  * author: japlus
  * homepage: https://ja-plus.github.io/stk-table-vue/

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stk-table-vue",
-  "version": "0.11.0",
+  "version": "0.11.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",

package/src/StkTable/StkTable.vue

@@ -26,7 +26,7 @@
             'scroll-row-by-row': isSRBRActive,
             'scrollbar-on': scrollbarOptions.enabled,
             'is-area-selecting': isAreaSelecting,
-            'exp-scroll-y': experimental?.scrollY,
+            'exp-scroll-y': isExperimentalScrollY,
         }"
         :tabindex="props.areaSelection ? 0 : void 0"
         :style="{
@@ -41,7 +41,7 @@
         @scroll="onTableScroll"
         @wheel="onTableWheel"
     >
-        <div v-if="!experimental?.scrollY && SRBRTotalHeight" class="row-by-row-table-height" :style="`height: ${SRBRTotalHeight}px`"></div>
+        <div v-if="!isExperimentalScrollY && SRBRTotalHeight" class="row-by-row-table-height" :style="`height: ${SRBRTotalHeight}px`"></div>
 
         <div v-if="colResizable" ref="colResizeIndicatorRef" class="column-resize-indicator"></div>
 
@@ -132,7 +132,7 @@
                     @mouseover="onCellMouseOver"
                 >
                     <tr
-                        v-if="!experimental?.scrollY && virtual_on && !isSRBRActive"
+                        v-if="!isExperimentalScrollY && virtual_on && !isSRBRActive"
                         :style="`height:${virtualScroll.offsetTop}px`"
                         class="padding-top-tr"
                     >
@@ -208,7 +208,7 @@
                         </template>
                         <td v-if="virtualX_on" class="vt-x-right"></td>
                     </tr>
-                    <template v-if="!experimental?.scrollY">
+                    <template v-if="!isExperimentalScrollY">
                         <tr v-if="virtual_on && !isSRBRActive" :style="`height: ${virtual_offsetBottom}px`"></tr>
                         <tr v-if="SRBRBottomHeight" :style="`height: ${SRBRBottomHeight}px`"></tr>
                     </template>
@@ -798,6 +798,13 @@ const scrollbarOptions = computed(() => ({
     ...(typeof props.scrollbar === 'boolean' ? { enabled: props.scrollbar } : props.scrollbar),
 }));
 
+const isExperimentalScrollY = computed(() => {
+    if (scrollbarOptions.value?.enabled && props.scrollRowByRow) {
+        return true;
+    }
+    return props.experimental?.scrollY;
+});
+
 const rowKeyGenCache = new WeakMap();
 
 const [isSRBRActive] = useScrollRowByRow(props, tableContainerRef);
@@ -825,7 +832,18 @@ const [
     updateVirtualScrollX,
     setAutoHeight,
     clearAllAutoHeight,
-] = useVirtualScroll(props, tableContainerRef, trRef, dataSourceCopy, tableHeaderLast, tableHeaders, rowKeyGen, maxRowSpan, scrollbarOptions);
+] = useVirtualScroll(
+    props,
+    tableContainerRef,
+    trRef,
+    dataSourceCopy,
+    tableHeaderLast,
+    tableHeaders,
+    rowKeyGen,
+    maxRowSpan,
+    scrollbarOptions,
+    isExperimentalScrollY,
+);
 
 /** requestAnimationFrame throttled version of updateVirtualScrollY for smoother wheel scrolling */
 const rafUpdateVirtualScrollYForWheel = rafThrottle((scrollTop: number) => {
@@ -839,6 +857,7 @@ const [scrollbar, showScrollbar, onVerticalScrollbarMouseDown, onHorizontalScrol
     virtualScrollX,
     updateVirtualScrollY,
     scrollbarOptions,
+    isExperimentalScrollY,
 );
 
 const [hiddenCellMap, mergeCellsWrapper, hoverMergedCells, updateHoverMergedCells, activeMergedCells, updateActiveMergedCells] = useMergeCells(
@@ -1438,7 +1457,7 @@ function onTableWheel(e: WheelEvent) {
         if (isWheeling()) {
             e.preventDefault();
         }
-        if (props.experimental?.scrollY) {
+        if (isExperimentalScrollY.value) {
             rafUpdateVirtualScrollYForWheel(scrollTop + deltaY);
             updateCustomScrollbar();
         } else {

package/src/StkTable/features/useAreaSelection.ts

@@ -5,8 +5,9 @@ import { getClosestColKey, getClosestTrIndex } from '../utils';
 import { getCalculatedColWidth } from '../utils/constRefUtils';
 
 /**
- * 单元格拖拽选区
- * en: Cell drag selection
+ * 单元格区域选择功能
+ * 支持鼠标拖拽选择、键盘导航、复制粘贴等功能
+ * en: Cell area selection feature with mouse drag, keyboard navigation, copy-paste, etc.
  */
 export function useAreaSelection<DT extends Record<string, any>>(
     props: any,
@@ -30,9 +31,24 @@ export function useAreaSelection<DT extends Record<string, any>>(
      * en: Maximum scroll pixels per frame
      */
     const SCROLL_SPEED_MAX = 15;
-
     const POINT_EDGE_OFFSET = 2;
 
+    const KEY_ARROW_UP = 'ArrowUp';
+    const KEY_ARROW_DOWN = 'ArrowDown';
+    const KEY_ARROW_LEFT = 'ArrowLeft';
+    const KEY_ARROW_RIGHT = 'ArrowRight';
+    const KEY_TAB = 'Tab';
+    const KEY_ESCAPE = 'Escape';
+    const KEY_ESC = 'Esc';
+    const KEY_C = 'c';
+
+    // CSS
+    const CELL_RANGE_SELECTED = 'cell-range-selected';
+    const CELL_RANGE_TOP = 'cell-range-t';
+    const CELL_RANGE_BOTTOM = 'cell-range-b';
+    const CELL_RANGE_LEFT = 'cell-range-l';
+    const CELL_RANGE_RIGHT = 'cell-range-r';
+
     /** 当前选区范围 */
     const selectionRange = ref<AreaSelectionRange | null>(null) as Ref<AreaSelectionRange | null>;
     /** 是否正在拖选 */
@@ -56,6 +72,60 @@ export function useAreaSelection<DT extends Record<string, any>>(
         return map;
     });
 
+    /**
+     * 获取固定列宽度的函数
+     * 缓存每个固定列位置的累计宽度，查询时直接返回
+     * @param colIndex 目标列索引
+     * @returns [leftFixedWidth, rightFixedWidth]
+     */
+    const getFixedColWidths = computed(() => {
+        const cols = tableHeaderLast.value;
+        type FixedColWidth = { i: number; /** accumulated width */ w: number };
+        // 保存每个固定列位置的累计宽度（包含当前列）
+        const leftAccumulated: FixedColWidth[] = [];
+        const rightAccumulated: FixedColWidth[] = [];
+
+        let leftSum = 0;
+        let rightSum = 0;
+
+        for (let i = 0, j = cols.length - 1; i < cols.length; i++, j--) {
+            const leftCol = cols[i];
+            const rightCol = cols[j];
+
+            if (leftCol?.fixed === 'left') {
+                leftSum += getCalculatedColWidth(leftCol);
+                leftAccumulated.push({ i, w: leftSum });
+            }
+
+            if (rightCol?.fixed === 'right') {
+                rightSum += getCalculatedColWidth(rightCol);
+                rightAccumulated.unshift({ i: j, w: rightSum });
+            }
+        }
+
+        return (colIndex: number) => {
+            // 查找目标列左侧最近的固定列的累计宽度
+            let leftFixedWidth = 0;
+            for (let i = leftAccumulated.length - 1; i >= 0; i--) {
+                if (leftAccumulated[i].i < colIndex) {
+                    leftFixedWidth = leftAccumulated[i].w;
+                    break;
+                }
+            }
+
+            // 查找目标列右侧最近的固定列的累计宽度
+            let rightFixedWidth = 0;
+            for (let i = rightAccumulated.length - 1; i >= 0; i--) {
+                if (rightAccumulated[i].i > colIndex) {
+                    rightFixedWidth = rightAccumulated[i].w;
+                    break;
+                }
+            }
+
+            return [leftFixedWidth, rightFixedWidth] as const;
+        };
+    });
+
     /** 根据 selectionRange 计算选区内所有 cellKey 的集合 */
     const selectedCellKeys = computed<Set<string>>(() => {
         const range = selectionRange.value;
@@ -128,6 +198,98 @@ export function useAreaSelection<DT extends Record<string, any>>(
         return colKeyToIndexMap.value.get(colKey) ?? -1;
     }
 
+    /** 获取列的左边距和宽度 */
+    function getColPosition(colIndex: number): { l: number; w: number } {
+        let l = 0;
+        let w = 0;
+        const cols = tableHeaderLast.value;
+        for (let i = 0; i < cols.length; i++) {
+            const colWidth = getCalculatedColWidth(cols[i]);
+            if (i < colIndex) {
+                l += colWidth;
+            } else if (i === colIndex) {
+                w = colWidth;
+                break;
+            }
+        }
+        return { l, w };
+    }
+
+    /** 根据按键计算移动方向 */
+    function getMovementDelta(key: string, shiftKey: boolean): [number, number] {
+        let rowDelta = 0;
+        let colDelta = 0;
+
+        switch (key) {
+            case KEY_ARROW_UP:
+                rowDelta = -1;
+                break;
+            case KEY_ARROW_DOWN:
+                rowDelta = 1;
+                break;
+            case KEY_ARROW_LEFT:
+                colDelta = -1;
+                break;
+            case KEY_ARROW_RIGHT:
+                colDelta = 1;
+                break;
+            case KEY_TAB:
+                // Tab: 向右移动；Shift+Tab: 向左移动
+                colDelta = shiftKey ? -1 : 1;
+                break;
+        }
+
+        return [rowDelta, colDelta];
+    }
+
+    /** 钳制值到指定范围内 */
+    function clamp(value: number, min: number, max: number): number {
+        return Math.max(min, Math.min(value, max));
+    }
+
+    /** 处理Tab键的换行逻辑 */
+    function handleTabWrap(row: number, col: number, rawCol: number, rowCount: number, colCount: number): [number, number] {
+        let newRow = row;
+        let newCol = col;
+
+        if (rawCol >= colCount) {
+            newCol = 0;
+            newRow = Math.min(row + 1, rowCount - 1);
+        } else if (rawCol < 0) {
+            newCol = colCount - 1;
+            newRow = Math.max(row - 1, 0);
+        }
+
+        return [newRow, newCol];
+    }
+
+    /** 计算自动滚动的增量 */
+    function calculateAutoScrollDelta(mouseX: number, mouseY: number, rect: DOMRect): { deltaX: number; deltaY: number } {
+        const { top, bottom, left, right } = rect;
+        let deltaX = 0;
+        let deltaY = 0;
+
+        // Y方向
+        if (mouseY < top + EDGE_ZONE) {
+            const dist = Math.max(0, top + EDGE_ZONE - mouseY);
+            deltaY = -Math.ceil((dist / EDGE_ZONE) * SCROLL_SPEED_MAX);
+        } else if (mouseY > bottom - EDGE_ZONE) {
+            const dist = Math.max(0, mouseY - (bottom - EDGE_ZONE));
+            deltaY = Math.ceil((dist / EDGE_ZONE) * SCROLL_SPEED_MAX);
+        }
+
+        // X方向
+        if (mouseX < left + EDGE_ZONE) {
+            const dist = Math.max(0, left + EDGE_ZONE - mouseX);
+            deltaX = -Math.ceil((dist / EDGE_ZONE) * SCROLL_SPEED_MAX);
+        } else if (mouseX > right - EDGE_ZONE) {
+            const dist = Math.max(0, mouseX - (right - EDGE_ZONE));
+            deltaX = Math.ceil((dist / EDGE_ZONE) * SCROLL_SPEED_MAX);
+        }
+
+        return { deltaX, deltaY };
+    }
+
     /** mousedown 处理：设置锚点，开始拖选 */
     function onSelectionMouseDown(e: MouseEvent) {
         if (!props.areaSelection || e.button !== 0) return;
@@ -238,27 +400,7 @@ export function useAreaSelection<DT extends Record<string, any>>(
         }
 
         const rect = container.getBoundingClientRect();
-        const { top, bottom, left, right } = rect;
-        let deltaX = 0;
-        let deltaY = 0;
-
-        // Y方向
-        if (lastMouseClientY < top + EDGE_ZONE) {
-            const dist = Math.max(0, top + EDGE_ZONE - lastMouseClientY);
-            deltaY = -Math.ceil((dist / EDGE_ZONE) * SCROLL_SPEED_MAX);
-        } else if (lastMouseClientY > bottom - EDGE_ZONE) {
-            const dist = Math.max(0, lastMouseClientY - (bottom - EDGE_ZONE));
-            deltaY = Math.ceil((dist / EDGE_ZONE) * SCROLL_SPEED_MAX);
-        }
-
-        // X方向
-        if (lastMouseClientX < left + EDGE_ZONE) {
-            const dist = Math.max(0, left + EDGE_ZONE - lastMouseClientX);
-            deltaX = -Math.ceil((dist / EDGE_ZONE) * SCROLL_SPEED_MAX);
-        } else if (lastMouseClientX > right - EDGE_ZONE) {
-            const dist = Math.max(0, lastMouseClientX - (right - EDGE_ZONE));
-            deltaX = Math.ceil((dist / EDGE_ZONE) * SCROLL_SPEED_MAX);
-        }
+        const { deltaX, deltaY } = calculateAutoScrollDelta(lastMouseClientX, lastMouseClientY, rect);
 
         if (deltaX !== 0 || deltaY !== 0) {
             container.scrollTop += deltaY;
@@ -401,7 +543,7 @@ export function useAreaSelection<DT extends Record<string, any>>(
         const key = e.key;
 
         // Esc 键：取消当前选区
-        if (key === 'Escape' || key === 'Esc') {
+        if (key === KEY_ESCAPE || key === KEY_ESC) {
             if (selectionRange.value) {
                 clearSelectedArea();
                 emitSelectionChange();
@@ -411,7 +553,7 @@ export function useAreaSelection<DT extends Record<string, any>>(
         }
 
         // Ctrl/Cmd+C 复制选区
-        if ((e.ctrlKey || e.metaKey) && key === 'c' && selectionRange.value) {
+        if ((e.ctrlKey || e.metaKey) && key === KEY_C && selectionRange.value) {
             copySelectedArea();
             e.preventDefault();
             return;
@@ -420,8 +562,8 @@ export function useAreaSelection<DT extends Record<string, any>>(
         // 键盘导航（需要启用 keyboard 选项）
         if (!keyboardEnabled.value) return;
 
-        const isArrowKey = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key);
-        const isTabKey = key === 'Tab';
+        const isArrowKey = [KEY_ARROW_UP, KEY_ARROW_DOWN, KEY_ARROW_LEFT, KEY_ARROW_RIGHT].includes(key);
+        const isTabKey = key === KEY_TAB;
         const isNavigationKey = isArrowKey || isTabKey;
 
         if (!isNavigationKey) return;
@@ -447,21 +589,7 @@ export function useAreaSelection<DT extends Record<string, any>>(
         }
 
         // 计算移动方向
-        let rowDelta = 0;
-        let colDelta = 0;
-
-        if (key === 'ArrowUp') {
-            rowDelta = -1;
-        } else if (key === 'ArrowDown') {
-            rowDelta = 1;
-        } else if (key === 'ArrowLeft') {
-            colDelta = -1;
-        } else if (key === 'ArrowRight') {
-            colDelta = 1;
-        } else if (key === 'Tab') {
-            // Tab: 向右移动；Shift+Tab: 向左移动
-            colDelta = e.shiftKey ? -1 : 1;
-        }
+        const [rowDelta, colDelta] = getMovementDelta(key, e.shiftKey);
 
         // Shift 扩展选区，否则移动单格选区
         if (e.shiftKey && isArrowKey) {
@@ -471,8 +599,8 @@ export function useAreaSelection<DT extends Record<string, any>>(
             let newEndCol = range.endColIndex + colDelta;
 
             // 边界检查
-            newEndRow = Math.max(0, Math.min(newEndRow, rowCount - 1));
-            newEndCol = Math.max(0, Math.min(newEndCol, colCount - 1));
+            newEndRow = clamp(newEndRow, 0, rowCount - 1);
+            newEndCol = clamp(newEndCol, 0, colCount - 1);
 
             selectionRange.value = {
                 ...range,
@@ -490,20 +618,16 @@ export function useAreaSelection<DT extends Record<string, any>>(
             let newCol = minCol + colDelta;
 
             // 边界检查（先检查，避免越界）
-            newRow = Math.max(0, Math.min(newRow, rowCount - 1));
-            newCol = Math.max(0, Math.min(newCol, colCount - 1));
+            newRow = clamp(newRow, 0, rowCount - 1);
+            newCol = clamp(newCol, 0, colCount - 1);
 
             // Tab 换行逻辑：如果到达行尾/行首，换行
             if (isTabKey) {
                 // 计算原始未 clamp 的值
                 const rawCol = minCol + colDelta;
-                if (rawCol >= colCount) {
-                    newCol = 0;
-                    newRow = Math.min(minRow + 1, rowCount - 1);
-                } else if (rawCol < 0) {
-                    newCol = colCount - 1;
-                    newRow = Math.max(minRow - 1, 0);
-                }
+                const [tabRow, tabCol] = handleTabWrap(minRow, newCol, rawCol, rowCount, colCount);
+                newRow = tabRow;
+                newCol = tabCol;
             }
 
             // 更新锚点和选区
@@ -523,6 +647,8 @@ export function useAreaSelection<DT extends Record<string, any>>(
 
     /**
      * 滚动到指定单元格，确保其在可视区域内
+     * @param rowIndex 行索引
+     * @param colIndex 列索引
      */
     function scrollToCell(rowIndex: number, colIndex: number) {
         const container = tableContainerRef.value;
@@ -532,9 +658,10 @@ export function useAreaSelection<DT extends Record<string, any>>(
         const col = tableHeaderLast.value[colIndex];
         if (!row || !col) return;
 
-        // 获取表头高度
         const thead = container.querySelector('thead');
         const headerHeight = thead ? thead.offsetHeight : 0;
+        const tfoot = container.querySelector('tfoot');
+        const footerHeight = tfoot ? tfoot.offsetHeight : 0;
 
         const vs = virtualScroll.value;
         const vsx = virtualScrollX.value;
@@ -546,7 +673,7 @@ export function useAreaSelection<DT extends Record<string, any>>(
 
         // 计算可视区域
         const visibleTop = container.scrollTop;
-        const visibleBottom = visibleTop + vs.containerHeight - headerHeight;
+        const visibleBottom = visibleTop + vs.containerHeight - headerHeight - footerHeight;
 
         // 计算需要的垂直滚动位置
         let newScrollTop: number | null = null;
@@ -555,36 +682,26 @@ export function useAreaSelection<DT extends Record<string, any>>(
             newScrollTop = targetRowTop;
         } else if (targetRowBottom > visibleBottom) {
             // 目标行在可视区域下方，滚动到使目标行位于底部
-            newScrollTop = targetRowBottom - (vs.containerHeight - headerHeight);
+            newScrollTop = targetRowBottom - (vs.containerHeight - headerHeight - footerHeight);
         }
 
         // 计算目标列的位置
-        let targetColLeft = 0;
-        let targetColWidth = 0;
-        const cols = tableHeaderLast.value;
-        for (let i = 0; i < cols.length; i++) {
-            const colWidth = getCalculatedColWidth(cols[i]) || 100; // 默认100px
-            if (i < colIndex) {
-                targetColLeft += colWidth;
-            } else if (i === colIndex) {
-                targetColWidth = colWidth;
-                break;
-            }
-        }
+        const { l: targetColLeft, w: targetColWidth } = getColPosition(colIndex);
         const targetColRight = targetColLeft + targetColWidth;
 
         // 计算可视区域（水平）
         const visibleLeft = container.scrollLeft;
         const visibleRight = visibleLeft + vsx.containerWidth;
 
-        // 计算需要的水平滚动位置
+        // 计算固定列的宽度（用于检测遮挡）
+        const [leftFixedWidth, rightFixedWidth] = getFixedColWidths.value(colIndex);
         let newScrollLeft: number | null = null;
-        if (targetColLeft < visibleLeft) {
-            // 目标列在可视区域左侧
-            newScrollLeft = targetColLeft;
-        } else if (targetColRight > visibleRight) {
-            // 目标列在可视区域右侧
-            newScrollLeft = targetColRight - vsx.containerWidth;
+        if (targetColLeft < visibleLeft + leftFixedWidth) {
+            // 目标列在左侧固定列遮挡区域内，需要向左滚动
+            newScrollLeft = targetColLeft - leftFixedWidth;
+        } else if (targetColRight > visibleRight - rightFixedWidth) {
+            // 目标列在右侧固定列遮挡区域内，需要向右滚动
+            newScrollLeft = targetColRight - vsx.containerWidth + rightFixedWidth;
         }
 
         // 执行滚动
@@ -594,10 +711,11 @@ export function useAreaSelection<DT extends Record<string, any>>(
     }
 
     /**
-     * 判断一个单元格的选区 class
+     * 判断一个单元格的选区样式类名
      * @param cellKey 单元格唯一键
      * @param absoluteRowIndex 行在 dataSourceCopy 中的绝对索引
      * @param colKey 列唯一键
+     * @returns 样式类名数组
      */
     function getAreaSelectionClasses(cellKey: string, absoluteRowIndex: number, colKey: UniqKey): string[] {
         const nr = normalizedRange.value;
@@ -606,11 +724,11 @@ export function useAreaSelection<DT extends Record<string, any>>(
         const colIndex = colKeyToIndexMap.value.get(colKey);
         if (colIndex === void 0 || colIndex < 0) return [];
 
-        const classes: string[] = ['cell-range-selected'];
-        if (absoluteRowIndex === nr.minRow) classes.push('cell-range-t');
-        if (absoluteRowIndex === nr.maxRow) classes.push('cell-range-b');
-        if (colIndex === nr.minCol) classes.push('cell-range-l');
-        if (colIndex === nr.maxCol) classes.push('cell-range-r');
+        const classes: string[] = [CELL_RANGE_SELECTED];
+        if (absoluteRowIndex === nr.minRow) classes.push(CELL_RANGE_TOP);
+        if (absoluteRowIndex === nr.maxRow) classes.push(CELL_RANGE_BOTTOM);
+        if (colIndex === nr.minCol) classes.push(CELL_RANGE_LEFT);
+        if (colIndex === nr.maxCol) classes.push(CELL_RANGE_RIGHT);
         return classes;
     }
 

package/src/StkTable/useScrollbar.ts

@@ -27,6 +27,7 @@ export function useScrollbar(
     virtualScrollX: Ref<VirtualScrollXStore>,
     updateVirtualScrollY: (sTop?: number) => void,
     scrollbarOptions: Ref<Required<ScrollbarOptions>>,
+    isExperimentalScrollY: Ref<boolean | undefined>,
 ) {
     const showScrollbar = ref({ x: false, y: false });
     const scrollbar = ref({ h: 0, w: 0, t: 0, l: 0 });
@@ -114,7 +115,7 @@ export function useScrollbar(
         const trackRange = containerHeight - scrollbar.value.h;
         const scrollDelta = (deltaY / trackRange) * scrollRange;
 
-        if (props.experimental?.scrollY) {
+        if (isExperimentalScrollY.value) {
             const ratio = containerHeight / scrollHeight;
             const top = Math.round((dragStartTop + scrollDelta) * ratio);
             const maxTop = containerHeight - scrollbar.value.h;

package/src/StkTable/useVirtualScroll.ts

@@ -57,6 +57,7 @@ export function useVirtualScroll<DT extends Record<string, any>>(
     rowKeyGen: RowKeyGen,
     maxRowSpan: Map<UniqKey, number>,
     scrollbarOptions: Ref<Required<ScrollbarOptions>>,
+    isExperimentalScrollY: Ref<boolean | undefined>,
 ) {
     const tableHeaderHeight = computed(() => props.headerRowHeight * tableHeaders.value.length);
 
@@ -276,7 +277,7 @@ export function useVirtualScroll<DT extends Record<string, any>>(
         const { enabled: scrollbarEnable } = scrollbarOptions.value;
         if (scrollbarEnable) {
             vsValue.scrollHeight = scrollHeight;
-            if (props.experimental?.scrollY) {
+            if (isExperimentalScrollY.value) {
                 let maxTop: number;
                 sTop = sTop < 0 ? 0 : sTop < (maxTop = scrollHeight - containerHeight) ? sTop : maxTop;
                 vsValue.translateY = props.scrollRowByRow ? 0 : -(sTop % rowHeight);