stk-table-vue 0.8.3 → 0.8.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stk-table-vue",
-  "version": "0.8.3",
+  "version": "0.8.5",
   "description": "Simple realtime virtual table for vue3 and vue2.7",
   "main": "./lib/stk-table-vue.js",
   "types": "./lib/src/StkTable/index.d.ts",
@@ -63,9 +63,9 @@
     "typescript": "^5.8.3",
     "vite": "^7.0.2",
     "vite-plugin-dts": "3.9.1",
-    "vitepress": "^1.6.3",
+    "vitepress": "^1.6.4",
     "vitepress-demo-plugin": "^1.4.5",
-    "vitepress-plugin-llms": "^1.7.0",
+    "vitepress-plugin-llms": "^1.7.5",
     "vitest": "^3.2.4",
     "vue": "^3.5.17",
     "vue-eslint-parser": "^9.4.2"

package/src/StkTable/StkTable.vue

@@ -36,15 +36,14 @@
         @scroll="onTableScroll"
         @wheel="onTableWheel"
     >
-        <!-- 这个元素用于整数行虚拟滚动时，撑开父容器的高度） -->
+        
         <div
             v-if="isSRBRActive && virtual"
             class="row-by-row-table-height"
             :style="{ height: dataSourceCopy.length * virtualScroll.rowHeight + 'px' }"
-        ></div>
+        ><!-- 这个元素用于整数行虚拟滚动时，撑开父容器的高度） --></div>
 
         <div v-if="colResizable" ref="colResizeIndicatorRef" class="column-resize-indicator"></div>
-        <!-- 表格主体 -->
         <table
             class="stk-table-main"
             :style="{ width, minWidth, maxWidth }"
@@ -52,15 +51,13 @@
                 'fixed-mode': props.fixedMode,
             }"
         >
-            <thead v-if="!headless" ref="theadRef">
+            <thead v-if="!headless">
                 <tr v-for="(row, rowIndex) in tableHeaders" :key="rowIndex" @contextmenu="onHeaderMenu($event)">
-                    <!-- 这个th用于横向虚拟滚动表格左边距,width、maxWidth 用于兼容低版本浏览器 -->
                     <th
                         v-if="virtualX_on"
                         class="vt-x-left"
                         :style="`min-width:${virtualScrollX.offsetLeft}px;width:${virtualScrollX.offsetLeft}px`"
                     ></th>
-                    <!-- v for中最后一行才用 切割。-->
                     <th
                         v-for="(col, colIndex) in virtualX_on && rowIndex === tableHeaders.length - 1 ? virtualX_columnPart : row"
                         :key="colKeyGen(col)"
@@ -101,17 +98,14 @@
                             </template>
                             <SortIcon v-if="col.sorter" class="table-header-sorter" />
                         </div>
-                        <!-- 列宽拖动handler -->
                         <div v-if="colResizeOn(col)" class="table-header-resizer right" @mousedown="onThResizeMouseDown($event, col)"></div>
                     </th>
-                    <!-- 这个th用于横向虚拟滚动表格右边距 width, min-width 用于兼容低版本浏览器-->
                     <th v-if="virtualX_on" class="vt-x-right" :style="`min-width:${virtualX_offsetRight}px;width:${virtualX_offsetRight}px`"></th>
                 </tr>
             </thead>
 
             <tbody class="stk-tbody-main" @dragover="onTrDragOver" @dragenter="onTrDragEnter" @dragend="onTrDragEnd">
                 <tr v-if="virtual_on && !isSRBRActive" :style="`height:${virtualScroll.offsetTop}px`" class="padding-top-tr">
-                    <!--这个td用于配合虚拟滚动的th对应，防止列错位-->
                     <td v-if="virtualX_on && fixedMode && headless" class="vt-x-left"></td>
                     <template v-if="fixedMode && headless">
                         <td v-for="col in virtualX_columnPart" :key="colKeyGen(col)" :style="cellStyleMap[TagType.TD].get(colKeyGen(col))"></td>
@@ -141,10 +135,8 @@
                     @mouseleave="onTrMouseLeave($event)"
                     @drop="onTrDrop($event, getRowIndex(rowIndex))"
                 >
-                    <!--这个td用于配合虚拟滚动的th对应，防止列错位-->
                     <td v-if="virtualX_on" class="vt-x-left"></td>
                     <td v-if="row && row.__EXPANDED_ROW__" :colspan="virtualX_columnPart.length">
-                        <!-- TODO: support wheel -->
                         <div class="table-cell-wrapper">
                             <slot name="expand" :row="row.__EXPANDED_ROW__" :col="row.__EXPANDED_COL__">
                                 {{ row.__EXPANDED_ROW__?.[row.__EXPANDED_COL__.dataIndex] ?? '' }}
@@ -293,13 +285,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';
 
@@ -649,7 +642,6 @@ const emits = defineEmits<{
 // }>();
 
 const tableContainerRef = ref<HTMLDivElement>();
-const theadRef = ref<HTMLElement>();
 const colResizeIndicatorRef = ref<HTMLDivElement>();
 const trRef = ref<HTMLTableRowElement[]>();
 
@@ -687,7 +679,7 @@ const sortSwitchOrder: Order[] = [null, 'desc', 'asc'];
  * @eg
  * ```js
  * [
- *      [{dataInex:'id',...}], // 第0行列配置
+ *      [{dataIndex:'id',...}], // 第0行列配置
  *      [], // 第一行列配置
  *      //...
  * ]
@@ -761,6 +753,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 +771,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 +834,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 +881,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 +910,7 @@ watch(
 
 dealColumns();
 initDataSource();
+updateMaxRowSpan();
 
 onMounted(() => {
     initVirtualScroll();
@@ -1327,7 +1325,7 @@ function onTableScroll(e: Event) {
     if (!e?.target) return;
 
     const { scrollTop, scrollLeft } = e.target as HTMLElement;
-    const { scrollTop: vScrollTop, startIndex, endIndex } = virtualScroll.value;
+    const { scrollTop: vScrollTop } = virtualScroll.value;
     const { scrollLeft: vScrollLeft } = virtualScrollX.value;
     const isYScroll = scrollTop !== vScrollTop;
     const isXScroll = scrollLeft !== vScrollLeft;
@@ -1349,6 +1347,7 @@ function onTableScroll(e: Event) {
     }
 
     if (isYScroll) {
+        const {  startIndex, endIndex } = virtualScroll.value;
         emits('scroll', e, { startIndex, endIndex });
     }
     if (isXScroll) {

package/src/StkTable/style.less

@@ -381,7 +381,8 @@
     }
 
     .highlight-cell {
-        animation: stk-table-dim var(--highlight-duration);
+        animation-name: stk-table-dim;
+        animation-duration:  var(--highlight-duration);
         animation-timing-function: var(--highlight-timing-function);
         /* 必须分开写，否则var(step(x))不兼容旧浏览器*/
     }
@@ -504,7 +505,8 @@
 
     /* td inherit tr bgc*/
     .highlight-row {
-        animation: stk-table-dim var(--highlight-duration);
+        animation-name: stk-table-dim;
+        animation-duration: var(--highlight-duration);
         /* 必须分开写，否则var(step(x))不兼容旧浏览器*/
         animation-timing-function: var(--highlight-timing-function);
     }

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/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;