stk-table-vue 0.6.9 → 0.6.12

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "stk-table-vue",
-  "version": "0.6.9",
+  "version": "0.6.12",
   "description": "Simple realtime virtual table for vue3 and vue2.7",
   "main": "./lib/stk-table-vue.js",
   "types": "./lib/src/StkTable/index.d.ts",
-  "packageManager": "pnpm@8.14.3",
+  "packageManager": "pnpm@10.7.0",
   "directories": {
     "test": "test"
   },
@@ -64,7 +64,7 @@
     "vite": "^5.4.10",
     "vite-plugin-dts": "3.9.1",
     "vitepress": "^1.5.0",
-    "vitepress-demo-plugin": "^1.2.2",
+    "vitepress-demo-plugin": "^1.3.1",
     "vitest": "^2.1.3",
     "vue": "^3.5.12",
     "vue-eslint-parser": "^9.4.2"

package/src/StkTable/StkTable.vue

@@ -7,6 +7,7 @@
             virtual,
             'virtual-x': virtualX,
             'vt-on': virtual_on,
+            light: theme === 'light',
             dark: theme === 'dark',
             headless,
             'is-col-resizing': isColResizing,
@@ -86,31 +87,25 @@
                         @drop="onThDrop"
                         @dragover="onThDragOver"
                     >
+                        <!-- 列宽拖动handler -->
+                        <div
+                            v-if="colResizeOn(col) && colIndex > 0"
+                            class="table-header-resizer left"
+                            @mousedown="e => onThResizeMouseDown(e, col, true)"
+                        ></div>
                         <div class="table-header-cell-wrapper" :style="{ '--row-span': virtualX_on ? 1 : col.rowSpan }">
                             <component :is="col.customHeaderCell" v-if="col.customHeaderCell" :col="col" :colIndex="colIndex" :rowIndex="rowIndex" />
-                            <template v-else-if="col.type === 'seq'">
-                                <span class="table-header-title">{{ col.title }}</span>
-                            </template>
                             <template v-else>
                                 <slot name="tableHeader" :col="col">
                                     <span class="table-header-title">{{ col.title }}</span>
                                 </slot>
                             </template>
-
-                            <!-- 排序图图标 -->
-                            <span v-if="col.sorter" class="table-header-sorter">
-                                <SortIcon />
-                            </span>
-                            <!-- 列宽拖动handler -->
-                            <div
-                                v-if="colResizeOn(col) && colIndex > 0"
-                                class="table-header-resizer left"
-                                @mousedown="e => onThResizeMouseDown(e, col, true)"
-                            ></div>
-                            <div v-if="colResizeOn(col)" class="table-header-resizer right" @mousedown="e => onThResizeMouseDown(e, col)"></div>
+                            <SortIcon v-if="col.sorter" class="table-header-sorter" />
                         </div>
+                        <!-- 列宽拖动handler -->
+                        <div v-if="colResizeOn(col)" class="table-header-resizer right" @mousedown="e => onThResizeMouseDown(e, col)"></div>
                     </th>
-                    <!-- 这个th用于横向虚拟滚动表格右边距 width、maxWidth 用于兼容低版本浏览器-->
+                    <!-- 这个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>
@@ -176,12 +171,7 @@
                                     'drag-row-cell': col.type === 'dragRow',
                                 },
                             ]"
-                            @click="
-                                e => {
-                                    col.type === 'expand' && toggleExpandRow(row, col);
-                                    onCellClick(e, row, col);
-                                }
-                            "
+                            @click="e => onCellClick(e, row, col)"
                             @mousedown="e => onCellMouseDown(e, row, col)"
                             @mouseenter="e => onCellMouseEnter(e, row, col)"
                             @mouseleave="e => onCellMouseLeave(e, row, col)"
@@ -240,7 +230,7 @@
 import { CSSProperties, computed, nextTick, onMounted, ref, shallowRef, toRaw, watch } from 'vue';
 import DragHandle from './components/DragHandle.vue';
 import SortIcon from './components/SortIcon.vue';
-import { DEFAULT_ROW_HEIGHT, DEFAULT_SMOOTH_SCROLL, EXPANDED_ROW_KEY_PREFIX, IS_LEGACY_MODE } from './const';
+import { CELL_KEY_SEPARATE, DEFAULT_ROW_HEIGHT, DEFAULT_SMOOTH_SCROLL, EXPANDED_ROW_KEY_PREFIX, IS_LEGACY_MODE } from './const';
 import {
     AutoRowHeightConfig,
     DragRowConfig,
@@ -403,7 +393,7 @@ const props = withDefaults(
          */
         cellFixedMode?: 'sticky' | 'relative';
         /**
-         * 是否平滑滚动。default: chrome < 85 ? true : false
+         * 是否平滑滚动。default: chrome < 85 || chrome > 120 ? true : false
          * - false: 使用 onwheel 滚动。为了防止滚动过快导致白屏。
          * - true: 不使用 onwheel 滚动。鼠标滚轮滚动时更加平滑。滚动过快时会白屏。
          */
@@ -651,8 +641,6 @@ const sortSwitchOrder: Order[] = [null, 'desc', 'asc'];
  * ```
  */
 const tableHeaders = shallowRef<StkTableColumn<DT>[][]>([]);
-/** 若有多级表头时，最后一行的tableHeaders.内容是 props.columns 的引用集合  */
-const tableHeaderLast = shallowRef<StkTableColumn<DT>[]>([]);
 
 /**
  * 用于计算多级表头的tableHeaders。模拟rowSpan 位置的辅助数组。用于计算固定列。
@@ -674,26 +662,35 @@ const tableHeaderLast = shallowRef<StkTableColumn<DT>[]>([]);
  */
 const tableHeadersForCalc = shallowRef<PrivateStkTableColumn<DT>[][]>([]);
 
-const dataSourceCopy = shallowRef<DT[]>([...props.dataSource]);
+/** 最后一行的tableHeaders.内容是 props.columns 的引用集合  */
+const tableHeaderLast = computed(() => tableHeadersForCalc.value.slice(-1)[0] || []);
+
+const dataSourceCopy = shallowRef<DT[]>(props.dataSource.slice());
+
+const rowKeyGenComputed = computed(() => {
+    const { rowKey } = props;
+    if (typeof rowKey === 'function') {
+        return (row: DT) => (rowKey as (row: DT) => string)(row);
+    } else {
+        return (row: DT) => (row as any)[rowKey];
+    }
+});
 
-/**
- * 列唯一键
- * @param col
- */
 const colKeyGen = computed<(col: StkTableColumn<DT>) => string>(() => {
-    if (typeof props.colKey === 'function') {
-        return col => (props.colKey as (col: StkTableColumn<DT>) => string)(col);
+    const { colKey } = props;
+    if (typeof colKey === 'function') {
+        return col => (colKey as (col: StkTableColumn<DT>) => string)(col);
     } else {
-        return col => (col ? (col as any)[props.colKey as string] : null);
+        return col => (col as any)[colKey];
     }
 });
 
-/** 空单元格占位字符 */
 const getEmptyCellText = computed(() => {
-    if (typeof props.emptyCellText === 'string') {
-        return () => props.emptyCellText;
+    const { emptyCellText } = props;
+    if (typeof emptyCellText === 'string') {
+        return () => emptyCellText;
     } else {
-        return (col: StkTableColumn<DT>, row: DT) => (props.emptyCellText as any)({ row, col });
+        return (col: StkTableColumn<DT>, row: DT) => emptyCellText({ row, col });
     }
 });
 
@@ -817,22 +814,20 @@ watch(
         if (dataSourceCopy.value.length !== val.length) {
             needInitVirtualScrollY = true;
         }
-        dataSourceCopy.value = [...val];
+        dataSourceCopy.value = val.slice(); // 浅拷贝
         // 数据长度没变则不计算虚拟滚动
         if (needInitVirtualScrollY) {
             // 表格渲染后再执行。initVirtualScrollY 中有获取dom的操作。
             nextTick(() => initVirtualScrollY());
         }
-
-        if (sortCol.value) {
+        const sortColValue = sortCol.value;
+        if (sortColValue) {
             // 排序
-            const column = tableHeaderLast.value.find(it => colKeyGen.value(it) === sortCol.value);
+            const colKey = colKeyGen.value;
+            const column = tableHeaderLast.value.find(it => colKey(it) === sortColValue);
             onColumnSort(column, false);
         }
     },
-    {
-        deep: false,
-    },
 );
 
 watch(
@@ -877,13 +872,12 @@ function dealColumns() {
                 centerCol.push(col);
             }
         });
-        copyColumn = [...leftCol, ...centerCol, ...rightCol];
+        copyColumn = leftCol.concat(centerCol).concat(rightCol);
     }
     const maxDeep = howDeepTheHeader(copyColumn);
-    const tempHeaderLast: StkTableColumn<DT>[] = [];
 
     if (maxDeep > 0 && props.virtualX) {
-        console.error('多级表头不支持横向虚拟滚动');
+        console.error('StkTableVue:多级表头不支持横向虚拟滚动!');
     }
 
     for (let i = 0; i <= maxDeep; i++) {
@@ -925,7 +919,6 @@ function dealColumns() {
                 tableHeadersForCalcTemp[depth].push(col);
             } else {
                 colWidth = getColWidth(col);
-                tempHeaderLast.push(col); // 没有children的列作为colgroup
                 for (let i = depth; i <= maxDeep; i++) {
                     // 如有rowSpan 向下复制一个表头col，用于计算固定列
                     tableHeadersForCalcTemp[i].push(col);
@@ -951,7 +944,6 @@ function dealColumns() {
 
     flat(copyColumn, null);
     tableHeaders.value = tableHeadersTemp;
-    tableHeaderLast.value = tempHeaderLast;
     tableHeadersForCalc.value = tableHeadersForCalcTemp;
 }
 
@@ -960,13 +952,9 @@ function dealColumns() {
  */
 function rowKeyGen(row: DT | null | undefined) {
     if (!row) return row;
-    let key = rowKeyGenStore.get(row);
+    let key = rowKeyGenStore.get(row) || (row as PrivateRowDT).__ROW_KEY__;
     if (!key) {
-        if ((row as PrivateRowDT).__ROW_KEY__) {
-            key = (row as PrivateRowDT).__ROW_KEY__;
-        } else {
-            key = typeof props.rowKey === 'function' ? props.rowKey(row) : row[props.rowKey];
-        }
+        key = rowKeyGenComputed.value(row);
 
         if (key === void 0) {
             // key为undefined时，不应该高亮行。因此重新生成key
@@ -979,21 +967,21 @@ function rowKeyGen(row: DT | null | undefined) {
 
 /** 单元格唯一值 */
 function cellKeyGen(row: DT | null | undefined, col: StkTableColumn<DT>) {
-    return rowKeyGen(row) + '--' + colKeyGen.value(col);
+    return rowKeyGen(row) + CELL_KEY_SEPARATE + colKeyGen.value(col);
 }
 
 /** 单元格样式 */
 const cellStyleMap = computed(() => {
     const thMap = new Map();
     const tdMap = new Map();
+    const { virtualX, colResizable } = props;
     tableHeaders.value.forEach((cols, depth) => {
         cols.forEach(col => {
-            const colKey = colKeyGen.value(col);
-            const width = props.virtualX ? getCalculatedColWidth(col) + 'px' : transformWidthToStr(col.width);
+            const width = virtualX ? getCalculatedColWidth(col) + 'px' : transformWidthToStr(col.width);
             const style: CSSProperties = {
                 width,
             };
-            if (props.colResizable) {
+            if (colResizable) {
                 // 如果要调整列宽，列宽必须固定。
                 style.minWidth = width;
                 style.maxWidth = width;
@@ -1001,17 +989,9 @@ const cellStyleMap = computed(() => {
                 style.minWidth = transformWidthToStr(col.minWidth) ?? width;
                 style.maxWidth = transformWidthToStr(col.maxWidth) ?? width;
             }
-
-            thMap.set(colKey, {
-                ...style,
-                ...getFixedStyle(TagType.TH, col, depth),
-                textAlign: col.headerAlign,
-            });
-            tdMap.set(colKey, {
-                ...style,
-                ...getFixedStyle(TagType.TD, col, depth),
-                textAlign: col.align,
-            });
+            const colKey = colKeyGen.value(col);
+            thMap.set(colKey, Object.assign({ textAlign: col.headerAlign }, style, getFixedStyle(TagType.TH, col, depth)));
+            tdMap.set(colKey, Object.assign({ textAlign: col.align }, style, getFixedStyle(TagType.TD, col, depth)));
         });
     });
     return {
@@ -1023,7 +1003,7 @@ const cellStyleMap = computed(() => {
 /** th title */
 function getHeaderTitle(col: StkTableColumn<DT>): string {
     const colKey = colKeyGen.value(col);
-    // 不展示title
+    // hide title
     if (props.hideHeaderTitle === true || (Array.isArray(props.hideHeaderTitle) && props.hideHeaderTitle.includes(colKey))) {
         return '';
     }
@@ -1038,7 +1018,7 @@ function getHeaderTitle(col: StkTableColumn<DT>): string {
  */
 function onColumnSort(col: StkTableColumn<DT> | undefined | null, click = true, options: { force?: boolean; emit?: boolean } = {}) {
     if (!col) {
-        console.warn('onColumnSort: col is not found');
+        console.warn('onColumnSort: not found col:', col);
         return;
     }
     if (!col.sorter && click) {
@@ -1052,26 +1032,32 @@ function onColumnSort(col: StkTableColumn<DT> | undefined | null, click = true,
         sortCol.value = colKey;
         sortOrderIndex.value = 0;
     }
+    const prevOrder = sortSwitchOrder[sortOrderIndex.value];
     if (click) sortOrderIndex.value++;
     sortOrderIndex.value = sortOrderIndex.value % 3;
 
     let order = sortSwitchOrder[sortOrderIndex.value];
     const sortConfig = { ...props.sortConfig, ...col.sortConfig };
     const defaultSort = sortConfig.defaultSort;
+    const colKeyGenValue = colKeyGen.value;
 
     if (!order && defaultSort) {
         // if no order ,use default order
-        const colKey = defaultSort.key || defaultSort.dataIndex;
-        if (!colKey) {
+        const defaultColKey = defaultSort.key || defaultSort.dataIndex;
+        if (!defaultColKey) {
             console.error('sortConfig.defaultSort key or dataIndex is required');
             return;
         }
-        order = defaultSort.order || 'desc';
+        if (colKey === defaultColKey && prevOrder === defaultSort.order) {
+            order = sortSwitchOrder.find(o => o !== defaultSort.order && o) as Order;
+        } else {
+            order = defaultSort.order;
+        }
         sortOrderIndex.value = sortSwitchOrder.indexOf(order);
-        sortCol.value = colKey as string;
+        sortCol.value = defaultColKey as string;
         col = null;
         for (const row of tableHeaders.value) {
-            const c = row.find(item => colKeyGen.value(item) === colKey);
+            const c = row.find(item => colKeyGenValue(item) === defaultColKey);
             if (c) {
                 col = c;
                 break;
@@ -1101,12 +1087,11 @@ function onRowClick(e: MouseEvent, row: DT) {
         // 点击同一行，取消当前选中行。
         currentRow.value = void 0;
         currentRowKey.value = void 0;
-        emits('current-change', e, row, { select: false });
     } else {
         currentRow.value = row;
         currentRowKey.value = rowKeyGen(row);
-        emits('current-change', e, row, { select: true });
     }
+    emits('current-change', e, row, { select: !isCurrentRow });
 }
 
 function onRowDblclick(e: MouseEvent, row: DT) {
@@ -1123,17 +1108,51 @@ function onRowMenu(e: MouseEvent, row: DT) {
     emits('row-menu', e, row);
 }
 
+/**
+ * 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 onCellClick(e: MouseEvent, row: DT, col: StkTableColumn<DT>) {
+    if (col.type === 'expand') {
+        toggleExpandRow(row, col);
+    }
     if (props.cellActive) {
         const cellKey = cellKeyGen(row, col);
+        const result = { row, col, select: false };
         if (props.selectedCellRevokable && currentSelectedCellKey.value === cellKey) {
             currentSelectedCellKey.value = void 0;
-            emits('cell-selected', e, { select: false, row, col });
         } else {
             currentSelectedCellKey.value = cellKey;
-            emits('cell-selected', e, { select: true, row, col });
+            result.select = true;
         }
+        emits('cell-selected', e, result);
     }
     emits('cell-click', e, row, col);
 }
@@ -1145,13 +1164,11 @@ function onHeaderCellClick(e: MouseEvent, col: StkTableColumn<DT>) {
 
 /** td mouseenter */
 function onCellMouseEnter(e: MouseEvent, row: DT, col: StkTableColumn<DT>) {
-    // currentColHoverKey.value = colKeyGen(col);
     emits('cell-mouseenter', e, row, col);
 }
 
 /** td mouseleave */
 function onCellMouseLeave(e: MouseEvent, row: DT, col: StkTableColumn<DT>) {
-    // currentColHoverKey.value = null;
     emits('cell-mouseleave', e, row, col);
 }
 
@@ -1215,7 +1232,7 @@ function onTableScroll(e: Event) {
     if (!e?.target) return;
 
     const { scrollTop, scrollLeft } = e.target as HTMLElement;
-    const { scrollTop: vScrollTop } = virtualScroll.value;
+    const { scrollTop: vScrollTop, startIndex, endIndex } = virtualScroll.value;
     const { scrollLeft: vScrollLeft } = virtualScrollX.value;
     const isYScroll = scrollTop !== vScrollTop;
     const isXScroll = scrollLeft !== vScrollLeft;
@@ -1236,10 +1253,8 @@ function onTableScroll(e: Event) {
         updateFixedShadow(virtualScrollX);
     }
 
-    const { startIndex, endIndex } = virtualScroll.value;
-    const data = { startIndex, endIndex };
     if (isYScroll) {
-        emits('scroll', e, data);
+        emits('scroll', e, { startIndex, endIndex });
     }
     if (isXScroll) {
         emits('scroll-x', e);
@@ -1310,10 +1325,11 @@ function setSorter(colKey: string, order: Order, option: { sortOption?: SortOpti
     const newOption = { silent: true, sortOption: null, sort: true, ...option };
     sortCol.value = colKey;
     sortOrderIndex.value = sortSwitchOrder.indexOf(order);
+    const colKeyGenValue = colKeyGen.value;
 
     if (newOption.sort && dataSourceCopy.value?.length) {
         // 如果表格有数据，则进行排序
-        const column = newOption.sortOption || tableHeaderLast.value.find(it => colKeyGen.value(it) === sortCol.value);
+        const column = newOption.sortOption || tableHeaderLast.value.find(it => colKeyGenValue(it) === sortCol.value);
         if (column) onColumnSort(column, false, { force: option.force ?? true, emit: !newOption.silent });
         else console.warn('Can not find column by key:', sortCol.value);
     }
@@ -1323,7 +1339,7 @@ function setSorter(colKey: string, order: Order, option: { sortOption?: SortOpti
 function resetSorter() {
     sortCol.value = void 0;
     sortOrderIndex.value = 0;
-    dataSourceCopy.value = [...props.dataSource];
+    dataSourceCopy.value = props.dataSource.slice();
 }
 
 /**
@@ -1372,7 +1388,7 @@ function setRowExpand(rowKeyOrRow: string | undefined | DT, expand?: boolean, da
     } else {
         rowKey = rowKeyGen(rowKeyOrRow);
     }
-    const tempData = [...dataSourceCopy.value];
+    const tempData = dataSourceCopy.value.slice();
     const index = tempData.findIndex(it => rowKeyGen(it) === rowKey);
     if (index === -1) {
         console.warn('expandRow failed.rowKey:', rowKey);

package/src/StkTable/const.ts

@@ -32,3 +32,6 @@ export const STK_ID_PREFIX = 'stk';
 
 /** expanded row key prefix */
 export const EXPANDED_ROW_KEY_PREFIX = 'expanded-';
+
+/** cell key 的分隔符 */
+export const CELL_KEY_SEPARATE = '--';

package/src/StkTable/style.less

@@ -17,7 +17,7 @@
     --td-bgc: #fff;
     --td-hover-color: #71a2fd;
     --td-active-color: #386ccc;
-    --th-bgc: #fafafc;
+    --th-bgc: #f1f1f9;
     --th-color: #272841;
     --tr-active-bgc: rgb(230, 247, 255);
     --tr-hover-bgc: rgba(230, 247, 255, 0.7);
@@ -488,14 +488,12 @@
 
     .table-header-cell-wrapper {
         max-width: 100%;
-        /*最大宽度不超过列宽*/
         display: inline-flex;
         align-items: center;
     }
 
     .table-header-title {
         overflow: hidden;
-        // align-self: flex-start;
     }
 
     .table-header-sorter {

package/src/StkTable/useColResize.ts

@@ -89,8 +89,9 @@ export function useColResize<DT extends Record<string, any>>({
         const { left } = tableContainerRef.value.getBoundingClientRect();
         const tableHeaderLastValue = tableHeaderLast.value;
         let revertMoveX = false;
+        const colKey = colKeyGen.value;
         /** 列下标 */
-        const colIndex = tableHeaderLastValue.findIndex(it => colKeyGen.value(it) === colKeyGen.value(col));
+        const colIndex = tableHeaderLastValue.findIndex(it => colKey(it) === colKey(col));
         const fixedIndex = fixedCols.value.indexOf(col);
         /** 是否正在被固定 */
         const isFixed = fixedIndex !== -1;
@@ -171,11 +172,13 @@ export function useColResize<DT extends Record<string, any>>({
         let width = getCalculatedColWidth(lastCol) + moveX;
         if (width < props.colMinWidth) width = props.colMinWidth;
 
-        const curCol = tableHeaderLast.value.find(it => colKeyGen.value(it) === colKeyGen.value(lastCol));
+        const colKey = colKeyGen.value;
+
+        const curCol = tableHeaderLast.value.find(it => colKey(it) === colKey(lastCol));
         if (!curCol) return;
         curCol.width = width + 'px';
 
-        emits('update:columns', [...props.columns]);
+        emits('update:columns', props.columns.slice());
         emits('col-resize', { ...curCol });
 
         // 隐藏指示线
@@ -199,7 +202,7 @@ export function useColResize<DT extends Record<string, any>>({
     /**获取最后一个叶子 */
     function findLastChildCol(column: StkTableColumn<DT> | null) {
         if (column?.children?.length) {
-            const lastChild = column.children.at(-1) as StkTableColumn<DT>;
+            const lastChild = column.children.slice(-1)[0] as StkTableColumn<DT>;
             return findLastChildCol(lastChild);
         }
         return column;

package/src/StkTable/useFixedCol.ts

@@ -33,18 +33,25 @@ export function useFixedCol<DT extends Record<string, any>>({
     /** 固定列的class */
     const fixedColClassMap = computed(() => {
         const colMap = new Map();
-        // console.log('tableHeaderForCalc', tableHeaderForCalc.value);
         const fixedShadowColsValue = fixedShadowCols.value;
+        const fixedColsValue = fixedCols.value;
+        const colKey = colKeyGen.value;
+        const fixedColShadow = props.fixedColShadow;
         tableHeaders.value.forEach(cols => {
             cols.forEach(col => {
-                const showShadow = props.fixedColShadow && col.fixed && fixedShadowColsValue.includes(col);
-                const classObj = {
-                    'fixed-cell': col.fixed,
-                    ['fixed-cell--' + col.fixed]: col.fixed,
-                    'fixed-cell--shadow': showShadow,
-                    ['fixed-cell--active']: fixedCols.value.includes(col), // 表示该列正在被固定
+                const fixed = col.fixed;
+                const showShadow = fixedColShadow && fixed && fixedShadowColsValue.includes(col);
+                const classObj: Record<string, any> = {
+                    'fixed-cell--active': fixedColsValue.includes(col), // 表示该列正在被固定
                 };
-                colMap.set(colKeyGen.value(col), classObj);
+                if (fixed) {
+                    classObj['fixed-cell'] = true;
+                    classObj['fixed-cell--' + fixed] = true;
+                }
+                if (showShadow) {
+                    classObj['fixed-cell--shadow'] = true;
+                }
+                colMap.set(colKey(col), classObj);
             });
         });
         return colMap;
@@ -76,17 +83,16 @@ export function useFixedCol<DT extends Record<string, any>>({
     /** 滚动条变化时，更新需要展示阴影的列 */
     function updateFixedShadow(virtualScrollX?: Ref<VirtualScrollXStore>) {
         const fixedColsTemp: StkTableColumn<DT>[] = [];
-        let clientWidth, /* scrollWidth, */ scrollLeft;
+        const getFixedColPositionValue = getFixedColPosition.value;
+        let clientWidth, scrollLeft;
 
         if (virtualScrollX?.value) {
-            const { containerWidth: cw, /* scrollWidth: sw, */ scrollLeft: sl } = virtualScrollX.value;
+            const { containerWidth: cw, scrollLeft: sl } = virtualScrollX.value;
             clientWidth = cw;
-            // scrollWidth = sw;
             scrollLeft = sl;
         } else {
-            const { clientWidth: cw, /* scrollWidth: sw, */ scrollLeft: sl } = tableContainerRef.value as HTMLDivElement;
+            const { clientWidth: cw, scrollLeft: sl } = tableContainerRef.value as HTMLDivElement;
             clientWidth = cw;
-            // scrollWidth = sw;
             scrollLeft = sl;
         }
 
@@ -103,7 +109,7 @@ export function useFixedCol<DT extends Record<string, any>>({
              */
             let left = 0;
             row.forEach(col => {
-                const position = getFixedColPosition.value(col);
+                const position = getFixedColPositionValue(col);
                 const isFixedLeft = col.fixed === 'left';
                 const isFixedRight = col.fixed === 'right';
 
@@ -125,7 +131,7 @@ export function useFixedCol<DT extends Record<string, any>>({
         });
 
         if (props.fixedColShadow) {
-            fixedShadowCols.value = [...leftShadowCol, ...rightShadowCol].filter(Boolean) as StkTableColumn<DT>[];
+            fixedShadowCols.value = leftShadowCol.concat(rightShadowCol).filter(Boolean) as StkTableColumn<DT>[];
         }
 
         fixedCols.value = fixedColsTemp;

package/src/StkTable/useFixedStyle.ts

@@ -36,21 +36,20 @@ export function useFixedStyle<DT extends Record<string, any>>({
         if (tagType === TagType.TD && !fixed) return null;
 
         const style: CSSProperties = {};
-
+        const { headerRowHeight, rowHeight } = props;
         const isFixedLeft = fixed === 'left';
+        const { scrollLeft, scrollWidth, offsetLeft, containerWidth } = virtualScrollX.value;
+        const scrollRight = scrollWidth - containerWidth - scrollLeft;
+
         if (tagType === TagType.TH) {
             // TH
             if (isRelativeMode.value) {
                 style.top = virtualScroll.value.scrollTop + 'px';
             } else {
-                const rowHeight = props.headerRowHeight ?? props.rowHeight;
-                style.top = depth * rowHeight + 'px';
+                style.top = depth * (headerRowHeight ?? rowHeight) + 'px';
             }
         }
 
-        const { scrollLeft, scrollWidth, offsetLeft, containerWidth } = virtualScrollX.value;
-        const scrollRight = scrollWidth - containerWidth - scrollLeft;
-
         if (fixed === 'left' || fixed === 'right') {
             if (isRelativeMode.value) {
                 if (isFixedLeft) {