stk-table-vue 0.6.2 → 0.6.3

package/package.json

@@ -1,65 +1,71 @@
 {
-    "name": "stk-table-vue",
-    "version": "0.6.2",
-    "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",
-    "directories": {
-        "test": "test"
-    },
-    "type": "module",
-    "scripts": {
-        "dev": "vite",
-        "build": "vite build",
-        "test": "vitest"
-    },
-    "keywords": [
-        "virtual table",
-        "vue",
-        "vue2",
-        "vue3",
-        "highlight",
-        "sticky",
-        "virtual",
-        "table",
-        "list"
-    ],
-    "files": [
-        "lib",
-        "src"
-    ],
-    "author": "japlus",
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/ja-plus/stk-table-vue"
-    },
-    "license": "MIT",
-    "devDependencies": {
-        "@types/d3-interpolate": "^3.0.4",
-        "@types/node": "^20.12.10",
-        "@typescript-eslint/eslint-plugin": "^7.7.0",
-        "@typescript-eslint/parser": "^7.7.0",
-        "@vitejs/plugin-vue": "^5.1.4",
-        "@vue/test-utils": "2.4.4",
-        "eslint": "^8.57.0",
-        "eslint-config-prettier": "^9.1.0",
-        "eslint-plugin-html": "^8.1.0",
-        "eslint-plugin-prettier": "^5.1.3",
-        "eslint-plugin-vue": "^9.25.0",
-        "happy-dom": "^12.10.3",
-        "less": "^4.2.0",
-        "postcss-discard-comments": "^6.0.2",
-        "postcss-preset-env": "^9.5.11",
-        "prettier": "^3.2.5",
-        "typescript": "^5.4.5",
-        "vite": "^5.4.10",
-        "vite-plugin-dts": "^4.3.0",
-        "vitest": "^2.1.3",
-        "vue": "^3.5.12",
-        "vue-eslint-parser": "^9.4.2"
-    },
-    "dependencies": {
-        "d3-interpolate": "^3.0.1"
-    }
+  "name": "stk-table-vue",
+  "version": "0.6.3",
+  "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",
+  "directories": {
+    "test": "test"
+  },
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "test": "vitest",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "docs:preview": "vitepress preview docs"
+  },
+  "keywords": [
+    "virtual table",
+    "vue",
+    "vue2",
+    "vue3",
+    "highlight",
+    "sticky",
+    "virtual",
+    "table",
+    "list"
+  ],
+  "files": [
+    "lib",
+    "src"
+  ],
+  "author": "japlus",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ja-plus/stk-table-vue"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "@types/d3-interpolate": "^3.0.4",
+    "@types/node": "^20.12.10",
+    "@typescript-eslint/eslint-plugin": "^7.7.0",
+    "@typescript-eslint/parser": "^7.7.0",
+    "@vitejs/plugin-vue": "^5.1.4",
+    "@vue/test-utils": "2.4.4",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-html": "^8.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-vue": "^9.25.0",
+    "happy-dom": "^12.10.3",
+    "less": "^4.2.0",
+    "postcss": "^8.4.47",
+    "postcss-discard-comments": "^6.0.2",
+    "postcss-preset-env": "^9.5.11",
+    "prettier": "^3.2.5",
+    "typescript": "^5.4.5",
+    "vite": "^5.4.10",
+    "vite-plugin-dts": "^4.3.0",
+    "vitepress": "^1.5.0",
+    "vitepress-demo-plugin": "^1.1.1",
+    "vitest": "^2.1.3",
+    "vue": "^3.5.12",
+    "vue-eslint-parser": "^9.4.2"
+  },
+  "dependencies": {
+    "d3-interpolate": "^3.0.1"
+  }
 }

package/src/StkTable/StkTable.vue

@@ -62,7 +62,7 @@
                     <!-- v for中最后一行才用 切割。TODO:不支持多级表头虚拟横向滚动 -->
                     <th
                         v-for="(col, colIndex) in virtualX_on && rowIndex === tableHeaders.length - 1 ? virtualX_columnPart : row"
-                        :key="col.dataIndex"
+                        :key="colKeyGen(col)"
                         :data-col-key="colKeyGen(col)"
                         :draggable="isHeaderDraggable(col) ? 'true' : 'false'"
                         :rowspan="virtualX_on ? 1 : col.rowSpan"
@@ -71,7 +71,7 @@
                         :title="getHeaderTitle(col)"
                         :class="[
                             col.sorter ? 'sortable' : '',
-                            col.dataIndex === sortCol && sortOrderIndex !== 0 && 'sorter-' + sortSwitchOrder[sortOrderIndex],
+                            colKeyGen(col) === sortCol && sortOrderIndex !== 0 && 'sorter-' + sortSwitchOrder[sortOrderIndex],
                             col.headerClassName,
                             fixedColClassMap.get(colKeyGen(col)),
                         ]"
@@ -122,19 +122,19 @@
                     <!--这个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="col.dataIndex" :style="cellStyleMap[TagType.TD].get(colKeyGen(col))"></td>
+                        <td v-for="col in virtualX_columnPart" :key="colKeyGen(col)" :style="cellStyleMap[TagType.TD].get(colKeyGen(col))"></td>
                     </template>
                 </tr>
                 <tr
                     v-for="(row, rowIndex) in virtual_dataSourcePart"
-                    :id="stkTableId + '-' + (rowKey ? rowKeyGen(row) : virtualScroll.startIndex + rowIndex)"
+                    :id="stkTableId + '-' + (rowKey ? rowKeyGen(row) : (virtual_on ? virtualScroll.startIndex : 0) + rowIndex)"
                     ref="trRef"
-                    :key="rowKey ? rowKeyGen(row) : virtualScroll.startIndex + rowIndex"
-                    :data-row-key="rowKey ? rowKeyGen(row) : virtualScroll.startIndex + rowIndex"
+                    :key="rowKey ? rowKeyGen(row) : (virtual_on ? virtualScroll.startIndex : 0) + rowIndex"
+                    :data-row-key="rowKey ? rowKeyGen(row) : (virtual_on ? virtualScroll.startIndex : 0) + rowIndex"
                     :class="{
                         active: rowKey ? rowKeyGen(row) === currentRowKey : row === currentRow,
                         hover: props.showTrHoverClass && (rowKey ? rowKeyGen(row) === currentHoverRowKey : row === currentHoverRowKey),
-                        [rowClassName(row, virtualScroll.startIndex + rowIndex)]: true,
+                        [rowClassName(row, (virtual_on ? virtualScroll.startIndex : 0) + rowIndex)]: true,
                         expanded: row?.__EXPANDED__,
                         'expanded-row': row && (row as ExpandedRow).__EXPANDED_ROW__,
                     }"
@@ -150,7 +150,7 @@
                     @dblclick="e => onRowDblclick(e, row)"
                     @contextmenu="e => onRowMenu(e, row)"
                     @mouseover="e => onTrMouseOver(e, row)"
-                    @drop="e => onTrDrop(e, virtualScroll.startIndex + rowIndex)"
+                    @drop="e => onTrDrop(e, (virtual_on ? virtualScroll.startIndex : 0) + rowIndex)"
                 >
                     <!--这个td用于配合虚拟滚动的th对应，防止列错位-->
                     <td v-if="virtualX_on" class="vt-x-left"></td>
@@ -165,9 +165,8 @@
                     <template v-else>
                         <td
                             v-for="(col, colIndex) in virtualX_columnPart"
-                            :key="col.dataIndex"
-                            :data-index="col.dataIndex"
-                            :cell-key="rowKeyGen(row) + '--' + colKeyGen(col)"
+                            :key="colKeyGen(col)"
+                            :data-cell-key="cellKeyGen(row, col)"
                             :style="cellStyleMap[TagType.TD].get(colKeyGen(col))"
                             :class="[
                                 col.className,
@@ -196,7 +195,7 @@
                                 class="table-cell-wrapper"
                                 :col="col"
                                 :row="row"
-                                :rowIndex="virtualScroll.startIndex + rowIndex"
+                                :rowIndex="(virtual_on ? virtualScroll.startIndex : 0) + rowIndex"
                                 :colIndex="colIndex"
                                 :cellValue="row?.[col.dataIndex]"
                                 :expanded="row?.__EXPANDED__ || null"
@@ -208,13 +207,13 @@
                                 :title="col.type !== 'seq' ? row?.[col.dataIndex] : ''"
                             >
                                 <template v-if="col.type === 'seq'">
-                                    {{ (props.seqConfig.startIndex || 0) + virtualScroll.startIndex + rowIndex + 1 }}
+                                    {{ (props.seqConfig.startIndex || 0) + (virtual_on ? virtualScroll.startIndex : 0) + rowIndex + 1 }}
                                 </template>
                                 <span v-else-if="col.type === 'expand'">
                                     {{ row?.[col.dataIndex] ?? '' }}
                                 </span>
                                 <template v-else-if="col.type === 'dragRow'">
-                                    <DragHandle @dragstart="e => onTrDragStart(e, virtualScroll.startIndex + rowIndex)" />
+                                    <DragHandle @dragstart="e => onTrDragStart(e, (virtual_on ? virtualScroll.startIndex : 0) + rowIndex)" />
                                     <span>
                                         {{ row?.[col.dataIndex] ?? '' }}
                                     </span>
@@ -256,7 +255,6 @@ import {
     SeqConfig,
     SortConfig,
     SortOption,
-    SortState,
     StkTableColumn,
     TagType,
     UniqKeyProp,
@@ -384,7 +382,7 @@ const props = withDefaults(
         optimizeVue2Scroll?: boolean;
         /** 排序配置 */
         sortConfig?: SortConfig<DT>;
-        /** 隐藏头部title。可传入dataIndex数组 */
+        /** 隐藏头部title。可传入colKey数组 */
         hideHeaderTitle?: boolean | string[];
         /** 高亮配置 */
         highlightConfig?: HighlightConfig;
@@ -625,7 +623,7 @@ const currentHoverRowKey = ref(null);
 /** 当前hover的列的key */
 // const currentColHoverKey = ref(null);
 
-/** 排序的列dataIndex*/
+/** sort colKey*/
 let sortCol = ref<keyof DT>();
 let sortOrderIndex = ref(0);
 
@@ -647,6 +645,26 @@ const tableHeaders = shallowRef<StkTableColumn<DT>[][]>([]);
 /** 若有多级表头时，最后一行的tableHeaders.内容是 props.columns 的引用集合  */
 const tableHeaderLast = shallowRef<StkTableColumn<DT>[]>([]);
 
+/**
+ * 用于计算多级表头的tableHeaders。模拟rowSpan 位置的辅助数组。用于计算固定列。
+ * @eg
+ * ```
+ * |             colspan3               |
+ * | rowspan2 |       colspan2          |
+ * | rowspan2 |  colspan1 |  colspan1   |
+ * ```
+ * ---
+ * expect arr:
+ * ```
+ * const arr = [
+ *  [col],
+ *  [col2, col3],
+ *  [col2, col4, col5],
+ * ]
+ * ```
+ */
+const tableHeadersForCalc = shallowRef<PrivateStkTableColumn<DT>[][]>([]);
+
 const dataSourceCopy = shallowRef<DT[]>([...props.dataSource]);
 
 /**
@@ -696,7 +714,7 @@ const {
 } = useVirtualScroll({ tableContainerRef, trRef, props, dataSourceCopy, tableHeaderLast, tableHeaders, rowKeyGen });
 
 /** 获取固定列的位置 */
-const getFixedColPosition = useGetFixedColPosition({ colKeyGen, tableHeaders });
+const getFixedColPosition = useGetFixedColPosition({ colKeyGen, tableHeadersForCalc });
 
 const getFixedStyle = useFixedStyle<DT>({
     props,
@@ -799,7 +817,7 @@ watch(
 
         if (sortCol.value) {
             // 排序
-            const column = tableHeaderLast.value.find(it => it.dataIndex === sortCol.value);
+            const column = tableHeaderLast.value.find(it => colKeyGen.value(it) === sortCol.value);
             onColumnSort(column, false);
         }
     },
@@ -824,8 +842,8 @@ onMounted(() => {
 /** 处理默认排序 */
 function dealDefaultSorter() {
     if (!props.sortConfig.defaultSort) return;
-    const { dataIndex, order, silent } = { silent: false, ...props.sortConfig.defaultSort };
-    setSorter(dataIndex as string, order, { force: false, silent });
+    const { key, dataIndex, order, silent } = { silent: false, ...props.sortConfig.defaultSort };
+    setSorter((key || dataIndex) as string, order, { force: false, silent });
 }
 
 /**
@@ -833,7 +851,8 @@ function dealDefaultSorter() {
  */
 function dealColumns() {
     // reset
-    let tableHeadersTemp: StkTableColumn<DT>[][] = [];
+    const tableHeadersTemp: StkTableColumn<DT>[][] = [];
+    const tableHeadersForCalcTemp: StkTableColumn<DT>[][] = [];
     let copyColumn = props.columns; // do not deep clone
     // relative 模式下不支持sticky列。因此就放在左右两侧。
     if (isRelativeMode.value) {
@@ -851,13 +870,18 @@ function dealColumns() {
         });
         copyColumn = [...leftCol, ...centerCol, ...rightCol];
     }
-    const deep = howDeepTheHeader(copyColumn);
+    const maxDeep = howDeepTheHeader(copyColumn);
     const tempHeaderLast: StkTableColumn<DT>[] = [];
 
-    if (deep > 1 && props.virtualX) {
+    if (maxDeep > 0 && props.virtualX) {
         console.error('多级表头不支持横向虚拟滚动');
     }
 
+    for (let i = 0; i <= maxDeep; i++) {
+        tableHeadersTemp[i] = [];
+        tableHeadersForCalcTemp[i] = [];
+    }
+
     /**
      * 展开columns
      * @param arr
@@ -870,9 +894,6 @@ function dealColumns() {
         parent: PrivateStkTableColumn<DT> | null,
         depth = 0 /* , parentFixed: 'left' | 'right' | null = null */,
     ) {
-        if (!tableHeadersTemp[depth]) {
-            tableHeadersTemp[depth] = [];
-        }
         /** 所有子节点数量 */
         let allChildrenLen = 0;
         let allChildrenWidthSum = 0;
@@ -892,21 +913,27 @@ function dealColumns() {
                 const [len, widthSum] = flat(col.children, col, depth + 1 /* , col.fixed */);
                 colChildrenLen = len;
                 colWidth = widthSum;
+                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);
+                }
             }
             // 回溯
+            col.__WIDTH__ = colWidth; //记录计算的列宽
             tableHeadersTemp[depth].push(col);
-            const rowSpan = col.children ? 1 : deep - depth;
+            const rowSpan = col.children ? 1 : maxDeep - depth + 1;
             const colSpan = colChildrenLen;
-            if (rowSpan !== 1) {
+            if (rowSpan > 1) {
                 col.rowSpan = rowSpan;
             }
-            if (colSpan !== 1) {
+            if (colSpan > 1) {
                 col.colSpan = colSpan;
             }
-            col.__WIDTH__ = colWidth; //记录计算的列宽
+
             allChildrenLen += colChildrenLen;
             allChildrenWidthSum += colWidth;
         });
@@ -914,9 +941,9 @@ function dealColumns() {
     }
 
     flat(copyColumn, null);
-
     tableHeaders.value = tableHeadersTemp;
     tableHeaderLast.value = tempHeaderLast;
+    tableHeadersForCalc.value = tableHeadersForCalcTemp;
 }
 
 /**
@@ -986,8 +1013,9 @@ const cellStyleMap = computed(() => {
 
 /** th title */
 function getHeaderTitle(col: StkTableColumn<DT>): string {
+    const colKey = colKeyGen.value(col);
     // 不展示title
-    if (props.hideHeaderTitle === true || (Array.isArray(props.hideHeaderTitle) && props.hideHeaderTitle.includes(col.dataIndex))) {
+    if (props.hideHeaderTitle === true || (Array.isArray(props.hideHeaderTitle) && props.hideHeaderTitle.includes(colKey))) {
         return '';
     }
     return col.title || '';
@@ -1009,9 +1037,10 @@ function onColumnSort(col: StkTableColumn<DT> | undefined | null, click = true,
         return;
     }
     options = { force: false, emit: false, ...options };
-    if (sortCol.value !== col.dataIndex) {
+    const colKey = colKeyGen.value(col);
+    if (sortCol.value !== colKey) {
         // 改变排序的列时，重置排序
-        sortCol.value = col.dataIndex;
+        sortCol.value = colKey;
         sortOrderIndex.value = 0;
     }
     if (click) sortOrderIndex.value++;
@@ -1022,15 +1051,23 @@ function onColumnSort(col: StkTableColumn<DT> | undefined | null, click = true,
     const defaultSort = sortConfig.defaultSort;
 
     if (!order && defaultSort) {
-        if (!defaultSort.dataIndex) {
-            console.error('sortConfig.defaultSort.dataIndex is required');
+        // if no order ,use default order
+        const colKey = defaultSort.key || defaultSort.dataIndex;
+        if (!colKey) {
+            console.error('sortConfig.defaultSort key or dataIndex is required');
             return;
         }
-        // 没有排序时变成默认排序
         order = defaultSort.order || 'desc';
         sortOrderIndex.value = sortSwitchOrder.indexOf(order);
-        sortCol.value = defaultSort.dataIndex as string;
-        col = props.columns.find(item => item.dataIndex === defaultSort.dataIndex) || null;
+        sortCol.value = colKey as string;
+        col = null;
+        for (const row of tableHeaders.value) {
+            const c = row.find(item => colKeyGen.value(item) === colKey);
+            if (c) {
+                col = c;
+                break;
+            }
+        }
     }
     if (!props.sortRemote || options.force) {
         const sortOption = col || defaultSort;
@@ -1247,24 +1284,24 @@ function setSelectedCell(row?: DT, col?: StkTableColumn<DT>, option = { silent:
 }
 
 /**
- * 设置表头排序状态
- * @param dataIndex 列字段
+ * 设置表头排序状态。
+ * @param colKey 列唯一键字段。如果你想要取消排序状态，请使用`resetSorter`
  * @param order 正序倒序
  * @param option.sortOption 指定排序参数。同 StkTableColumn 中排序相关字段。建议从columns中find得到。
  * @param option.sort 是否触发排序-默认true
  * @param option.silent 是否禁止触发回调-默认true
  * @param option.force 是否触发排序-默认true
  */
-function setSorter(dataIndex: string, order: Order, option: { sortOption?: SortOption<DT>; force?: boolean; silent?: boolean; sort?: boolean } = {}) {
+function setSorter(colKey: string, order: Order, option: { sortOption?: SortOption<DT>; force?: boolean; silent?: boolean; sort?: boolean } = {}) {
     const newOption = { silent: true, sortOption: null, sort: true, ...option };
-    sortCol.value = dataIndex;
+    sortCol.value = colKey;
     sortOrderIndex.value = sortSwitchOrder.indexOf(order);
 
     if (newOption.sort && dataSourceCopy.value?.length) {
         // 如果表格有数据，则进行排序
-        const column = newOption.sortOption || tableHeaderLast.value.find(it => it.dataIndex === sortCol.value);
+        const column = newOption.sortOption || tableHeaderLast.value.find(it => colKeyGen.value(it) === sortCol.value);
         if (column) onColumnSort(column, false, { force: option.force ?? true, emit: !newOption.silent });
-        else console.warn('Can not find column by dataIndex:', sortCol.value);
+        else console.warn('Can not find column by key:', sortCol.value);
     }
     return dataSourceCopy.value;
 }
@@ -1292,10 +1329,10 @@ function getTableData() {
 }
 
 /** get current sort info */
-function getSortColumns(): Partial<SortState<DT>>[] {
+function getSortColumns() {
     const sortOrder = sortSwitchOrder[sortOrderIndex.value];
     if (!sortOrder) return [];
-    return [{ dataIndex: sortCol.value, order: sortOrder }];
+    return [{ key: sortCol.value, order: sortOrder }];
 }
 
 /** click expended icon to toggle expand row */
@@ -1411,9 +1448,9 @@ defineExpose({
      */
     setHighlightDimRow,
     /**
-     * 表格排序列dataIndex
+     * 表格排序列colKey
      *
-     * en: Table sort column dataIndex
+     * en: Table sort column colKey
      */
     sortCol,
     /**

package/src/StkTable/style.less

@@ -49,14 +49,7 @@
     display: flex;
     flex-direction: column;
     box-sizing: border-box;
-    /** 
-     * border-left: 此方案用于减少cell 中border-left 的css选择。同时利于多级表头border-left问题。利于横向滚动border-left
-     * - box-shadow inset 方案不生效，且占用属性。
-     * - outline 方案绘制在图形外
-     * - 绝对定位元素。需要根据滚动条位置动态计算。不合适。
-     * - sticky 定位方案需要占用位置。高度为0。
-     */
-    border-left: 1px solid var(--border-color);
+
     /* 下面border用于表格内容不满高度时，绘制表格边界线 */
     background-image: var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
 
@@ -113,16 +106,15 @@
         }
     }
 
-    &.border-h {
-        --bg-border-right: linear-gradient(transparent, transparent);
-        --bg-border-left: linear-gradient(transparent, transparent);
-    }
-
-    &.border-v {
-        --bg-border-bottom: linear-gradient(transparent, transparent);
-    }
-
     &.border {
+        /** 
+        * border-left: 此方案用于减少cell 中border-left 的css选择。同时利于多级表头border-left问题。利于横向滚动border-left
+        * - box-shadow inset 方案不生效，且占用属性。
+        * - outline 方案绘制在图形外
+        * - 绝对定位元素。需要根据滚动条位置动态计算。不合适。
+        * - sticky 定位方案需要占用位置。高度为0。
+        */
+        border-left: 1px solid var(--border-color);
 
         th,
         td {
@@ -134,6 +126,19 @@
         }
     }
 
+    &.border-h {
+        border-left: none;
+        --bg-border-right: linear-gradient(transparent, transparent);
+        --bg-border-left: linear-gradient(transparent, transparent);
+    }
+
+    &.border-v {
+        --bg-border-bottom: linear-gradient(transparent, transparent);
+        --bg-border-top: linear-gradient(transparent, transparent);
+    }
+
+
+
     &.border-body-v {
         tbody {
             --bg-border-bottom: linear-gradient(transparent, transparent);
@@ -233,7 +238,7 @@
     }
 
     &.auto-row-height {
-        
+
         tbody td {
             height: unset;
 

package/src/StkTable/types/index.ts

@@ -44,7 +44,6 @@ export type CustomCell<T extends CustomCellProps<U> | CustomHeaderCellProps<U>,
 export type StkTableColumn<T extends Record<string, any>> = {
     /**
      * 用于区分相同dataIndex 的列。
-     * 需要自行配置colKey="(col: StkTableColumn<any>) => col.key ?? col.dataIndex"
      */
     key?: any;
     /**
@@ -155,6 +154,12 @@ export type SortConfig<T extends Record<string, any>> = {
      * 类似onMounted时，调用setSorter点了下表头。
      */
     defaultSort?: {
+        /**
+         * 列唯一键，
+         *
+         * 如果您配了 `props.colKey` 则这里表示的列唯一键的值
+         */
+        key?: StkTableColumn<T>['key'];
         dataIndex: StkTableColumn<T>['dataIndex'];
         order: Order;
         sortField?: StkTableColumn<T>['sortField'];

package/src/StkTable/useFixedCol.ts

@@ -33,6 +33,7 @@ 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;
         tableHeaders.value.forEach(cols => {
             cols.forEach(col => {

package/src/StkTable/useFixedStyle.ts

@@ -43,7 +43,8 @@ export function useFixedStyle<DT extends Record<string, any>>({
             if (isRelativeMode.value) {
                 style.top = virtualScroll.value.scrollTop + 'px';
             } else {
-                style.top = depth * props.rowHeight + 'px';
+                const rowHeight = props.headerRowHeight ?? props.rowHeight;
+                style.top = depth * rowHeight + 'px';
             }
         }
 

package/src/StkTable/useGetFixedColPosition.ts

@@ -4,7 +4,7 @@ import { getCalculatedColWidth } from './utils/constRefUtils';
 
 type Params<T extends Record<string, any>> = {
     colKeyGen: ComputedRef<(col: StkTableColumn<T>) => UniqKey>;
-    tableHeaders: ShallowRef<StkTableColumn<T>[][]>;
+    tableHeadersForCalc: ShallowRef<StkTableColumn<T>[][]>;
 };
 
 /**
@@ -12,21 +12,21 @@ type Params<T extends Record<string, any>> = {
  * - col.fixed = left 则得到距离左侧的距离
  * - col.fixed = right 则得到距离右侧的距离
  */
-export function useGetFixedColPosition<DT extends Record<string, any>>({ tableHeaders, colKeyGen }: Params<DT>) {
+export function useGetFixedColPosition<DT extends Record<string, any>>({ tableHeadersForCalc, colKeyGen }: Params<DT>) {
     /** 固定列fixed左侧或者右侧的距离 */
     const getFixedColPosition = computed(() => {
-        /** dataIndex 作为唯一标识 */
+        /** colKey 作为唯一标识 */
         const colKeyStore: Record<string, number> = {};
-        /** 没有dataIndex 的多级表头列，使用对象引用做标识 */
+        /** 没有 colKey 的多级表头列，使用对象引用做标识 */
         const refStore = new WeakMap<StkTableColumn<DT>, number>();
-        tableHeaders.value.forEach(cols => {
+        tableHeadersForCalc.value.forEach(cols => {
             let left = 0;
             /**遍历右侧fixed时，因为left已经遍历过一次了。所以，可以拿到right遍历边界 */
             let rightStartIndex = 0;
             for (let i = 0; i < cols.length; i++) {
                 const item = cols[i];
                 if (item.fixed === 'left') {
-                    const colKey = colKeyGen.value(item) || item.dataIndex;
+                    const colKey = colKeyGen.value(item);
                     if (colKey) {
                         colKeyStore[colKey] = left;
                     } else {
@@ -42,7 +42,7 @@ export function useGetFixedColPosition<DT extends Record<string, any>>({ tableHe
             let right = 0;
             for (let i = cols.length - 1; i >= rightStartIndex; i--) {
                 const item = cols[i];
-                const colKey = colKeyGen.value(item) || item.dataIndex;
+                const colKey = colKeyGen.value(item);
                 if (item.fixed === 'right') {
                     if (colKey) {
                         colKeyStore[colKey] = right;
@@ -55,7 +55,7 @@ export function useGetFixedColPosition<DT extends Record<string, any>>({ tableHe
         });
 
         return (col: StkTableColumn<any>) => {
-            const colKey = colKeyGen.value(col) || col.dataIndex;
+            const colKey = colKeyGen.value(col);
             return colKey ? colKeyStore[colKey] : refStore.get(col) || 0;
         };
     });