stk-table-vue 0.8.13 → 0.8.14

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "stk-table-vue",
-  "version": "0.8.13",
+  "version": "0.8.14",
   "description": "High performance realtime virtual table for vue3 and vue2.7",
   "main": "./lib/stk-table-vue.js",
   "types": "./lib/src/StkTable/index.d.ts",
+  "homepage": "https://ja-plus.github.io/stk-table-vue/",
   "packageManager": "pnpm@10.7.0",
   "directories": {
     "test": "test"
@@ -62,6 +63,7 @@
     "stk-table-vue": "^0.8.7",
     "typescript": "^5.8.3",
     "vite": "^7.2.2",
+    "vite-plugin-banner": "^0.8.1",
     "vite-plugin-dts": "3.9.1",
     "vitepress": "^1.6.4",
     "vitepress-demo-plugin": "^1.4.7",

package/src/StkTable/StkTable.vue

@@ -43,6 +43,13 @@
             :class="{
                 'fixed-mode': props.fixedMode,
             }"
+            @dragover="onTrDragOver"
+            @dragenter="onTrDragEnter"
+            @dragend="onTrDragEnd"
+            @click="onRowClick"
+            @dblclick="onRowDblclick"
+            @contextmenu="onRowMenu"
+            @mouseover="onTrMouseOver"
         >
             <thead v-if="!headless">
                 <tr v-for="(row, rowIndex) in tableHeaders" :key="rowIndex" @contextmenu="onHeaderMenu($event)">
@@ -54,34 +61,18 @@
                     <th
                         v-for="(col, colIndex) in virtualX_on && rowIndex === tableHeaders.length - 1 ? virtualX_columnPart : row"
                         :key="colKeyGen(col)"
-                        :data-col-key="colKeyGen(col)"
-                        :draggable="isHeaderDraggable(col) ? 'true' : 'false'"
-                        :rowspan="virtualX_on ? 1 : col.__R_SP__"
-                        :colspan="col.__C_SP__"
-                        :style="cellStyleMap[TagType.TH].get(colKeyGen(col))"
-                        :title="getHeaderTitle(col)"
-                        :class="[
-                            col.sorter ? 'sortable' : '',
-                            colKeyGen(col) === sortCol && sortOrderIndex !== 0 && 'sorter-' + sortSwitchOrder[sortOrderIndex],
-                            col.headerClassName,
-                            fixedColClassMap.get(colKeyGen(col)),
-                        ]"
-                        @click="
-                            e => {
-                                onColumnSort(col);
-                                onHeaderCellClick(e, col);
-                            }
-                        "
-                        @dragstart="onThDragStart"
-                        @drop="onThDrop"
-                        @dragover="onThDragOver"
+                        v-bind="getTHProps(col)"
+                        @click="e => onHeaderCellClick(e, col)"
+                        @dragstart="headerDrag ? onThDragStart : void 0"
+                        @drop="headerDrag ? onThDrop : void 0"
+                        @dragover="headerDrag ? onThDragOver : void 0"
                     >
                         <div
                             v-if="colResizeOn(col) && colIndex > 0"
                             class="table-header-resizer left"
                             @mousedown="onThResizeMouseDown($event, col, true)"
                         ></div>
-                        <div class="table-header-cell-wrapper" :style="{ '--row-span': virtualX_on ? 1 : col.__R_SP__ }">
+                        <div class="table-header-cell-wrapper" :style="`--row-span:${virtualX_on ? 1 : col.__R_SP__}`">
                             <component :is="col.customHeaderCell" v-if="col.customHeaderCell" :col="col" :colIndex="colIndex" :rowIndex="rowIndex" />
                             <template v-else>
                                 <slot name="tableHeader" :col="col">
@@ -96,7 +87,7 @@
                 </tr>
             </thead>
 
-            <tbody class="stk-tbody-main" @dragover="onTrDragOver" @dragenter="onTrDragEnter" @dragend="onTrDragEnd">
+            <tbody class="stk-tbody-main" @click="onCellClick" @mousedown="onCellMouseDown" @mouseover="onCellMouseOver">
                 <tr v-if="virtual_on && !isSRBRActive" :style="`height:${virtualScroll.offsetTop}px`" class="padding-top-tr">
                     <td v-if="virtualX_on && fixedMode && headless" class="vt-x-left"></td>
                     <template v-if="fixedMode && headless">
@@ -105,26 +96,11 @@
                 </tr>
                 <tr
                     v-for="(row, rowIndex) in virtual_dataSourcePart"
-                    :id="stkTableId + '-' + (rowKey ? rowKeyGen(row) : getRowIndex(rowIndex))"
                     ref="trRef"
-                    :key="rowKey ? rowKeyGen(row) : getRowIndex(rowIndex)"
-                    :data-row-key="rowKey ? rowKeyGen(row) : getRowIndex(rowIndex)"
-                    :class="{
-                        active: rowKey ? rowKeyGen(row) === currentRowKey : row === currentRow,
-                        hover: props.showTrHoverClass && (rowKey ? rowKeyGen(row) === currentHoverRowKey : row === currentHoverRowKey),
-                        [rowClassName(row, getRowIndex(rowIndex)) || '']: true,
-                        expanded: row && row.__EXP__,
-                        'expanded-row': row && row.__EXP_R__,
-                    }"
-                    :style="{
-                        '--row-height': row && row.__EXP_R__ && props.virtual && props.expandConfig?.height && props.expandConfig?.height + 'px',
-                    }"
-                    @click="onRowClick($event, row, getRowIndex(rowIndex))"
-                    @dblclick="onRowDblclick($event, row, getRowIndex(rowIndex))"
-                    @contextmenu="onRowMenu($event, row, getRowIndex(rowIndex))"
-                    @mouseover="onTrMouseOver($event, row)"
-                    @mouseleave="onTrMouseLeave($event)"
+                    :key="rowKeyGen(row)"
+                    v-bind="getTRProps(row, rowIndex)"
                     @drop="onTrDrop($event, getRowIndex(rowIndex))"
+                    @mouseleave="onTrMouseLeave"
                 >
                     <td v-if="virtualX_on" class="vt-x-left"></td>
                     <td v-if="row && row.__EXP_R__" :colspan="virtualX_columnPart.length">
@@ -139,15 +115,9 @@
                             <td
                                 v-if="!hiddenCellMap[rowKeyGen(row)]?.has(colKeyGen(col))"
                                 :key="colKeyGen(col)"
-                                v-bind="{
-                                    ...getTDProps(row, col),
-                                    ...mergeCellsWrapper(row, col, rowIndex, colIndex),
-                                }"
-                                @click="onCellClick($event, row, col, getRowIndex(rowIndex))"
-                                @mousedown="onCellMouseDown($event, row, col, getRowIndex(rowIndex))"
-                                @mouseenter="onCellMouseEnter($event, row, col)"
-                                @mouseleave="onCellMouseLeave($event, row, col)"
-                                @mouseover="onCellMouseOver($event, row, col)"
+                                v-bind="getTDProps(row, col, rowIndex, colIndex)"
+                                @mouseenter="onCellMouseEnter"
+                                @mouseleave="onCellMouseLeave"
                             >
                                 <component
                                     :is="col.customCell"
@@ -172,7 +142,7 @@
                                     v-else
                                     class="table-cell-wrapper"
                                     :title="col.type !== 'seq' ? row?.[col.dataIndex] : ''"
-                                    :style="col.type === 'tree-node' ? { paddingLeft: row.__T_LV__ && row.__T_LV__ * 16 + 'px' } : {}"
+                                    :style="col.type === 'tree-node' && row.__T_LV__ ? `padding-left:${row.__T_LV__ * 16}px` : ''"
                                 >
                                     <template v-if="col.type === 'seq'">
                                         {{ (props.seqConfig.startIndex || 0) + getRowIndex(rowIndex) + 1 }}
@@ -199,6 +169,7 @@
                             </td>
                         </template>
                     </template>
+                    <td v-if="virtualX_on" class="vt-x-right"></td>
                 </tr>
                 <tr v-if="virtual_on && !isSRBRActive" :style="`height: ${virtual_offsetBottom}px`"></tr>
                 <tr v-if="SRBRBottomHeight" :style="`height: ${SRBRBottomHeight}px`"></tr>
@@ -263,7 +234,7 @@ import { useTrDrag } from './useTrDrag';
 import { useTree } from './useTree';
 import { useVirtualScroll } from './useVirtualScroll';
 import { createStkTableId, getCalculatedColWidth, getColWidth } from './utils/constRefUtils';
-import { howDeepTheHeader, isEmptyValue, tableSort, transformWidthToStr } from './utils/index';
+import { getClosestColKey, getClosestTr, getClosestTrIndex, howDeepTheHeader, isEmptyValue, tableSort, transformWidthToStr } from './utils/index';
 
 /** Generic stands for DataType */
 type DT = any & PrivateRowDT;
@@ -631,7 +602,7 @@ const currentSelectedCellKey = ref<string | undefined>();
 /** 当前hover行 */
 let currentHoverRow: DT | null = null;
 /** 当前hover的行的key */
-const currentHoverRowKey = ref(null);
+const currentHoverRowKey = ref<UniqKey | null>(null);
 /** 当前hover的列的key */
 // const currentColHoverKey = ref(null);
 
@@ -1026,9 +997,7 @@ function updateDataSource(val: DT[]) {
     }
 }
 
-/**
- * 行唯一值生成
- */
+/** tr key */
 function rowKeyGen(row: DT | null | undefined) {
     if (!row) return row;
     let key = rowKeyGenCache.get(row) || (row as PrivateRowDT).__ROW_K__;
@@ -1044,12 +1013,11 @@ function rowKeyGen(row: DT | null | undefined) {
     return key;
 }
 
-/** 单元格唯一值 */
+/** td key */
 function cellKeyGen(row: DT | null | undefined, col: StkTableColumn<DT>) {
     return rowKeyGen(row) + CELL_KEY_SEPARATE + colKeyGen.value(col);
 }
 
-/** 单元格样式 */
 const cellStyleMap = computed(() => {
     const thMap = new Map();
     const tdMap = new Map();
@@ -1080,9 +1048,8 @@ const cellStyleMap = computed(() => {
 });
 
 function getRowIndex(rowIndex: number) {
-    return rowIndex + (virtual_on.value ? virtualScroll.value.startIndex : 0);
+    return rowIndex + virtualScroll.value.startIndex;
 }
-
 /** th title */
 function getHeaderTitle(col: StkTableColumn<DT>): string {
     const colKey = colKeyGen.value(col);
@@ -1093,7 +1060,53 @@ function getHeaderTitle(col: StkTableColumn<DT>): string {
     return col.title || '';
 }
 
-function getTDProps(row: PrivateRowDT | null | undefined, col: StkTableColumn<PrivateRowDT>) {
+function getTRProps(row: PrivateRowDT | null | undefined, index: number) {
+    const rowIndex = getRowIndex(index);
+    const rowKey = rowKeyGen(row);
+
+    let classStr = props.rowClassName(row, rowIndex) || '' + ' ' + (row?.__EXP__ ? 'expanded' : '') + ' ' + (row?.__EXP_R__ ? 'expanded-row' : '');
+    if (currentRowKey.value === rowKey || row === currentRow.value) {
+        classStr += ' active';
+    }
+    if (props.showTrHoverClass && (rowKey === currentHoverRowKey.value || row === currentHoverRow)) {
+        classStr += ' hover';
+    }
+
+    const result = {
+        id: stkTableId + '-' + rowKey,
+        'data-row-key': rowKey,
+        'data-row-i': rowIndex,
+        class: classStr,
+        style: '',
+    };
+
+    const needRowHeight = row?.__EXP_R__ && props.virtual && props.expandConfig?.height;
+
+    if (needRowHeight) {
+        result.style = `--row-height: ${props.expandConfig?.height}px`;
+    }
+    return result;
+}
+
+function getTHProps(col: PrivateStkTableColumn<DT>) {
+    const colKey = colKeyGen.value(col);
+    return {
+        'data-col-key': colKey,
+        draggable: Boolean(isHeaderDraggable(col)),
+        rowspan: virtualX_on.value ? 1 : col.__R_SP__,
+        colspan: col.__C_SP__,
+        style: cellStyleMap.value[TagType.TH].get(colKey),
+        title: getHeaderTitle(col),
+        class: [
+            col.sorter ? 'sortable' : '',
+            colKey === sortCol.value && sortOrderIndex.value !== 0 && 'sorter-' + sortSwitchOrder[sortOrderIndex.value],
+            col.headerClassName,
+            fixedColClassMap.value.get(colKey),
+        ],
+    };
+}
+
+function getTDProps(row: PrivateRowDT | null | undefined, col: StkTableColumn<PrivateRowDT>, rowIndex: number, colIndex: number) {
     const colKey = colKeyGen.value(col);
     if (!row) {
         return {
@@ -1102,8 +1115,7 @@ function getTDProps(row: PrivateRowDT | null | undefined, col: StkTableColumn<Pr
     }
 
     const cellKey = cellKeyGen(row, col);
-
-    const classList = [col.className, fixedColClassMap.value.get(colKeyGen.value(col))];
+    const classList = [col.className, fixedColClassMap.value.get(colKey)];
     if (col.mergeCells) {
         if (hoverMergedCells.value.has(cellKey)) {
             classList.push('cell-hover');
@@ -1119,23 +1131,26 @@ function getTDProps(row: PrivateRowDT | null | undefined, col: StkTableColumn<Pr
 
     if (col.type === 'seq') {
         classList.push('seq-column');
-    } else if (col.type === 'expand' && (row.__EXP__ ? colKeyGen.value(row.__EXP__) === colKeyGen.value(col) : false)) {
+    } else if (col.type === 'expand' && (row.__EXP__ ? colKeyGen.value(row.__EXP__) === colKey : false)) {
         classList.push('expanded');
-    } else if (col.type === 'tree-node' && row.__T_EXP__) {
+    } else if (row.__T_EXP__ && col.type === 'tree-node') {
         classList.push('tree-expanded');
     } else if (col.type === 'dragRow') {
         classList.push('drag-row-cell');
     }
 
     return {
-        'data-cell-key': cellKey,
+        'data-col-key': colKey,
         style: cellStyleMap.value[TagType.TD].get(colKey),
         class: classList,
+        ...mergeCellsWrapper(row, col, rowIndex, colIndex),
     };
 }
 
 /**
  * 表头点击排序
+ *
+ * en: Sort a column
  * @param click 是否为点击表头触发
  * @param options.force sort-remote 开启后是否强制排序
  * @param options.emit 是否触发回调
@@ -1202,7 +1217,10 @@ function onColumnSort(col: StkTableColumn<DT> | undefined | null, click = true,
     }
 }
 
-function onRowClick(e: MouseEvent, row: DT, rowIndex: number) {
+function onRowClick(e: MouseEvent) {
+    const rowIndex = getClosestTrIndex(e);
+    const row = dataSourceCopy.value[rowIndex];
+    if (!row) return;
     emits('row-click', e, row, { rowIndex });
     if (rowActiveProp.value.disabled?.(row)) return;
     const isCurrentRow = props.rowKey ? currentRowKey.value === rowKeyGen(row) : currentRow.value === row;
@@ -1217,50 +1235,24 @@ function onRowClick(e: MouseEvent, row: DT, rowIndex: number) {
     emits('current-change', e, row, { select: !isCurrentRow });
 }
 
-function onRowDblclick(e: MouseEvent, row: DT, rowIndex: number) {
+function onRowDblclick(e: MouseEvent) {
+    const rowIndex = getClosestTrIndex(e);
+    const row = dataSourceCopy.value[rowIndex];
+    if (!row) return;
     emits('row-dblclick', e, row, { rowIndex });
 }
 
-/** 表头行右键 */
 function onHeaderMenu(e: MouseEvent) {
     emits('header-row-menu', e);
 }
 
-/** 表体行右键 */
-function onRowMenu(e: MouseEvent, row: DT, rowIndex: number) {
+function onRowMenu(e: MouseEvent) {
+    const rowIndex = getClosestTrIndex(e);
+    const row = dataSourceCopy.value[rowIndex];
+    if (!row) return;
     emits('row-menu', e, row, { rowIndex });
 }
 
-/**
- * proxy events
- */
-// function onTbodyClick(e: MouseEvent, type: 1 | 2) {
-//     const el = (e.target as HTMLElement).closest<HTMLElement>('td,tr');
-//     if (!el) return;
-//     if (el.tagName === 'TD') {
-//         const [rowKey, colKey] = el.dataset.cellKey?.split(CELL_KEY_SEPARATE) || [];
-//         const row = dataSourceCopy.value.find(item => rowKeyGen(item) === rowKey);
-//         const col = tableHeaderLast.value.find(item => colKeyGen.value(item) === colKey);
-//         if (col) {
-//             if (col.type === 'expand') {
-//                 toggleExpandRow(row, col);
-//             }
-//             if (type === 1) {
-//                 onCellClick(e, row, col);
-//             } else if (type === 2) {
-//                 onCellMouseDown(e, row, col);
-//             }
-//         }
-//         if (type === 1) {
-//             onRowClick(e, row);
-//         }
-//     } else if (el.tagName === 'TR') {
-//         const rowKey = el.dataset.rowKey;
-//         const row = dataSourceCopy.value.find(item => rowKeyGen(item) === rowKey);
-//         onRowClick(e, row);
-//     }
-// }
-
 function triangleClick(e: MouseEvent, row: DT, col: StkTableColumn<DT>) {
     if (col.type === 'expand') {
         toggleExpandRow(row, col);
@@ -1269,8 +1261,13 @@ function triangleClick(e: MouseEvent, row: DT, col: StkTableColumn<DT>) {
     }
 }
 
-/** 单元格单击 */
-function onCellClick(e: MouseEvent, row: DT, col: StkTableColumn<DT>, rowIndex: number) {
+function onCellClick(e: MouseEvent) {
+    const rowIndex = getClosestTrIndex(e);
+    const row = dataSourceCopy.value[rowIndex];
+    if (!row) return;
+    const colKey = getClosestColKey(e);
+    const col = tableHeaderLast.value.find(item => colKeyGen.value(item) === colKey);
+    if (!col) return;
     if (props.cellActive) {
         const cellKey = cellKeyGen(row, col);
         const result = { row, col, select: false, rowIndex };
@@ -1285,27 +1282,39 @@ function onCellClick(e: MouseEvent, row: DT, col: StkTableColumn<DT>, rowIndex:
     emits('cell-click', e, row, col, { rowIndex });
 }
 
-/** 表头单元格单击 */
+function getCellEventData(e: MouseEvent) {
+    const rowIndex = getClosestTrIndex(e) || 0;
+    const row = dataSourceCopy.value[rowIndex];
+    const colKey = getClosestColKey(e);
+    const col = tableHeaderLast.value.find(item => colKeyGen.value(item) === colKey) as any;
+    return { row, col, rowIndex };
+}
+
+/** th click */
 function onHeaderCellClick(e: MouseEvent, col: StkTableColumn<DT>) {
+    onColumnSort(col);
     emits('header-cell-click', e, col);
 }
 
 /** td mouseenter */
-function onCellMouseEnter(e: MouseEvent, row: DT, col: StkTableColumn<DT>) {
+function onCellMouseEnter(e: MouseEvent) {
+    const { row, col } = getCellEventData(e);
     emits('cell-mouseenter', e, row, col);
 }
 
 /** td mouseleave */
-function onCellMouseLeave(e: MouseEvent, row: DT, col: StkTableColumn<DT>) {
+function onCellMouseLeave(e: MouseEvent) {
+    const { row, col } = getCellEventData(e);
     emits('cell-mouseleave', e, row, col);
 }
-
 /** td mouseover event */
-function onCellMouseOver(e: MouseEvent, row: DT, col: StkTableColumn<DT>) {
+function onCellMouseOver(e: MouseEvent) {
+    const { row, col } = getCellEventData(e);
     emits('cell-mouseover', e, row, col);
 }
 
-function onCellMouseDown(e: MouseEvent, row: DT, col: StkTableColumn<DT>, rowIndex: number) {
+function onCellMouseDown(e: MouseEvent) {
+    const { row, col, rowIndex } = getCellEventData(e);
     emits('cell-mousedown', e, row, col, { rowIndex });
 }
 
@@ -1323,22 +1332,21 @@ function onTableWheel(e: WheelEvent) {
         return;
     }
     const dom = tableContainerRef.value;
-    if (!dom) return;
-    if (!virtual_on.value && !virtualX_on.value) return;
+    if ((!virtual_on.value && !virtualX_on.value) || !dom) return;
 
-    const { containerHeight, scrollTop, scrollHeight } = virtualScroll.value;
-    const { containerWidth, scrollLeft, scrollWidth } = virtualScrollX.value;
-    const isScrollBottom = scrollHeight - containerHeight - scrollTop < 10;
-    const isScrollRight = scrollWidth - containerWidth - scrollLeft < 10;
     const { deltaY, deltaX, shiftKey } = e;
 
     if (virtual_on.value && deltaY && !shiftKey) {
+        const { containerHeight, scrollTop, scrollHeight } = virtualScroll.value;
+        const isScrollBottom = scrollHeight - containerHeight - scrollTop < 10;
         if ((deltaY > 0 && !isScrollBottom) || (deltaY < 0 && scrollTop > 0)) {
             e.preventDefault(); // parent element scroll
         }
         dom.scrollTop += deltaY;
     }
     if (virtualX_on.value) {
+        const { containerWidth, scrollLeft, scrollWidth } = virtualScrollX.value;
+        const isScrollRight = scrollWidth - containerWidth - scrollLeft < 10;
         let distance = deltaX;
         if (shiftKey && deltaY) {
             distance = deltaY;
@@ -1362,12 +1370,10 @@ function onTableScroll(e: Event) {
     const isYScroll = scrollTop !== vScrollTop;
     const isXScroll = scrollLeft !== vScrollLeft;
 
-    // 纵向滚动有变化
     if (isYScroll) {
         updateVirtualScrollY(scrollTop);
     }
 
-    // 横向滚动有变化
     if (isXScroll) {
         if (virtualX_on.value) {
             updateVirtualScrollX(scrollLeft);
@@ -1388,12 +1394,16 @@ function onTableScroll(e: Event) {
 }
 
 /** tr hover */
-function onTrMouseOver(_e: MouseEvent, row: DT) {
+function onTrMouseOver(e: MouseEvent) {
+    const tr = getClosestTr(e);
+    if (!tr) return;
+    const rowIndex = Number(tr.dataset.rowI);
+    const row = dataSourceCopy.value[rowIndex];
     if (currentHoverRow === row) return;
     currentHoverRow = row;
-    const rowKey = rowKeyGen(row);
+    const rowKey = tr.dataset.rowKey;
     if (props.showTrHoverClass) {
-        currentHoverRowKey.value = rowKey;
+        currentHoverRowKey.value = rowKey || null;
     }
     if (props.rowHover) {
         updateHoverMergedCells(rowKey);
@@ -1401,7 +1411,7 @@ function onTrMouseOver(_e: MouseEvent, row: DT) {
 }
 
 function onTrMouseLeave(e: MouseEvent) {
-    if ((e.target as HTMLTableRowElement).tagName !== 'TR') return;
+    if ((e.target as HTMLElement).tagName !== 'TR') return;
     currentHoverRow = null;
     if (props.showTrHoverClass) {
         currentHoverRowKey.value = null;
@@ -1413,6 +1423,8 @@ function onTrMouseLeave(e: MouseEvent) {
 
 /**
  * 选中一行
+ *
+ * en: Select a row
  * @param {string} rowKeyOrRow selected rowKey, undefined to unselect
  * @param {boolean} option.silent if set true not emit `current-change`. default:false
  * @param {boolean} option.deep if set true, deep search in children. default:false

package/src/StkTable/style.less

@@ -356,8 +356,6 @@
     .vt-x-left,
     .vt-x-right {
         padding: 0;
-        background: none;
-        pointer-events: none;
     }
 
     /** 列宽调整指示器 */

package/src/StkTable/useFixedCol.ts

@@ -40,18 +40,20 @@ export function useFixedCol<DT extends Record<string, any>>({
         tableHeaders.value.forEach(cols => {
             cols.forEach(col => {
                 const fixed = col.fixed;
-                const showShadow = fixedColShadow && fixed && fixedShadowColsValue.includes(col);
-                const classObj: Record<string, any> = {
-                    'fixed-cell--active': fixedColsValue.includes(col), // 表示该列正在被固定
-                };
+                const showShadow = fixed && fixedColShadow && fixedShadowColsValue.includes(col);
+                const classList = [];
+                if (fixedColsValue.includes(col)) {
+                    // 表示该列正在被固定
+                    classList.push('fixed-cell--active');
+                }
                 if (fixed) {
-                    classObj['fixed-cell'] = true;
-                    classObj['fixed-cell--' + fixed] = true;
+                    classList.push('fixed-cell');
+                    classList.push('fixed-cell--' + fixed);
                 }
                 if (showShadow) {
-                    classObj['fixed-cell--shadow'] = true;
+                    classList.push('fixed-cell--shadow');
                 }
-                colMap.set(colKey(col), classObj);
+                colMap.set(colKey(col), classList);
             });
         });
         return colMap;

package/src/StkTable/useHighlight.ts

@@ -108,7 +108,7 @@ export function useHighlight({ props, stkTableId, tableContainerRef }: Params) {
      * @param option.duration 动画时长。method='css'状态下，用于移除class，如果传入了className则需要与自定义的动画时间一致。
      */
     function setHighlightDimCell(rowKeyValue: UniqKey, colKeyValue: string, option: HighlightDimCellOption = {}) {
-        const cellEl = tableContainerRef.value?.querySelector<HTMLElement>(`[data-cell-key="${pureCellKeyGen(rowKeyValue, colKeyValue)}"]`);
+        const cellEl = tableContainerRef.value?.querySelector<HTMLElement>(`[data-row-key="${rowKeyValue}"] [data-col-key="${colKeyValue}"]`);
         if (!cellEl) return;
         const { className, method, duration, keyframe } = {
             className: HIGHLIGHT_CELL_CLASS,

package/src/StkTable/useMergeCells.ts

@@ -39,11 +39,9 @@ export function useMergeCells({ rowActiveProp, tableHeaderLast, rowKeyGen, colKe
         const startIndex = tableHeaderLast.value.findIndex(item => colKeyGen.value(item) === colKey);
 
         for (let i = startIndex; i < startIndex + colspan; i++) {
-            if(!isSelfRow) {
-                // if other row hovered, the rowspan cell need to be highlight
-                if (!hoverRowMap.value[rowKey]) hoverRowMap.value[rowKey] = new Set();
-                hoverRowMap.value[rowKey].add(mergeCellKey);
-            }
+            // if other row hovered, the rowspan cell need to be highlight
+            if (!hoverRowMap.value[rowKey]) hoverRowMap.value[rowKey] = new Set();
+            hoverRowMap.value[rowKey].add(mergeCellKey);
             if (isSelfRow && i === startIndex) {
                 // self row start cell does not need to be hidden
                 continue;
@@ -53,7 +51,6 @@ export function useMergeCells({ rowActiveProp, tableHeaderLast, rowKeyGen, colKe
             const nextColKey = colKeyGen.value(nextCol);
             if (!hiddenCellMap.value[rowKey]) hiddenCellMap.value[rowKey] = new Set();
             hiddenCellMap.value[rowKey].add(nextColKey);
-
         }
     }
 
@@ -106,7 +103,7 @@ export function useMergeCells({ rowActiveProp, tableHeaderLast, rowKeyGen, colKe
     function updateActiveMergedCells(clear?: boolean, rowKey?: UniqKey) {
         if (!rowActiveProp.value.enabled) return;
         if (clear) {
-            activeMergedCells.value.clear();
+            activeMergedCells.value = new Set();
             return;
         }
         activeMergedCells.value = (rowKey !== void 0 && hoverRowMap.value[rowKey]) || new Set(hoverMergedCells.value);