stk-table-vue 0.11.5 → 0.11.6

package/lib/index-t5SJ6KNv.js

@@ -1,6 +1,6 @@
 /**
  * name: stk-table-vue
- * version: v0.11.4
+ * version: v0.11.6
  * 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

@@ -1,5 +1,5 @@
 import { Ref, ShallowRef } from 'vue';
-import { CellKeyGen, ColKeyGen, StkTableColumn, UniqKey } from '../types';
+import { AreaSelectionConfig, CellKeyGen, ColKeyGen, StkTableColumn, UniqKey } from '../types';
 import { VirtualScrollStore, VirtualScrollXStore } from '../useVirtualScroll';
 
 /**
@@ -8,6 +8,7 @@ import { VirtualScrollStore, VirtualScrollXStore } from '../useVirtualScroll';
  * 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>): {
+    config: import('vue').ComputedRef<AreaSelectionConfig>;
     isSelecting: Ref<boolean, boolean>;
     getClass: (cellKey: string, absoluteRowIndex: number, colKey: UniqKey) => string[];
     get: () => {

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

@@ -325,6 +325,7 @@ export type AreaSelectionRange = {
 };
 /** 单元格选区配置 */
 export type AreaSelectionConfig<T extends Record<string, any> = any> = {
+    enabled?: boolean;
     /**
      * 复制时的单元格文本格式化回调。
      * 如果你使用了 customCell 自定义渲染，应该提供此回调以确保复制内容与展示内容一致。

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

@@ -1,5 +1,5 @@
 import { ComputedRef, Ref, ShallowRef } from 'vue';
-import { StkTableColumn } from './types';
+import { AreaSelectionConfig, StkTableColumn } from './types';
 import { VirtualScrollStore, VirtualScrollXStore } from './useVirtualScroll';
 
 /**
@@ -7,4 +7,4 @@ import { VirtualScrollStore, VirtualScrollXStore } from './useVirtualScroll';
  *
  * 在低版本浏览器中，虚拟滚动时，使用键盘滚动，等选中的行消失在视口外时，滚动会失效。
  */
-export declare function useKeyboardArrowScroll<DT extends Record<string, any>>(targetElement: Ref<HTMLElement | undefined>, props: any, scrollTo: (y: number | null, x: number | null) => void, virtualScroll: Ref<VirtualScrollStore>, virtualScrollX: Ref<VirtualScrollXStore>, tableHeaders: ShallowRef<StkTableColumn<DT>[][]>, virtual_on: ComputedRef<boolean>): void;
+export declare function useKeyboardArrowScroll<DT extends Record<string, any>>(targetElement: Ref<HTMLElement | undefined>, props: any, scrollTo: (y: number | null, x: number | null) => void, virtualScroll: Ref<VirtualScrollStore>, virtualScrollX: Ref<VirtualScrollXStore>, tableHeaders: ShallowRef<StkTableColumn<DT>[][]>, virtual_on: ComputedRef<boolean>, areaSelectionConfig: ComputedRef<AreaSelectionConfig>): void;

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>>, isExperimentalScrollY: Ref<boolean | undefined>): readonly [Ref<{
+export declare function useVirtualScroll(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.4
+ * version: v0.11.6
  * description: High performance realtime virtual table for vue3 and vue2.7
  * author: japlus
  * homepage: https://ja-plus.github.io/stk-table-vue/
@@ -357,6 +357,13 @@ function useAreaSelection(props, emits, tableContainerRef, dataSourceCopy, table
   let autoScrollRafId = 0;
   let lastMouseClientX = 0;
   let lastMouseClientY = 0;
+  const config = computed(() => {
+    if (typeof props.areaSelection === "boolean") {
+      const b = props.areaSelection;
+      return { enabled: b, keyboard: b };
+    }
+    return props.areaSelection;
+  });
   const colKeyToIndexMap = computed(() => {
     const headers = tableHeaderLast.value;
     const map = /* @__PURE__ */ new Map();
@@ -533,7 +540,7 @@ function useAreaSelection(props, emits, tableContainerRef, dataSourceCopy, table
     return { deltaX, deltaY };
   }
   function onSelectionMouseDown(e) {
-    if (!props.areaSelection || e.button !== 0) return;
+    if (!config.value.enabled || e.button !== 0) return;
     const rowIndex = getClosestTrIndex(e.target);
     const colKey = getClosestColKey(e.target);
     const colIndex = getColIndexByKey(colKey);
@@ -663,12 +670,11 @@ function useAreaSelection(props, emits, tableContainerRef, dataSourceCopy, table
     emits("area-selection-change", range, { rows, cols: selectedCols });
   }
   function getFormatCellFn() {
-    const cfg = props.areaSelection;
-    return cfg && typeof cfg === "object" && typeof cfg.formatCellForClipboard === "function" ? cfg.formatCellForClipboard : null;
+    const cfg = config.value;
+    return typeof cfg.formatCellForClipboard === "function" ? cfg.formatCellForClipboard : null;
   }
   const keyboardEnabled = computed(() => {
-    const cfg = props.areaSelection;
-    return cfg && typeof cfg === "object" && cfg.keyboard === true;
+    return config.value.keyboard;
   });
   function copySelectedArea() {
     if (!selectionRange.value) return "";
@@ -700,7 +706,7 @@ function useAreaSelection(props, emits, tableContainerRef, dataSourceCopy, table
     return text;
   }
   function onKeydown(e) {
-    if (!props.areaSelection) return;
+    if (!config.value.enabled) return;
     const key = e.key;
     if (key === KEY_ESCAPE || key === KEY_ESC) {
       if (selectionRange.value) {
@@ -785,10 +791,11 @@ function useAreaSelection(props, emits, tableContainerRef, dataSourceCopy, table
     const footerHeight = tfoot ? tfoot.offsetHeight : 0;
     const vs = virtualScroll.value;
     const vsx = virtualScrollX.value;
+    const isScrollRowByRow = props.scrollRowByRow;
     const rowHeight = vs.rowHeight;
     const targetRowTop = rowIndex * rowHeight;
     const targetRowBottom = targetRowTop + rowHeight;
-    const visibleTop = container.scrollTop;
+    const visibleTop = isScrollRowByRow ? vs.scrollTop : container.scrollTop;
     const visibleBottom = visibleTop + vs.containerHeight - headerHeight - footerHeight;
     let newScrollTop = null;
     if (targetRowTop < visibleTop) {
@@ -840,6 +847,7 @@ function useAreaSelection(props, emits, tableContainerRef, dataSourceCopy, table
     isSelecting.value = false;
   }
   return {
+    config,
     isSelecting,
     getClass: getAreaSelectionClasses,
     get: getSelectedArea,
@@ -852,6 +860,7 @@ const ON_DEMAND_FEATURE = {
   [useAreaSelection.name]: () => {
     console.warn("useAreaSelection is not registered");
     return {
+      config: computed(() => ({ enabled: false })),
       isSelecting: ref(false),
       onMD: () => {
       },
@@ -1403,7 +1412,7 @@ var ScrollCodes = /* @__PURE__ */ ((ScrollCodes2) => {
   return ScrollCodes2;
 })(ScrollCodes || {});
 const ScrollCodesValues = Object.values(ScrollCodes);
-function useKeyboardArrowScroll(targetElement, props, scrollTo, virtualScroll, virtualScrollX, tableHeaders, virtual_on) {
+function useKeyboardArrowScroll(targetElement, props, scrollTo, virtualScroll, virtualScrollX, tableHeaders, virtual_on, areaSelectionConfig) {
   let isMouseOver = false;
   watch(virtual_on, (val) => {
     if (!val) {
@@ -1430,8 +1439,7 @@ function useKeyboardArrowScroll(targetElement, props, scrollTo, virtualScroll, v
   }
   function handleKeydown(e) {
     if (!virtual_on.value) return;
-    const areaSelection = props.areaSelection;
-    if (areaSelection && typeof areaSelection === "object" && areaSelection.keyboard) return;
+    if (areaSelectionConfig.value.keyboard) return;
     const keyCode = e.code;
     if (!ScrollCodesValues.includes(keyCode)) return;
     if (!isMouseOver) return;
@@ -2249,7 +2257,7 @@ function useVirtualScroll(props, tableContainerRef, trRef, dataSourceCopy, table
       height = 0;
     }
     const { clientHeight, scrollHeight } = tableContainerRef.value || {};
-    let scrollTop = ((_a = tableContainerRef.value) == null ? void 0 : _a.scrollTop) || 0;
+    let scrollTop = isExperimentalScrollY.value ? virtualScroll.value.scrollTop : ((_a = tableContainerRef.value) == null ? void 0 : _a.scrollTop) || 0;
     const rowHeight = getRowHeightFn.value();
     const containerHeight = height || clientHeight || DEFAULT_TABLE_HEIGHT;
     const { headless } = props;
@@ -2306,13 +2314,7 @@ function useVirtualScroll(props, tableContainerRef, trRef, dataSourceCopy, table
     const dataSourceCopyTemp = dataSourceCopy.value;
     const dataLength = dataSourceCopyTemp.length;
     const rowHeight = getRowHeightFn.value();
-    const vsValue = {
-      startIndex: 0,
-      // github #34 init
-      // endIndex: , // FIXME: endIndex may be old value
-      offsetTop: 0
-      // github #34 init
-    };
+    const vsValue = {};
     const scrollHeight = dataLength * rowHeight + tableHeaderHeight.value;
     const { enabled: scrollbarEnable } = scrollbarOptions.value;
     if (scrollbarEnable) {
@@ -2326,6 +2328,7 @@ function useVirtualScroll(props, tableContainerRef, trRef, dataSourceCopy, table
     vsValue.scrollTop = sTop;
     Object.assign(virtualScroll.value, vsValue);
     if (!virtual_on.value) {
+      Object.assign(virtualScroll.value, { startIndex: 0, endIndex: 0, offsetTop: 0 });
       return;
     }
     const { autoRowHeight, stripe, optimizeVue2Scroll } = props;
@@ -2389,7 +2392,7 @@ function useVirtualScroll(props, tableContainerRef, trRef, dataSourceCopy, table
       startIndex = correctedStartIndex;
       endIndex = correctedEndIndex;
     }
-    if (stripe && startIndex > 0 && startIndex % 2) {
+    if (stripe && !isExperimentalScrollY.value && startIndex > 0 && startIndex % 2) {
       startIndex -= 1;
       if (autoRowHeight || hasExpandCol.value) {
         const height = getRowHeightFn.value(dataSourceCopyTemp[startIndex]);
@@ -2895,9 +2898,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       scrollbarOptions,
       isExperimentalScrollY
     );
-    const rafUpdateVirtualScrollYForWheel = rafThrottle((scrollTop) => {
-      updateVirtualScrollY(scrollTop);
-    });
+    const rafUpdateVirtualScrollYForWheel = rafThrottle(updateVirtualScrollY);
     const [scrollbar, showScrollbar, onVerticalScrollbarMouseDown, onHorizontalScrollbarMouseDown, updateCustomScrollbar] = useScrollbar(
       props,
       tableContainerRef,
@@ -2920,27 +2921,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     if (props.autoResize) {
       useAutoResize(tableContainerRef, initVirtualScroll, props, 200);
     }
-    useKeyboardArrowScroll(tableContainerRef, props, scrollTo, virtualScroll, virtualScrollX, tableHeaders, virtual_on);
-    const [fixedCols, fixedColClassMap, updateFixedShadow] = useFixedCol(
-      props,
-      colKeyGen,
-      getFixedColPosition,
-      tableHeaders,
-      tableHeadersForCalc,
-      tableContainerRef
-    );
-    const [colResizeOn, isColResizing, onThResizeMouseDown] = useColResize(
-      props,
-      emits,
-      tableContainerRef,
-      tableHeaderLast,
-      colResizeIndicatorRef,
-      colKeyGen,
-      fixedCols
-    );
-    const [toggleExpandRow, setRowExpand] = useRowExpand(emits, dataSourceCopy, rowKeyGen);
-    const [toggleTreeNode, setTreeExpand, flatTreeData] = useTree(props, dataSourceCopy, rowKeyGen, emits);
     const {
+      config: areaSelectionConfig,
       isSelecting: isAreaSelecting,
       onMD: onSelectionMouseDown,
       getClass: getAreaSelectionClasses,
@@ -2959,6 +2941,26 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       virtualScroll,
       virtualScrollX
     );
+    useKeyboardArrowScroll(tableContainerRef, props, scrollTo, virtualScroll, virtualScrollX, tableHeaders, virtual_on, areaSelectionConfig);
+    const [fixedCols, fixedColClassMap, updateFixedShadow] = useFixedCol(
+      props,
+      colKeyGen,
+      getFixedColPosition,
+      tableHeaders,
+      tableHeadersForCalc,
+      tableContainerRef
+    );
+    const [colResizeOn, isColResizing, onThResizeMouseDown] = useColResize(
+      props,
+      emits,
+      tableContainerRef,
+      tableHeaderLast,
+      colResizeIndicatorRef,
+      colKeyGen,
+      fixedCols
+    );
+    const [toggleExpandRow, setRowExpand] = useRowExpand(emits, dataSourceCopy, rowKeyGen);
+    const [toggleTreeNode, setTreeExpand, flatTreeData] = useTree(props, dataSourceCopy, rowKeyGen, emits);
     watch(
       () => props.columns,
       () => {
@@ -3204,7 +3206,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       if (props.cellActive && currentSelectedCellKey.value === cellKey) {
         classList.push("active");
       }
-      if (props.areaSelection) {
+      if (areaSelectionConfig.value.enabled) {
         const absRowIndex = getRowIndex(rowIndex);
         classList.push(...getAreaSelectionClasses(cellKey, absRowIndex, colKey));
       }
@@ -3310,7 +3312,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     function onCellMouseDown(e) {
       const { row, col, rowIndex } = getCellEventData(e);
       emits("cell-mousedown", e, row, col, { rowIndex });
-      if (props.areaSelection) {
+      if (areaSelectionConfig.value.enabled) {
         onSelectionMouseDown(e);
       }
     }
@@ -3473,7 +3475,14 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     }
     function scrollTo(top = 0, left = 0) {
       if (!tableContainerRef.value) return;
-      if (top !== null) tableContainerRef.value.scrollTop = top;
+      if (top !== null) {
+        if (isExperimentalScrollY.value) {
+          updateVirtualScrollY(top);
+          updateCustomScrollbar();
+        } else {
+          tableContainerRef.value.scrollTop = top;
+        }
+      }
       if (left !== null) tableContainerRef.value.scrollLeft = left;
     }
     function getTableData() {
@@ -3662,7 +3671,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           "is-area-selecting": unref(isAreaSelecting),
           "exp-scroll-y": isExperimentalScrollY.value
         }]),
-        tabindex: props.areaSelection ? 0 : void 0,
+        tabindex: unref(areaSelectionConfig).enabled ? 0 : void 0,
         style: normalizeStyle({
           "--row-height": props.autoRowHeight ? void 0 : unref(virtualScroll).rowHeight + "px",
           "--header-row-height": props.headerRowHeight + "px",

package/lib/style.css

@@ -1,6 +1,6 @@
 /**
  * name: stk-table-vue
- * version: v0.11.4
+ * version: v0.11.6
  * 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.5",
+  "version": "0.11.6",
   "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

@@ -28,7 +28,7 @@
             'is-area-selecting': isAreaSelecting,
             'exp-scroll-y': isExperimentalScrollY,
         }"
-        :tabindex="props.areaSelection ? 0 : void 0"
+        :tabindex="areaSelectionConfig.enabled ? 0 : void 0"
         :style="{
             '--row-height': props.autoRowHeight ? void 0 : virtualScroll.rowHeight + 'px',
             '--header-row-height': props.headerRowHeight + 'px',
@@ -864,9 +864,7 @@ const [
 );
 
 /** requestAnimationFrame throttled version of updateVirtualScrollY for smoother wheel scrolling */
-const rafUpdateVirtualScrollYForWheel = rafThrottle((scrollTop: number) => {
-    updateVirtualScrollY(scrollTop);
-});
+const rafUpdateVirtualScrollYForWheel = rafThrottle(updateVirtualScrollY);
 
 const [scrollbar, showScrollbar, onVerticalScrollbarMouseDown, onHorizontalScrollbarMouseDown, updateCustomScrollbar] = useScrollbar(
     props,
@@ -896,8 +894,29 @@ if (props.autoResize) {
     useAutoResize(tableContainerRef, initVirtualScroll, props, 200);
 }
 
+const {
+    config: areaSelectionConfig,
+    isSelecting: isAreaSelecting,
+    onMD: onSelectionMouseDown,
+    getClass: getAreaSelectionClasses,
+    get: getSelectedArea,
+    clear: clearSelectedArea,
+    copy: copySelectedArea,
+} = ON_DEMAND_FEATURE[useAreaSelection.name](
+    props,
+    emits,
+    tableContainerRef,
+    dataSourceCopy,
+    tableHeaderLast,
+    colKeyGen,
+    cellKeyGen,
+    scrollTo,
+    virtualScroll,
+    virtualScrollX,
+);
+
 /** 键盘箭头滚动 */
-useKeyboardArrowScroll(tableContainerRef, props, scrollTo, virtualScroll, virtualScrollX, tableHeaders, virtual_on);
+useKeyboardArrowScroll(tableContainerRef, props, scrollTo, virtualScroll, virtualScrollX, tableHeaders, virtual_on, areaSelectionConfig);
 
 /** 固定列处理 */
 const [fixedCols, fixedColClassMap, updateFixedShadow] = useFixedCol(
@@ -923,26 +942,6 @@ const [toggleExpandRow, setRowExpand] = useRowExpand(emits, dataSourceCopy, rowK
 
 const [toggleTreeNode, setTreeExpand, flatTreeData] = useTree(props, dataSourceCopy, rowKeyGen, emits);
 
-const {
-    isSelecting: isAreaSelecting,
-    onMD: onSelectionMouseDown,
-    getClass: getAreaSelectionClasses,
-    get: getSelectedArea,
-    clear: clearSelectedArea,
-    copy: copySelectedArea,
-} = ON_DEMAND_FEATURE[useAreaSelection.name](
-    props,
-    emits,
-    tableContainerRef,
-    dataSourceCopy,
-    tableHeaderLast,
-    colKeyGen,
-    cellKeyGen,
-    scrollTo,
-    virtualScroll,
-    virtualScrollX,
-);
-
 watch(
     () => props.columns,
     () => {
@@ -1240,7 +1239,7 @@ function getTDProps(row: PrivateRowDT | null | undefined, col: StkTableColumn<Pr
     }
 
     // 单元格拖选选区样式
-    if (props.areaSelection) {
+    if (areaSelectionConfig.value.enabled) {
         const absRowIndex = getRowIndex(rowIndex);
         classList.push(...getAreaSelectionClasses(cellKey, absRowIndex, colKey));
     }
@@ -1363,7 +1362,7 @@ function onCellMouseDown(e: MouseEvent) {
     const { row, col, rowIndex } = getCellEventData(e);
     emits('cell-mousedown', e, row, col, { rowIndex });
     // 单元格拖选
-    if (props.areaSelection) {
+    if (areaSelectionConfig.value.enabled) {
         onSelectionMouseDown(e);
     }
 }
@@ -1570,7 +1569,14 @@ function setSelectedCell(row?: DT, col?: StkTableColumn<DT>, option = { silent:
  */
 function scrollTo(top: number | null = 0, left: number | null = 0) {
     if (!tableContainerRef.value) return;
-    if (top !== null) tableContainerRef.value.scrollTop = top;
+    if (top !== null) {
+        if (isExperimentalScrollY.value) {
+            updateVirtualScrollY(top);
+            updateCustomScrollbar();
+        } else {
+            tableContainerRef.value.scrollTop = top;
+        }
+    }
     if (left !== null) tableContainerRef.value.scrollLeft = left;
 }
 

package/src/StkTable/features/useAreaSelection.ts

@@ -1,5 +1,5 @@
 import { Ref, ShallowRef, computed, onBeforeUnmount, onMounted, ref } from 'vue';
-import { AreaSelectionRange, CellKeyGen, ColKeyGen, StkTableColumn, UniqKey } from '../types';
+import { AreaSelectionConfig, AreaSelectionRange, CellKeyGen, ColKeyGen, StkTableColumn, UniqKey } from '../types';
 import { VirtualScrollStore, VirtualScrollXStore } from '../useVirtualScroll';
 import { getClosestColKey, getClosestTrIndex } from '../utils';
 import { getCalculatedColWidth } from '../utils/constRefUtils';
@@ -62,6 +62,14 @@ export function useAreaSelection<DT extends Record<string, any>>(
     let lastMouseClientX = 0;
     let lastMouseClientY = 0;
 
+    const config = computed<AreaSelectionConfig>(() => {
+        if (typeof props.areaSelection === 'boolean') {
+            const b = props.areaSelection;
+            return { enabled: b, keyboard: b };
+        }
+        return props.areaSelection;
+    });
+
     /** colKey → absolute index 映射 */
     const colKeyToIndexMap = computed(() => {
         const headers = tableHeaderLast.value;
@@ -292,7 +300,7 @@ export function useAreaSelection<DT extends Record<string, any>>(
 
     /** mousedown 处理：设置锚点，开始拖选 */
     function onSelectionMouseDown(e: MouseEvent) {
-        if (!props.areaSelection || e.button !== 0) return;
+        if (!config.value.enabled || e.button !== 0) return;
 
         const rowIndex = getClosestTrIndex(e.target as HTMLElement);
         const colKey = getClosestColKey(e.target as HTMLElement);
@@ -483,14 +491,13 @@ export function useAreaSelection<DT extends Record<string, any>>(
 
     /** 获取 areaSelection 配置中的格式化回调 */
     function getFormatCellFn() {
-        const cfg = props.areaSelection;
-        return cfg && typeof cfg === 'object' && typeof cfg.formatCellForClipboard === 'function' ? cfg.formatCellForClipboard : null;
+        const cfg = config.value;
+        return typeof cfg.formatCellForClipboard === 'function' ? cfg.formatCellForClipboard : null;
     }
 
     /** 是否启用键盘控制选区移动 */
     const keyboardEnabled = computed(() => {
-        const cfg = props.areaSelection;
-        return cfg && typeof cfg === 'object' && cfg.keyboard === true;
+        return config.value.keyboard;
     });
 
     /**
@@ -538,7 +545,7 @@ export function useAreaSelection<DT extends Record<string, any>>(
      * Arrow keys / Tab 移动选区（keyboard=true时）
      **/
     function onKeydown(e: KeyboardEvent) {
-        if (!props.areaSelection) return;
+        if (!config.value.enabled) return;
 
         const key = e.key;
 
@@ -666,13 +673,17 @@ export function useAreaSelection<DT extends Record<string, any>>(
         const vs = virtualScroll.value;
         const vsx = virtualScrollX.value;
 
+        // 是否开启按行滚动模式（experimental.scrollY 模式）
+        const isScrollRowByRow = props.scrollRowByRow;
+
         // 计算目标行的位置（基于虚拟滚动数据）
         const rowHeight = vs.rowHeight;
         const targetRowTop = rowIndex * rowHeight;
         const targetRowBottom = targetRowTop + rowHeight;
 
         // 计算可视区域
-        const visibleTop = container.scrollTop;
+        // experimental.scrollY 模式下，容器 scrollTop 始终为 0，需要使用 virtualScroll.scrollTop
+        const visibleTop = isScrollRowByRow ? vs.scrollTop : container.scrollTop;
         const visibleBottom = visibleTop + vs.containerHeight - headerHeight - footerHeight;
 
         // 计算需要的垂直滚动位置
@@ -681,7 +692,7 @@ export function useAreaSelection<DT extends Record<string, any>>(
             // 目标行在可视区域上方，滚动到使目标行位于顶部
             newScrollTop = targetRowTop;
         } else if (targetRowBottom > visibleBottom) {
-            // 目标行在可视区域下方，滚动到使目标行位于底部
+            // 目标行在可视区域下方
             newScrollTop = targetRowBottom - (vs.containerHeight - headerHeight - footerHeight);
         }
 
@@ -704,7 +715,6 @@ export function useAreaSelection<DT extends Record<string, any>>(
             newScrollLeft = targetColRight - vsx.containerWidth + rightFixedWidth;
         }
 
-        // 执行滚动
         if (newScrollTop !== null || newScrollLeft !== null) {
             scrollTo(newScrollTop, newScrollLeft);
         }
@@ -755,6 +765,7 @@ export function useAreaSelection<DT extends Record<string, any>>(
     }
 
     return {
+        config,
         isSelecting,
         getClass: getAreaSelectionClasses,
         get: getSelectedArea,

package/src/StkTable/registerFeature.ts

@@ -1,4 +1,4 @@
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 import { useAreaSelection } from './features';
 
 type OnDemandFeature = {
@@ -9,6 +9,7 @@ export const ON_DEMAND_FEATURE: OnDemandFeature = {
     [useAreaSelection.name]: (() => {
         console.warn('useAreaSelection is not registered');
         return {
+            config: computed(() => ({ enabled: false })),
             isSelecting: ref(false),
             onMD: () => {},
             getClass: () => [],

package/src/StkTable/types/index.ts

@@ -354,6 +354,7 @@ export type AreaSelectionRange = {
 
 /** 单元格选区配置 */
 export type AreaSelectionConfig<T extends Record<string, any> = any> = {
+    enabled?: boolean;
     /**
      * 复制时的单元格文本格式化回调。
      * 如果你使用了 customCell 自定义渲染，应该提供此回调以确保复制内容与展示内容一致。

package/src/StkTable/useKeyboardArrowScroll.ts

@@ -1,5 +1,5 @@
 import { ComputedRef, Ref, ShallowRef, onBeforeUnmount, onMounted, watch } from 'vue';
-import { StkTableColumn } from './types';
+import { AreaSelectionConfig, StkTableColumn } from './types';
 import { VirtualScrollStore, VirtualScrollXStore } from './useVirtualScroll';
 
 /** 翻页按键 */
@@ -29,6 +29,7 @@ export function useKeyboardArrowScroll<DT extends Record<string, any>>(
     virtualScrollX: Ref<VirtualScrollXStore>,
     tableHeaders: ShallowRef<StkTableColumn<DT>[][]>,
     virtual_on: ComputedRef<boolean>,
+    areaSelectionConfig: ComputedRef<AreaSelectionConfig>,
 ) {
     /** 检测鼠标是否悬浮在表格体上 */
     let isMouseOver = false;
@@ -62,8 +63,7 @@ export function useKeyboardArrowScroll<DT extends Record<string, any>>(
     function handleKeydown(e: KeyboardEvent) {
         if (!virtual_on.value) return; // 非虚拟滚动使用浏览器默认滚动
         // 如果单元格选区键盘控制已启用，则不处理滚动，交给 useAreaSelection 处理
-        const areaSelection = props.areaSelection;
-        if (areaSelection && typeof areaSelection === 'object' && areaSelection.keyboard) return;
+        if (areaSelectionConfig.value.keyboard) return;
         const keyCode = e.code;
         if (!ScrollCodesValues.includes(keyCode as any)) return;
         if (!isMouseOver) return; // 不悬浮还是要触发键盘事件的

package/src/StkTable/useVirtualScroll.ts

@@ -47,7 +47,7 @@ const VUE2_SCROLL_TIMEOUT_MS = 200;
  * virtual scroll
  * @returns
  */
-export function useVirtualScroll<DT extends Record<string, any>>(
+export function useVirtualScroll(
     props: any,
     tableContainerRef: Ref<HTMLElement | undefined>,
     trRef: Ref<HTMLTableRowElement[] | undefined>,
@@ -201,7 +201,9 @@ export function useVirtualScroll<DT extends Record<string, any>>(
             height = 0;
         }
         const { clientHeight, scrollHeight } = tableContainerRef.value || {};
-        let scrollTop = tableContainerRef.value?.scrollTop || 0;
+        // 当 isExperimentalScrollY 为 true 时，DOM 的 scrollTop 始终为 0（纵向滚动通过 transform 模拟）
+        // 此时应该使用 virtualScroll 中保存的 scrollTop 值
+        let scrollTop = isExperimentalScrollY.value ? virtualScroll.value.scrollTop : tableContainerRef.value?.scrollTop || 0;
 
         const rowHeight = getRowHeightFn.value();
         const containerHeight = height || clientHeight || DEFAULT_TABLE_HEIGHT;
@@ -272,11 +274,7 @@ export function useVirtualScroll<DT extends Record<string, any>>(
         const dataLength = dataSourceCopyTemp.length;
         const rowHeight = getRowHeightFn.value();
 
-        const vsValue: any = {
-            startIndex: 0, // github #34 init
-            // endIndex: , // FIXME: endIndex may be old value
-            offsetTop: 0, // github #34 init
-        };
+        const vsValue: any = {};
         const scrollHeight = dataLength * rowHeight + tableHeaderHeight.value;
         const { enabled: scrollbarEnable } = scrollbarOptions.value;
         if (scrollbarEnable) {
@@ -292,6 +290,8 @@ export function useVirtualScroll<DT extends Record<string, any>>(
         Object.assign(virtualScroll.value, vsValue);
 
         if (!virtual_on.value) {
+            // github #34 init
+            Object.assign(virtualScroll.value, { startIndex: 0, endIndex: 0, offsetTop: 0 });
             return;
         }
 
@@ -372,7 +372,7 @@ export function useVirtualScroll<DT extends Record<string, any>>(
             endIndex = correctedEndIndex;
         }
 
-        if (stripe && startIndex > 0 && startIndex % 2) {
+        if (stripe && !isExperimentalScrollY.value && startIndex > 0 && startIndex % 2) {
             // 斑马纹情况下，每滚动偶数行才加载。防止斑马纹错位。
             startIndex -= 1; // 奇数-1变成偶数
             if (autoRowHeight || hasExpandCol.value) {