stk-table-vue 0.8.2 → 0.8.4

package/README.md

@@ -12,57 +12,27 @@
     </p>
 </p>
 
-> StK Table (Sticky Table) 是一个基于Vue 的高性能虚拟列表组件。
-> 用于实时数据展示，数据高亮动效。
+> Stk Table Vue(Sticky Table) is a high-performance virtual list component based on Vue.
+>
+> Used for real-time data display, with data highlighting and dynamic effects
+>
+> Support Vue3 and Vue2.7
 
-> Vue2.7支持引入源码(**ts**)使用。
 
-## Doc
-文档： [Stk Table Vue 高性能虚拟表格](https://ja-plus.github.io/stk-table-vue/)
+## Documentation
+### [Stk Table Vue Official CN](https://ja-plus.github.io/stk-table-vue/)
+
 
 ## Repo: 
 - [Github](https://github.com/ja-plus/stk-table-vue)
 - [Gitee](https://gitee.com/japlus/stk-table-vue) 🇨🇳
 
 ## Demo
+[<span style="font-size: 16px;font-weight: bold;">Online Demo in stackblitz</span>](https://stackblitz.com/edit/vitejs-vite-ad91hh?file=src%2FDemo%2Findex.vue)
+
+## Compare
+Compare performance with other vue table [vue-table-compare](https://github.com/ja-plus/vue-table-compare)
 
-[<span style="font-size: 16px;font-weight: bold;">Online Demo</span>](https://stackblitz.com/edit/vitejs-vite-ad91hh?file=src%2FDemo%2Findex.vue)
-
-## Feature TODO:
-* [x] 高亮行，单元格。
-  - [x] 使用 `Web Animations API` 实现高亮。(`v0.3.4` 变更为默认值)
-  - [x] 支持配置高亮参数（持续时间，颜色，频率）。(`v0.2.9`)
-  - [x] `setHighlightDimRow`/`setHighlightCellRow`支持自定义高亮css类名。(`v0.2.9`)
-* [x] 虚拟列表。
-  - [x] 纵向。
-  - [x] 横向（必须设置列宽）。
-  - [x] 支持不定行高。（`v0.6.0`）
-* [x] 列固定。
-  - [x] 固定列阴影。
-    - [x] 多级表头固定列阴影。
-    - [x] sticky column 动态计算阴影位置。(`v0.4.0`)
-* [x] 行展开。(`v0.5.0`)
-* [x] 行拖动。(`v0.5.0`)
-* [x] 树形。(`v0.7.0`)
-* [x] 单元格合并。(`v0.8.0`)
-* [] 列筛选。
-* [x] 斑马纹。
-* [x] 拖动更改列顺序。
-* [x] 拖动调整列宽。
-* [x] 排序
-  - [x] 支持配置 `null` | `undefined` 永远排最后。
-  - [x] 支持配置 string 使用 `String.prototype.localCompare` 排序。
-* [x] 多级表头。
-  - [] 横向虚拟滚动。
-* [x] 支持table-layout: fixed 配置。
-* [x] 鼠标悬浮在表格上，键盘滚动虚拟表格。
-  - [x] 键盘 `ArrowUp`/`ArrowDown`/`ArrowLeft`/`ArrowRight`/`PageUp`/ `PageDown` 按键支持。
-* [] 非虚拟滚动时，大数据分批加载。
-* [x] vue2.7支持（引入源码使用）。
-  - [x] `props.optimizeVue2Scroll` 优化vue2虚拟滚动流畅度。(`v0.2.0`)
-* [x] 支持配置序号列。`StkTableColumn['type']`。(`v0.3.0`)
-* [x] `props.cellHover`单元格悬浮样式。(`v0.3.2`)
-* [] 惯性滚动优化。
 
 
 ## Usage
@@ -78,17 +48,17 @@ const stkTableRef = useTemplateRef('stkTableRef');
 
 // highlight row
 stkTableRef.value.setHighlightDimRow([rowKey]，{
-  method: 'css'|'animation',// 默认 animation。
-  className: 'custom-class-name', // method css 时生效。
+  method: 'css'|'animation',// default animation。
+  className: 'custom-class-name', // method css。
   keyframe: [{backgroundColor:'#aaa'}, {backgroundColor: '#222'}],//same as https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Animations_API/Keyframe_Formats
-  duration: 2000,// 动画时长。
+  duration: 2000,。
 });
  // highlight cell
 stkTableRef.value.setHighlightDimCell(rowKey, colDataIndex, {
   method: 'css'|'animation',
-  className:'custom-class-name', // method css 时生效。
-  keyframe: [{backgroundColor:'#aaa'}, {backgroundColor: '#222'}], // method animation 时生效。
-  duration: 2000,// 动画时长。
+  className:'custom-class-name', // method css。
+  keyframe: [{backgroundColor:'#aaa'}, {backgroundColor: '#222'}], // method animation。
+  duration: 2000,。
 });
 
 const columns = [
@@ -114,10 +84,7 @@ const dataSource = [
 ```
 
 ### Vue2.7 Usage
-[在vue2中使用](https://ja-plus.github.io/stk-table-vue/main/start/vue2-usage.html)
-
-## Notice
-注意，组件会改动 `props.columns` 中的对象。如果多个组件 `columns` 数组元素存在引用同一个 `StkTableColumn` 对象。则考虑赋值 `columns` 前进行深拷贝。
+[Vue2.7 Usage](https://ja-plus.github.io/stk-table-vue/main/start/vue2-usage.html)
 
 ## API
 ### Props
@@ -136,7 +103,7 @@ const dataSource = [
 [StkTableColumn 列配置](https://ja-plus.github.io/stk-table-vue/main/api/stk-table-column.html)
 
 ### setHighlightDimCell & setHighlightDimRow
-[高亮使用文档](https://ja-plus.github.io/stk-table-vue/main/api/expose.html#sethighlightdimcell)
+[Highlight 高亮](https://ja-plus.github.io/stk-table-vue/main/api/expose.html#sethighlightdimcell)
 
 
 ### Example
@@ -209,4 +176,4 @@ const dataSource = [
 
 
 ## Other
-* `$*$` 兼容注释
+* `$*$`

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

@@ -347,7 +347,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
      * en: Set expanded rows
      * @see {@link setRowExpand}
      */
-    setRowExpand: (rowKeyOrRow: string | undefined | PrivateRowDT, expand?: boolean, data?: {
+    setRowExpand: (rowKeyOrRow: string | undefined | PrivateRowDT, expand?: boolean | null, data?: {
         col?: StkTableColumn<PrivateRowDT>;
         silent?: boolean;
     }) => void;

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

@@ -0,0 +1,14 @@
+import { ShallowRef } from 'vue';
+import { PrivateStkTableColumn, RowKeyGen, UniqKey } from './types';
+
+type Options = {
+    props: any;
+    tableHeaderLast: ShallowRef<PrivateStkTableColumn<any>[]>;
+    rowKeyGen: RowKeyGen;
+    dataSourceCopy: ShallowRef<any[]>;
+};
+export declare function useMaxRowSpan({ props, tableHeaderLast, rowKeyGen, dataSourceCopy }: Options): {
+    maxRowSpan: Map<UniqKey, number>;
+    updateMaxRowSpan: () => void;
+};
+export {};

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

@@ -1,13 +1,14 @@
 import { ShallowRef } from 'vue';
 import { ColKeyGen, MergeCellsParam, PrivateStkTableColumn, RowKeyGen, UniqKey } from './types';
 
-export declare function useMergeCells({ props, tableHeaderLast, rowKeyGen, colKeyGen, virtual_dataSourcePart, }: {
+type Options = {
     props: any;
     tableHeaderLast: ShallowRef<PrivateStkTableColumn<any>[]>;
     rowKeyGen: RowKeyGen;
     colKeyGen: ColKeyGen;
     virtual_dataSourcePart: ShallowRef<any[]>;
-}): {
+};
+export declare function useMergeCells({ props, tableHeaderLast, rowKeyGen, colKeyGen, virtual_dataSourcePart, }: Options): {
     hiddenCellMap: import('vue').Ref<Record<UniqKey, Set<UniqKey>>, Record<UniqKey, Set<UniqKey>>>;
     mergeCellsWrapper: (row: MergeCellsParam<any>["row"], col: MergeCellsParam<any>["col"], rowIndex: MergeCellsParam<any>["rowIndex"], colIndex: MergeCellsParam<any>["colIndex"]) => {
         colspan?: number;
@@ -18,3 +19,4 @@ export declare function useMergeCells({ props, tableHeaderLast, rowKeyGen, colKe
     activeMergedCells: import('vue').Ref<Set<string> & Omit<Set<string>, keyof Set<any>>, Set<string> | (Set<string> & Omit<Set<string>, keyof Set<any>>)>;
     updateActiveMergedCells: (clear?: boolean) => void;
 };
+export {};

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

@@ -9,7 +9,7 @@ type Option<DT extends Record<string, any>> = {
 };
 export declare function useRowExpand({ dataSourceCopy, rowKeyGen, emits }: Option<DT>): {
     toggleExpandRow: (row: DT, col: StkTableColumn<DT>) => void;
-    setRowExpand: (rowKeyOrRow: string | undefined | DT, expand?: boolean, data?: {
+    setRowExpand: (rowKeyOrRow: string | undefined | DT, expand?: boolean | null, data?: {
         col?: StkTableColumn<DT>;
         silent?: boolean;
     }) => void;

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

@@ -9,6 +9,7 @@ type Option<DT extends Record<string, any>> = {
     tableHeaderLast: ShallowRef<PrivateStkTableColumn<DT>[]>;
     tableHeaders: ShallowRef<PrivateStkTableColumn<DT>[][]>;
     rowKeyGen: RowKeyGen;
+    maxRowSpan: Map<UniqKey, number>;
 };
 /** 暂存纵向虚拟滚动的数据 */
 export type VirtualScrollStore = {
@@ -45,11 +46,11 @@ export type VirtualScrollXStore = {
     scrollLeft: number;
 };
 /**
- * 虚拟滚动
+ * virtual scroll
  * @param param0
  * @returns
  */
-export declare function useVirtualScroll<DT extends Record<string, any>>({ props, tableContainerRef, trRef, dataSourceCopy, tableHeaderLast, tableHeaders, rowKeyGen, }: Option<DT>): {
+export declare function useVirtualScroll<DT extends Record<string, any>>({ props, tableContainerRef, trRef, dataSourceCopy, tableHeaderLast, tableHeaders, rowKeyGen, maxRowSpan, }: Option<DT>): {
     virtualScroll: Ref<{
         containerHeight: number;
         pageSize: number;

package/lib/stk-table-vue.js

@@ -853,9 +853,114 @@ function useKeyboardArrowScroll(targetElement, { props, scrollTo, virtualScroll,
     if (!isMouseOver) isMouseOver = true;
   }
 }
+function useMaxRowSpan({ props, tableHeaderLast, rowKeyGen, dataSourceCopy }) {
+  const maxRowSpan = /* @__PURE__ */ new Map();
+  function updateMaxRowSpan() {
+    if (!props.virtual) {
+      if (maxRowSpan.size) maxRowSpan.clear();
+      return;
+    }
+    maxRowSpan.clear();
+    const data = dataSourceCopy.value;
+    const columns = tableHeaderLast.value;
+    const columnsWithMerge = columns.filter((col) => col.mergeCells);
+    if (!columnsWithMerge.length) return;
+    const dataLength = data.length;
+    const mergeColumnsLength = columnsWithMerge.length;
+    for (let rowIndex = 0; rowIndex < dataLength; rowIndex++) {
+      const row = data[rowIndex];
+      const rowKey = rowKeyGen(row);
+      let currentMax = maxRowSpan.get(rowKey) || 0;
+      for (let colIndex = 0; colIndex < mergeColumnsLength; colIndex++) {
+        const col = columnsWithMerge[colIndex];
+        const { rowspan = 1 } = col.mergeCells({ row, col, rowIndex, colIndex }) || {};
+        if (rowspan > 1 && rowspan > currentMax) {
+          currentMax = rowspan;
+          maxRowSpan.set(rowKey, currentMax);
+        }
+      }
+    }
+  }
+  return {
+    maxRowSpan,
+    updateMaxRowSpan
+  };
+}
+function useMergeCells({
+  props,
+  tableHeaderLast,
+  rowKeyGen,
+  colKeyGen,
+  virtual_dataSourcePart
+}) {
+  const hiddenCellMap = ref({});
+  const hoverRowMap = ref({});
+  const hoverMergedCells = ref(/* @__PURE__ */ new Set());
+  const activeMergedCells = ref(/* @__PURE__ */ new Set());
+  watch([virtual_dataSourcePart, tableHeaderLast], () => {
+    hiddenCellMap.value = {};
+    hoverRowMap.value = {};
+  });
+  function hideCells(rowKey, startIndex, count, isSelfRow = false, mergeCellKey) {
+    for (let i = startIndex; i < startIndex + count; i++) {
+      if (!isSelfRow || i !== startIndex) {
+        const nextCol = tableHeaderLast.value[i];
+        if (!nextCol) break;
+        const nextColKey = colKeyGen.value(nextCol);
+        if (!hiddenCellMap.value[rowKey]) hiddenCellMap.value[rowKey] = /* @__PURE__ */ new Set();
+        hiddenCellMap.value[rowKey].add(nextColKey);
+      }
+      if (!hoverRowMap.value[rowKey]) hoverRowMap.value[rowKey] = /* @__PURE__ */ new Set();
+      hoverRowMap.value[rowKey].add(mergeCellKey);
+    }
+  }
+  function mergeCellsWrapper(row, col, rowIndex, colIndex) {
+    if (!col.mergeCells) return;
+    let { colspan, rowspan } = col.mergeCells({ row, col, rowIndex, colIndex }) || {};
+    colspan = colspan || 1;
+    rowspan = rowspan || 1;
+    if (colspan === 1 && rowspan === 1) return;
+    const rowKey = rowKeyGen(row);
+    const colKey = colKeyGen.value(col);
+    const curColIndex = tableHeaderLast.value.findIndex((item) => colKeyGen.value(item) === colKey);
+    const curRowIndex = virtual_dataSourcePart.value.findIndex((item) => rowKeyGen(item) === rowKey);
+    const mergedCellKey = pureCellKeyGen(rowKey, colKey);
+    if (curRowIndex === -1) return;
+    for (let i = curRowIndex; i < curRowIndex + rowspan; i++) {
+      const row2 = virtual_dataSourcePart.value[i];
+      if (!row2) break;
+      hideCells(rowKeyGen(row2), curColIndex, colspan, i === curRowIndex, mergedCellKey);
+    }
+    return { colspan, rowspan };
+  }
+  function updateHoverMergedCells(rowKey) {
+    const set = rowKey === void 0 ? null : hoverRowMap.value[rowKey];
+    hoverMergedCells.value = set || /* @__PURE__ */ new Set();
+  }
+  function updateActiveMergedCells(clear) {
+    if (!props.rowActive) return;
+    if (clear) {
+      activeMergedCells.value.clear();
+    } else {
+      activeMergedCells.value = new Set(hoverMergedCells.value);
+    }
+  }
+  return {
+    hiddenCellMap,
+    mergeCellsWrapper,
+    hoverMergedCells,
+    updateHoverMergedCells,
+    activeMergedCells,
+    updateActiveMergedCells
+  };
+}
 function useRowExpand({ dataSourceCopy, rowKeyGen, emits }) {
+  const expandedKey = "__EXPANDED__";
+  function isExpanded(row, col) {
+    return (row == null ? void 0 : row[expandedKey]) === col ? !(row == null ? void 0 : row[expandedKey]) : true;
+  }
   function toggleExpandRow(row, col) {
-    const isExpand = (row == null ? void 0 : row.__EXPANDED__) === col ? !(row == null ? void 0 : row.__EXPANDED__) : true;
+    const isExpand = isExpanded(row, col);
     setRowExpand(row, isExpand, { col });
   }
   function setRowExpand(rowKeyOrRow, expand, data) {
@@ -883,6 +988,9 @@ function useRowExpand({ dataSourceCopy, rowKeyGen, emits }) {
     }
     const row = tempData[index];
     const col = (data == null ? void 0 : data.col) || null;
+    if (expand == null) {
+      expand = isExpanded(row, col);
+    }
     if (expand) {
       const newExpandRow = {
         __ROW_KEY__: EXPANDED_ROW_KEY_PREFIX + rowKey,
@@ -1253,7 +1361,8 @@ function useVirtualScroll({
   dataSourceCopy,
   tableHeaderLast,
   tableHeaders,
-  rowKeyGen
+  rowKeyGen,
+  maxRowSpan
 }) {
   const tableHeaderHeight = ref(props.headerRowHeight);
   const virtualScroll = ref({
@@ -1458,6 +1567,32 @@ function useVirtualScroll({
       startIndex = Math.floor(sTop / rowHeight);
       endIndex = startIndex + pageSize;
     }
+    if (maxRowSpan.size) {
+      let correctedStartIndex = startIndex;
+      let correctedEndIndex = endIndex;
+      for (let i = 0; i < startIndex; i++) {
+        const row = dataSourceCopyTemp[i];
+        if (!row) continue;
+        const spanEndIndex = i + (maxRowSpan.get(rowKeyGen(row)) || 1);
+        if (spanEndIndex > startIndex) {
+          correctedStartIndex = i;
+          if (spanEndIndex > endIndex) {
+            correctedEndIndex = spanEndIndex;
+          }
+          break;
+        }
+      }
+      for (let i = correctedStartIndex; i < endIndex; i++) {
+        const row = dataSourceCopyTemp[i];
+        if (!row) continue;
+        const spanEndIndex = i + (maxRowSpan.get(rowKeyGen(row)) || 1);
+        if (spanEndIndex > correctedEndIndex) {
+          correctedEndIndex = Math.max(spanEndIndex, correctedEndIndex);
+        }
+      }
+      startIndex = correctedStartIndex;
+      endIndex = correctedEndIndex;
+    }
     if (stripe && startIndex > 0 && startIndex % 2) {
       startIndex -= 1;
       if (autoRowHeight || hasExpandCol.value) {
@@ -1561,77 +1696,6 @@ function useVirtualScroll({
     clearAllAutoHeight
   };
 }
-function useMergeCells({
-  props,
-  tableHeaderLast,
-  rowKeyGen,
-  colKeyGen,
-  virtual_dataSourcePart
-}) {
-  const hiddenCellMap = ref({});
-  const hoverRowMap = ref({});
-  const hoverMergedCells = ref(/* @__PURE__ */ new Set());
-  const activeMergedCells = ref(/* @__PURE__ */ new Set());
-  watch([virtual_dataSourcePart, tableHeaderLast], () => {
-    hiddenCellMap.value = {};
-    hoverRowMap.value = {};
-  });
-  function hideCells(rowKey, startIndex, count, isSelfRow = false, mergeCellKey) {
-    for (let i = startIndex; i < startIndex + count; i++) {
-      if (!isSelfRow || i !== startIndex) {
-        const nextCol = tableHeaderLast.value[i];
-        if (!nextCol) break;
-        const nextColKey = colKeyGen.value(nextCol);
-        if (!hiddenCellMap.value[rowKey]) hiddenCellMap.value[rowKey] = /* @__PURE__ */ new Set();
-        hiddenCellMap.value[rowKey].add(nextColKey);
-      }
-      if (!hoverRowMap.value[rowKey]) hoverRowMap.value[rowKey] = /* @__PURE__ */ new Set();
-      hoverRowMap.value[rowKey].add(mergeCellKey);
-    }
-  }
-  function mergeCellsWrapper(row, col, rowIndex, colIndex) {
-    if (!col.mergeCells) return;
-    let { colspan, rowspan } = col.mergeCells({ row, col, rowIndex, colIndex }) || {};
-    colspan = colspan || 1;
-    rowspan = rowspan || 1;
-    if (colspan === 1 && rowspan === 1) return;
-    const rowKey = rowKeyGen(row);
-    const colKey = colKeyGen.value(col);
-    const dataSourceSlice = virtual_dataSourcePart.value.slice();
-    const curColIndex = tableHeaderLast.value.findIndex((item) => colKeyGen.value(item) === colKey);
-    const curRowIndex = dataSourceSlice.findIndex((item) => rowKeyGen(item) === rowKey);
-    const mergedCellKey = pureCellKeyGen(rowKey, colKey);
-    if (curRowIndex === -1) return;
-    for (let i = curRowIndex; i < curRowIndex + rowspan; i++) {
-      const row2 = dataSourceSlice[i];
-      if (!row2) break;
-      const rKey = rowKeyGen(row2);
-      const isSelfRow = i === curRowIndex;
-      hideCells(rKey, curColIndex, colspan, isSelfRow, mergedCellKey);
-    }
-    return { colspan, rowspan };
-  }
-  function updateHoverMergedCells(rowKey) {
-    const set = rowKey === void 0 ? null : hoverRowMap.value[rowKey];
-    hoverMergedCells.value = set || /* @__PURE__ */ new Set();
-  }
-  function updateActiveMergedCells(clear) {
-    if (!props.rowActive) return;
-    if (clear) {
-      activeMergedCells.value.clear();
-    } else {
-      activeMergedCells.value = new Set(hoverMergedCells.value);
-    }
-  }
-  return {
-    hiddenCellMap,
-    mergeCellsWrapper,
-    hoverMergedCells,
-    updateHoverMergedCells,
-    activeMergedCells,
-    updateActiveMergedCells
-  };
-}
 const _hoisted_1 = ["data-col-key", "draggable", "rowspan", "colspan", "title", "onClick"];
 const _hoisted_2 = ["onMousedown"];
 const _hoisted_3 = { class: "table-header-title" };
@@ -1759,6 +1823,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const { isSRBRActive } = useScrollRowByRow({ props, tableContainerRef });
     const { onThDragStart, onThDragOver, onThDrop, isHeaderDraggable } = useThDrag({ props, emits, colKeyGen });
     const { onTrDragStart, onTrDrop, onTrDragOver, onTrDragEnd, onTrDragEnter } = useTrDrag({ props, emits, dataSourceCopy });
+    const { maxRowSpan, updateMaxRowSpan } = useMaxRowSpan({ props, tableHeaderLast, rowKeyGen, dataSourceCopy });
     const {
       virtualScroll,
       virtualScrollX,
@@ -1775,7 +1840,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       updateVirtualScrollX,
       setAutoHeight,
       clearAllAutoHeight
-    } = useVirtualScroll({ tableContainerRef, trRef, props, dataSourceCopy, tableHeaderLast, tableHeaders, rowKeyGen });
+    } = useVirtualScroll({ tableContainerRef, trRef, props, dataSourceCopy, tableHeaderLast, tableHeaders, rowKeyGen, maxRowSpan });
+    const {
+      hiddenCellMap,
+      //
+      mergeCellsWrapper,
+      hoverMergedCells,
+      updateHoverMergedCells,
+      activeMergedCells,
+      updateActiveMergedCells
+    } = useMergeCells({ props, tableHeaderLast, rowKeyGen, colKeyGen, virtual_dataSourcePart });
     const getFixedColPosition = useGetFixedColPosition({ colKeyGen, tableHeadersForCalc });
     const getFixedStyle = useFixedStyle({
       props,
@@ -1817,17 +1891,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     const { toggleExpandRow, setRowExpand } = useRowExpand({ dataSourceCopy, rowKeyGen, emits });
     const { toggleTreeNode, setTreeExpand, flatTreeData } = useTree({ props, dataSourceCopy, rowKeyGen, emits });
-    const { hiddenCellMap, mergeCellsWrapper, hoverMergedCells, updateHoverMergedCells, activeMergedCells, updateActiveMergedCells } = useMergeCells({
-      props,
-      tableHeaderLast,
-      rowKeyGen,
-      colKeyGen,
-      virtual_dataSourcePart
-    });
     watch(
       () => props.columns,
       () => {
         dealColumns();
+        updateMaxRowSpan();
         nextTick(() => {
           initVirtualScrollX();
           updateFixedShadow();
@@ -1870,6 +1938,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           needInitVirtualScrollY = true;
         }
         initDataSource(val);
+        updateMaxRowSpan();
         if (needInitVirtualScrollY) {
           nextTick(() => initVirtualScrollY());
         }
@@ -1887,6 +1956,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     );
     dealColumns();
     initDataSource();
+    updateMaxRowSpan();
     onMounted(() => {
       initVirtualScroll();
       updateFixedShadow();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stk-table-vue",
-  "version": "0.8.2",
+  "version": "0.8.4",
   "description": "Simple 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

@@ -293,13 +293,14 @@ import { useFixedStyle } from './useFixedStyle';
 import { useGetFixedColPosition } from './useGetFixedColPosition';
 import { useHighlight } from './useHighlight';
 import { useKeyboardArrowScroll } from './useKeyboardArrowScroll';
+import { useMaxRowSpan } from './useMaxRowSpan';
+import { useMergeCells } from './useMergeCells';
 import { useRowExpand } from './useRowExpand';
 import { useScrollRowByRow } from './useScrollRowByRow';
 import { useThDrag } from './useThDrag';
 import { useTrDrag } from './useTrDrag';
 import { useTree } from './useTree';
 import { useVirtualScroll } from './useVirtualScroll';
-import { useMergeCells } from './useMergeCells';
 import { createStkTableId, getCalculatedColWidth, getColWidth } from './utils/constRefUtils';
 import { howDeepTheHeader, isEmptyValue, tableSort, transformWidthToStr } from './utils/index';
 
@@ -687,7 +688,7 @@ const sortSwitchOrder: Order[] = [null, 'desc', 'asc'];
  * @eg
  * ```js
  * [
- *      [{dataInex:'id',...}], // 第0行列配置
+ *      [{dataIndex:'id',...}], // 第0行列配置
  *      [], // 第一行列配置
  *      //...
  * ]
@@ -761,6 +762,8 @@ const { onThDragStart, onThDragOver, onThDrop, isHeaderDraggable } = useThDrag({
 
 const { onTrDragStart, onTrDrop, onTrDragOver, onTrDragEnd, onTrDragEnter } = useTrDrag({ props, emits, dataSourceCopy });
 
+const { maxRowSpan, updateMaxRowSpan } = useMaxRowSpan({ props, tableHeaderLast, rowKeyGen, dataSourceCopy });
+
 const {
     virtualScroll,
     virtualScrollX,
@@ -777,7 +780,16 @@ const {
     updateVirtualScrollX,
     setAutoHeight,
     clearAllAutoHeight,
-} = useVirtualScroll({ tableContainerRef, trRef, props, dataSourceCopy, tableHeaderLast, tableHeaders, rowKeyGen });
+} = useVirtualScroll({ tableContainerRef, trRef, props, dataSourceCopy, tableHeaderLast, tableHeaders, rowKeyGen, maxRowSpan });
+
+const {
+    hiddenCellMap, //
+    mergeCellsWrapper,
+    hoverMergedCells,
+    updateHoverMergedCells,
+    activeMergedCells,
+    updateActiveMergedCells,
+} = useMergeCells({ props, tableHeaderLast, rowKeyGen, colKeyGen, virtual_dataSourcePart });
 
 const getFixedColPosition = useGetFixedColPosition({ colKeyGen, tableHeadersForCalc });
 
@@ -831,19 +843,12 @@ const { toggleExpandRow, setRowExpand } = useRowExpand({ dataSourceCopy, rowKeyG
 
 const { toggleTreeNode, setTreeExpand, flatTreeData } = useTree({ props, dataSourceCopy, rowKeyGen, emits });
 
-const { hiddenCellMap, mergeCellsWrapper, hoverMergedCells, updateHoverMergedCells, activeMergedCells, updateActiveMergedCells } = useMergeCells({
-    props,
-    tableHeaderLast,
-    rowKeyGen,
-    colKeyGen,
-    virtual_dataSourcePart,
-});
-
 watch(
     () => props.columns,
     () => {
         dealColumns();
-        // initVirtualScrollX 需要获取容器滚动宽度等。必须等渲染完成后再调用。因此使用nextTick。
+        updateMaxRowSpan();
+        // nextTick: initVirtualScrollX need get container width。
         nextTick(() => {
             initVirtualScrollX();
             updateFixedShadow();
@@ -885,12 +890,13 @@ watch(
             console.warn('invalid dataSource');
             return;
         }
-        /** 是否需要更新ScrollY，这里由于watch newValue与oldValue 的长度一样，因此需要这样使用 */
+      
         let needInitVirtualScrollY = false;
         if (dataSourceCopy.value.length !== val.length) {
             needInitVirtualScrollY = true;
         }
         initDataSource(val);
+        updateMaxRowSpan();
         // if data length is not change, not init virtual scroll
         if (needInitVirtualScrollY) {
             // wait for table render,initVirtualScrollY has get `dom` operation.
@@ -913,6 +919,7 @@ watch(
 
 dealColumns();
 initDataSource();
+updateMaxRowSpan();
 
 onMounted(() => {
     initVirtualScroll();

package/src/StkTable/useMaxRowSpan.ts

@@ -0,0 +1,56 @@
+import { ShallowRef } from "vue";
+import { PrivateStkTableColumn, RowKeyGen, UniqKey } from "./types";
+
+type Options = {
+    props:any,
+    tableHeaderLast: ShallowRef<PrivateStkTableColumn<any>[]>;
+    rowKeyGen: RowKeyGen;
+    dataSourceCopy: ShallowRef<any[]>;
+}
+
+export function useMaxRowSpan({ props, tableHeaderLast, rowKeyGen, dataSourceCopy }: Options) {
+    /** max rowspan of each row */
+    const maxRowSpan = new Map<UniqKey, number>();
+
+    /** 
+     * Use dataSourceCopy and tableHeaderLast to calculate maxRowSpan 
+     * @link {maxRowSpan}
+     */
+    function updateMaxRowSpan() {
+        if(!props.virtual) {
+            if(maxRowSpan.size) maxRowSpan.clear();
+            return;
+        }
+        maxRowSpan.clear();
+
+        const data = dataSourceCopy.value;
+        const columns = tableHeaderLast.value;
+
+        const columnsWithMerge = columns.filter(col => col.mergeCells);
+        if (!columnsWithMerge.length) return;
+
+        const dataLength = data.length;
+        const mergeColumnsLength = columnsWithMerge.length;
+
+        for (let rowIndex = 0; rowIndex < dataLength; rowIndex++) {
+            const row = data[rowIndex];
+            const rowKey = rowKeyGen(row);
+            let currentMax = maxRowSpan.get(rowKey) || 0;
+
+            for (let colIndex = 0; colIndex < mergeColumnsLength; colIndex++) {
+                const col = columnsWithMerge[colIndex];
+                const { rowspan = 1 } = col.mergeCells!({ row, col, rowIndex, colIndex }) || {};
+
+                if (rowspan > 1 && rowspan > currentMax) {
+                    currentMax = rowspan;
+                    maxRowSpan.set(rowKey, currentMax);
+                }
+            }
+        }
+    }
+
+    return {
+        maxRowSpan,
+        updateMaxRowSpan
+    }
+}

package/src/StkTable/useMergeCells.ts

@@ -1,20 +1,20 @@
 import { ref, ShallowRef, watch } from 'vue';
 import { ColKeyGen, MergeCellsParam, PrivateStkTableColumn, RowKeyGen, UniqKey } from './types';
 import { pureCellKeyGen } from './utils';
-
+type Options = {
+    props: any;
+    tableHeaderLast: ShallowRef<PrivateStkTableColumn<any>[]>;
+    rowKeyGen: RowKeyGen;
+    colKeyGen: ColKeyGen;
+    virtual_dataSourcePart: ShallowRef<any[]>;
+}
 export function useMergeCells({
     props,
     tableHeaderLast,
     rowKeyGen,
     colKeyGen,
     virtual_dataSourcePart,
-}: {
-    props: any;
-    tableHeaderLast: ShallowRef<PrivateStkTableColumn<any>[]>;
-    rowKeyGen: RowKeyGen;
-    colKeyGen: ColKeyGen;
-    virtual_dataSourcePart: ShallowRef<any[]>;
-}) {
+}:Options ) {
     /**
      * which cell need be hidden
      * - key: rowKey
@@ -33,16 +33,19 @@ export function useMergeCells({
     /** click current row , which rowspan cells should be highlight */
     const activeMergedCells = ref(new Set<string>());
 
+
     watch([virtual_dataSourcePart, tableHeaderLast], () => {
         hiddenCellMap.value = {};
         hoverRowMap.value = {};
     });
 
-    /** 抽象隐藏单元格的逻辑 */
+    /** 
+     * abstract the logic of hiding cells
+     */
     function hideCells(rowKey: UniqKey, startIndex: number, count: number, isSelfRow = false, mergeCellKey: string) {
         for (let i = startIndex; i < startIndex + count; i++) {
             if (!isSelfRow || i !== startIndex) {
-                // 自己不需要隐藏
+                // self row does not need to be hidden
                 const nextCol = tableHeaderLast.value[i];
                 if (!nextCol) break;
                 const nextColKey = colKeyGen.value(nextCol);
@@ -81,20 +84,18 @@ export function useMergeCells({
         if (colspan === 1 && rowspan === 1) return;
 
         const rowKey = rowKeyGen(row);
+        
         const colKey = colKeyGen.value(col);
-        const dataSourceSlice = virtual_dataSourcePart.value.slice();
         const curColIndex = tableHeaderLast.value.findIndex(item => colKeyGen.value(item) === colKey);
-        const curRowIndex = dataSourceSlice.findIndex(item => rowKeyGen(item) === rowKey);
+        const curRowIndex = virtual_dataSourcePart.value.findIndex(item => rowKeyGen(item) === rowKey);
         const mergedCellKey = pureCellKeyGen(rowKey, colKey);
 
         if (curRowIndex === -1) return;
-
+ 
         for (let i = curRowIndex; i < curRowIndex + rowspan; i++) {
-            const row = dataSourceSlice[i];
+            const row = virtual_dataSourcePart.value[i];
             if (!row) break;
-            const rKey = rowKeyGen(row);
-            const isSelfRow = i === curRowIndex;
-            hideCells(rKey, curColIndex, colspan, isSelfRow, mergedCellKey);
+            hideCells(rowKeyGen(row), curColIndex, colspan, i === curRowIndex, mergedCellKey);
         }
 
         return { colspan, rowspan };

package/src/StkTable/useRowExpand.ts

@@ -9,26 +9,32 @@ type Option<DT extends Record<string, any>> = {
 };
 
 export function useRowExpand({ dataSourceCopy, rowKeyGen, emits }: Option<DT>) {
+    const expandedKey = '__EXPANDED__';
+
+    function isExpanded(row: DT, col?: StkTableColumn<DT> | null) {
+        return row?.[expandedKey] === col ? !row?.[expandedKey] : true;
+    }
     /** click expended icon to toggle expand row */
     function toggleExpandRow(row: DT, col: StkTableColumn<DT>) {
-        const isExpand = row?.__EXPANDED__ === col ? !row?.__EXPANDED__ : true;
+        const isExpand = isExpanded(row, col);
         setRowExpand(row, isExpand, { col });
     }
 
     /**
      *
      * @param rowKeyOrRow rowKey or row
-     * @param expand expand or collapse
+     * @param expand expand or collapse, if set null, toggle expand
      * @param data { col?: StkTableColumn<DT> }
      * @param data.silent if set true, not emit `toggle-row-expand`, default:false
      */
-    function setRowExpand(rowKeyOrRow: string | undefined | DT, expand?: boolean, data?: { col?: StkTableColumn<DT>; silent?: boolean }) {
+    function setRowExpand(rowKeyOrRow: string | undefined | DT, expand?: boolean | null, data?: { col?: StkTableColumn<DT>; silent?: boolean }) {
         let rowKey: UniqKey;
         if (typeof rowKeyOrRow === 'string') {
             rowKey = rowKeyOrRow;
         } else {
             rowKey = rowKeyGen(rowKeyOrRow);
         }
+
         const tempData = dataSourceCopy.value.slice();
         const index = tempData.findIndex(it => rowKeyGen(it) === rowKey);
         if (index === -1) {
@@ -51,6 +57,10 @@ export function useRowExpand({ dataSourceCopy, rowKeyGen, emits }: Option<DT>) {
         const row = tempData[index];
         const col = data?.col || null;
 
+        if (expand == null) {
+            expand = isExpanded(row, col);
+        }
+
         if (expand) {
             // insert new expanded row
             const newExpandRow: ExpandedRow = {

package/src/StkTable/useVirtualScroll.ts

@@ -11,6 +11,7 @@ type Option<DT extends Record<string, any>> = {
     tableHeaderLast: ShallowRef<PrivateStkTableColumn<DT>[]>;
     tableHeaders: ShallowRef<PrivateStkTableColumn<DT>[][]>;
     rowKeyGen: RowKeyGen;
+    maxRowSpan: Map<UniqKey, number>;
 };
 
 /** 暂存纵向虚拟滚动的数据 */
@@ -52,7 +53,7 @@ export type VirtualScrollXStore = {
 const VUE2_SCROLL_TIMEOUT_MS = 200;
 
 /**
- * 虚拟滚动
+ * virtual scroll
  * @param param0
  * @returns
  */
@@ -64,8 +65,8 @@ export function useVirtualScroll<DT extends Record<string, any>>({
     tableHeaderLast,
     tableHeaders,
     rowKeyGen,
+    maxRowSpan,
 }: Option<DT>) {
-    /** 表头高度 */
     const tableHeaderHeight = ref(props.headerRowHeight);
 
     const virtualScroll = ref<VirtualScrollStore>({
@@ -279,7 +280,6 @@ export function useVirtualScroll<DT extends Record<string, any>>({
         // 先更新滚动条位置记录，其他地方有依赖。(stripe 时ArrowUp/Down滚动依赖)
         virtualScroll.value.scrollTop = sTop;
 
-        // 非虚拟滚动不往下执行
         if (!virtual_on.value) {
             return;
         }
@@ -325,6 +325,41 @@ export function useVirtualScroll<DT extends Record<string, any>>({
             endIndex = startIndex + pageSize;
         }
 
+        if (maxRowSpan.size) {
+            // fix startIndex：查找是否有合并行跨越当前startIndex
+            let correctedStartIndex = startIndex;
+            let correctedEndIndex = endIndex;
+
+            for (let i = 0; i < startIndex; i++) {
+                const row = dataSourceCopyTemp[i];
+                if (!row) continue;
+                const spanEndIndex = i + (maxRowSpan.get(rowKeyGen(row)) || 1);
+                if (spanEndIndex > startIndex) {
+                    // 找到跨越startIndex的合并行，将startIndex修正为合并行的起始索引
+                    correctedStartIndex = i;
+                    if (spanEndIndex > endIndex) {
+                        // 合并行跨越了整个可视区
+                        correctedEndIndex = spanEndIndex;
+                    }
+                    break;
+                }
+            }
+
+            // fix endIndex：查找是否有合并行跨越当前endIndex
+            for (let i = correctedStartIndex; i < endIndex; i++) {
+                const row = dataSourceCopyTemp[i];
+                if (!row) continue;
+                const spanEndIndex = i + (maxRowSpan.get(rowKeyGen(row)) || 1);
+                if (spanEndIndex > correctedEndIndex) {
+                    // 找到跨越endIndex的合并行，将endIndex修正为合并行的结束索引
+                    correctedEndIndex = Math.max(spanEndIndex, correctedEndIndex);
+                }
+            }
+
+            startIndex = correctedStartIndex;
+            endIndex = correctedEndIndex;
+        }
+
         if (stripe && startIndex > 0 && startIndex % 2) {
             // 斑马纹情况下，每滚动偶数行才加载。防止斑马纹错位。
             startIndex -= 1; // 奇数-1变成偶数
@@ -338,7 +373,7 @@ export function useVirtualScroll<DT extends Record<string, any>>({
         endIndex = Math.min(endIndex, dataLength);
 
         if (startIndex >= endIndex) {
-            // 兜底，不一定会执行到这里
+            // fallback
             startIndex = endIndex - pageSize;
         }
 
@@ -351,20 +386,20 @@ export function useVirtualScroll<DT extends Record<string, any>>({
             offsetTop = autoRowHeightTop;
         } else {
             if (oldStartIndex === startIndex && oldEndIndex === endIndex) {
-                // 没有变化，不需要更新
+                // Not change: not update
                 return;
             }
             offsetTop = startIndex * rowHeight;
         }
 
         /**
-         * 一次滚动大于一页时表示滚动过快，回退优化
+         * en:  If scroll faster than one page, roll back
          */
         if (!optimizeVue2Scroll || sTop <= scrollTop || Math.abs(oldStartIndex - startIndex) >= pageSize) {
-            // 向上滚动
+            // scroll up
             Object.assign(virtualScroll.value, { startIndex, endIndex, offsetTop });
         } else {
-            // vue2向下滚动优化
+            // vue2 scroll down optimize
             virtualScroll.value.endIndex = endIndex;
             vue2ScrollYTimeout = window.setTimeout(() => {
                 Object.assign(virtualScroll.value, { startIndex, offsetTop });
@@ -374,7 +409,9 @@ export function useVirtualScroll<DT extends Record<string, any>>({
 
     let vue2ScrollXTimeout: null | number = null;
 
-    /** 通过横向滚动条位置，计算横向虚拟滚动的参数 */
+    /** 
+     * Calculate virtual scroll parameters based on horizontal scroll bar position
+     */
     function updateVirtualScrollX(sLeft = 0) {
         if (!props.virtualX) return;
         const tableHeaderLastValue = tableHeaderLast.value;
@@ -384,7 +421,6 @@ export function useVirtualScroll<DT extends Record<string, any>>({
         const { scrollLeft, containerWidth } = virtualScrollX.value;
         let startIndex = 0;
         let offsetLeft = 0;
-        /** 列宽累加 */
         let colWidthSum = 0;
         /** 固定左侧列宽 */
         let leftColWidthSum = 0;