stk-table-vue 0.3.2 → 0.3.3

package/README.md

@@ -231,6 +231,14 @@ export type StkProps = {
     /** 序号列起始下标 用于适配分页 */
     startIndex?: number;
   };
+  /**
+   * 固定头，固定列实现方式。
+   *
+   * relative：固定列只能放在props.columns的两侧。如果列宽会变动则谨慎使用。
+   * 
+   * 低版本浏览器只能为'relative', 
+   */
+  cellFixedMode?: 'sticky' | 'relative';
 };
 ```
 
@@ -545,6 +553,9 @@ export type SortConfig<T extends Record<string, any>> = {
 * 在虚拟滚动下高亮强制使用css @keyframes 实现动画。`setHighlightDimRow`/`setHighlightCellRow` 最后一个参数传入 `{method: 'css'}` 即可。（滚动后动画会中断） 
 * 指定 `{method:'animation'}` 在虚拟滚动下使用animation api实现动画。好处是动画流畅，且滚动后动画不中断。
 * 配置 `props.highlightConfig.fps` 指定高亮帧率。降低帧率有利于性能。
+### 性能
+* 配置 `props.cellFixedMode` 为 `relative` 时，将使用相对定位实现固定列与固定表头，相较于`sticky`的实现，渲染合成层更少，性能更好。
+* 问题：若开启了纵向虚拟滚动，不开启横向虚拟滚动，且不设置某些列宽时。如果纵向滚动导致某些列宽变化，则会导致右侧固定列计算错误。
 
 ## Other
 * `$*$` 兼容注释

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

@@ -1,4 +1,4 @@
-import { HighlightConfig, Order, SeqConfig, SortConfig, SortOption, SortState, StkTableColumn, UniqKeyProp } from './types/index';
+import { HighlightConfig, Order, SeqConfig, SortConfig, SortOption, SortState, StkTableColumn, UniqKey, UniqKeyProp } from './types/index';
 /** Generic stands for DataType */
 type DT = any;
 /**
@@ -126,6 +126,14 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     highlightConfig?: HighlightConfig | undefined;
     /** 序号列配置 */
     seqConfig?: SeqConfig | undefined;
+    /**
+     * 固定头，固定列实现方式。
+     *
+     * relative：固定列只能放在props.columns的两侧。如果列宽会变动则谨慎使用。
+     *
+     * 低版本浏览器只能为'relative',
+     */
+    cellFixedMode?: "sticky" | "relative" | undefined;
 }>, {
     width: string;
     fixedMode: boolean;
@@ -165,6 +173,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     hideHeaderTitle: boolean;
     highlightConfig: () => {};
     seqConfig: () => {};
+    cellFixedMode: string;
 }>, {
     /** 初始化横向纵向虚拟滚动 */
     initVirtualScroll: (height?: number | undefined) => void;
@@ -182,7 +191,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
         duration?: number | undefined;
     }) => void;
     /** 设置高亮渐暗行 */
-    setHighlightDimRow: (rowKeyValues: import("./types/index").UniqKey[], option?: {
+    setHighlightDimRow: (rowKeyValues: UniqKey[], option?: {
         method?: "css" | "animation" | "js" | undefined;
         useCss?: boolean | undefined;
         className?: string | undefined;
@@ -314,6 +323,14 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     highlightConfig?: HighlightConfig | undefined;
     /** 序号列配置 */
     seqConfig?: SeqConfig | undefined;
+    /**
+     * 固定头，固定列实现方式。
+     *
+     * relative：固定列只能放在props.columns的两侧。如果列宽会变动则谨慎使用。
+     *
+     * 低版本浏览器只能为'relative',
+     */
+    cellFixedMode?: "sticky" | "relative" | undefined;
 }>, {
     width: string;
     fixedMode: boolean;
@@ -353,6 +370,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     hideHeaderTitle: boolean;
     highlightConfig: () => {};
     seqConfig: () => {};
+    cellFixedMode: string;
 }>>> & {
     onScroll?: ((ev: Event, data: {
         startIndex: number;
@@ -415,6 +433,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     hideHeaderTitle: boolean | string[];
     highlightConfig: HighlightConfig;
     seqConfig: SeqConfig;
+    cellFixedMode: "sticky" | "relative";
 }, {}>, {
     tableHeader?(_: {
         col: StkTableColumn<any>;

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

@@ -1,12 +1,12 @@
-import { Ref, ShallowRef } from 'vue';
-import { StkTableColumn } from './types';
+import { ComputedRef, Ref, ShallowRef } from 'vue';
+import { StkTableColumn, UniqKey } from './types';
 type Params<DT extends Record<string, any>> = {
     props: any;
     emits: any;
     tableContainerRef: Ref<HTMLElement | undefined>;
     tableHeaderLast: ShallowRef<StkTableColumn<DT>[]>;
     colResizeIndicatorRef: Ref<HTMLElement | undefined>;
-    colKeyGen: (p: any) => string;
+    colKeyGen: ComputedRef<(p: any) => UniqKey>;
 };
 /** 列宽拖动 */
 export declare function useColResize<DT extends Record<string, any>>({ tableContainerRef, tableHeaderLast, colResizeIndicatorRef, props, emits, colKeyGen, }: Params<DT>): {

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

@@ -1,8 +1,8 @@
-import { Ref, ShallowRef } from 'vue';
-import { StkTableColumn } from './types';
+import { ComputedRef, Ref, ShallowRef } from 'vue';
+import { StkTableColumn, UniqKey } from './types';
 type Params<T extends Record<string, any>> = {
     props: any;
-    colKeyGen: (col: StkTableColumn<T>) => string;
+    colKeyGen: ComputedRef<(col: StkTableColumn<T>) => UniqKey>;
     tableHeaders: ShallowRef<StkTableColumn<T>[][]>;
     tableHeaderLast: ShallowRef<StkTableColumn<T>[]>;
     tableContainerRef: Ref<HTMLDivElement | undefined>;
@@ -13,7 +13,7 @@ type Params<T extends Record<string, any>> = {
  */
 export declare function useFixedCol<DT extends Record<string, any>>({ props, colKeyGen, tableHeaders, tableHeaderLast, tableContainerRef }: Params<DT>): {
     /** 固定列class */
-    fixedColClassMap: import("vue").ComputedRef<Map<any, any>>;
+    fixedColClassMap: ComputedRef<Map<any, any>>;
     /** 处理固定列阴影 */
     dealFixedColShadow: () => void;
     /** 滚动条变化时，更新需要展示阴影的列 */

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

@@ -26,8 +26,10 @@ export type VirtualScrollStore = {
 };
 /** 暂存横向虚拟滚动的数据 */
 export type VirtualScrollXStore = {
-    /** 容器宽度 */
+    /** 父容器宽度 */
     containerWidth: number;
+    /** 滚动容器的宽度 */
+    scrollWidth: number;
     /** 开始位置 */
     startIndex: number;
     /** 结束始位置 */
@@ -54,6 +56,7 @@ export declare function useVirtualScroll<DT extends Record<string, any>>({ props
     }>;
     virtualScrollX: Ref<{
         containerWidth: number;
+        scrollWidth: number;
         startIndex: number;
         endIndex: number;
         offsetLeft: number;

package/lib/stk-table-vue.js

@@ -1,4 +1,4 @@
-import { onMounted, onBeforeUnmount, watch, ref, shallowRef, computed, defineComponent, toRaw, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle, createCommentVNode, createElementVNode, Fragment, renderList, createBlock, resolveDynamicComponent, toDisplayString, renderSlot, createTextVNode } from "vue";
+import { onMounted, onBeforeUnmount, watch, ref, shallowRef, computed, defineComponent, nextTick, toRaw, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle, createCommentVNode, createElementVNode, Fragment, renderList, createBlock, resolveDynamicComponent, toDisplayString, renderSlot, createTextVNode } from "vue";
 import { interpolateRgb } from "d3-interpolate";
 const DEFAULT_COL_WIDTH = "100";
 const DEFAULT_TABLE_HEIGHT = 100;
@@ -260,7 +260,7 @@ function useColResize({
     const { clientX } = e;
     const { scrollLeft, scrollTop } = tableContainerRef.value;
     const { left } = tableContainerRef.value.getBoundingClientRect();
-    let colIndex = tableHeaderLast.value.findIndex((it) => colKeyGen(it) === colKeyGen(col));
+    let colIndex = tableHeaderLast.value.findIndex((it) => colKeyGen.value(it) === colKeyGen.value(col));
     if (isPrev) {
       colIndex -= 1;
       col = tableHeaderLast.value[colIndex];
@@ -307,7 +307,7 @@ function useColResize({
     let width = getCalculatedColWidth(lastCol) + moveX;
     if (width < props.colMinWidth)
       width = props.colMinWidth;
-    const curCol = tableHeaderLast.value.find((it) => colKeyGen(it) === colKeyGen(lastCol));
+    const curCol = tableHeaderLast.value.find((it) => colKeyGen.value(it) === colKeyGen.value(lastCol));
     if (!curCol)
       return;
     curCol.width = width + "px";
@@ -359,7 +359,7 @@ function useFixedCol({ props, colKeyGen, tableHeaders, tableHeaderLast, tableCon
           ["fixed-cell--" + col.fixed]: col.fixed,
           "fixed-cell--shadow": showShadow
         };
-        colMap.set(colKeyGen(col), classObj);
+        colMap.set(colKeyGen.value(col), classObj);
       });
     });
     return colMap;
@@ -453,33 +453,45 @@ function useFixedStyle({
     const { fixed } = col;
     if (tagType === TagType.TD && !fixed)
       return null;
-    const isFixedLeft = fixed === "left";
     const style = {};
     const { colKeyStore, refStore } = fixedColumnsPositionStore.value;
+    let isRelativeMode = true;
+    if (props.cellFixedMode === "sticky") {
+      isRelativeMode = false;
+    }
     if (IS_LEGACY_MODE) {
+      isRelativeMode = true;
+    }
+    const { scrollLeft, scrollWidth, offsetLeft, containerWidth } = virtualScrollX.value;
+    const scrollRight = scrollWidth - containerWidth - scrollLeft;
+    if (virtualScrollX.value.scrollLeft === 0 && fixed === "left" && tagType === TagType.TD) {
+      style.position = void 0;
+    } else if (scrollRight === 0 && fixed === "right" && tagType === TagType.TD) {
+      style.position = void 0;
+    } else if (isRelativeMode) {
       style.position = "relative";
     } else {
       style.position = "sticky";
     }
+    const isFixedLeft = fixed === "left";
     if (tagType === TagType.TH) {
-      if (IS_LEGACY_MODE) {
+      if (isRelativeMode) {
         style.top = virtualScroll.value.scrollTop + "px";
       } else {
         style.top = depth * props.rowHeight + "px";
       }
       style.zIndex = isFixedLeft ? "3" : "2";
     } else {
-      style.zIndex = isFixedLeft ? "2" : "1";
+      if (isFixedLeft) {
+        style.zIndex = "2";
+      }
     }
     if (fixed === "left" || fixed === "right") {
-      if (IS_LEGACY_MODE) {
+      if (isRelativeMode) {
         if (isFixedLeft) {
-          if (virtualX_on.value)
-            style.left = virtualScrollX.value.scrollLeft - virtualScrollX.value.offsetLeft + "px";
-          else
-            style.left = virtualScrollX.value.scrollLeft + "px";
+          style.left = scrollLeft - (virtualX_on.value ? offsetLeft : 0) + "px";
         } else {
-          style.right = `${virtualX_offsetRight.value}px`;
+          style.right = Math.max(scrollRight - (virtualX_on.value ? virtualX_offsetRight.value : 0), 0) + "px";
         }
       } else {
         const lr = (col.dataIndex ? colKeyStore[col.dataIndex] : refStore.get(col)) + "px";
@@ -837,6 +849,7 @@ function useVirtualScroll({
   });
   const virtualScrollX = ref({
     containerWidth: 0,
+    scrollWidth: 0,
     startIndex: 0,
     endIndex: 0,
     offsetLeft: 0,
@@ -913,10 +926,9 @@ function useVirtualScroll({
     updateVirtualScrollY(scrollTop);
   }
   function initVirtualScrollX() {
-    if (!props.virtualX)
-      return;
-    const { offsetWidth, scrollLeft } = tableContainerRef.value || {};
-    virtualScrollX.value.containerWidth = offsetWidth || DEFAULT_TABLE_WIDTH;
+    const { clientWidth, scrollLeft, scrollWidth } = tableContainerRef.value || {};
+    virtualScrollX.value.containerWidth = clientWidth || DEFAULT_TABLE_WIDTH;
+    virtualScrollX.value.scrollWidth = scrollWidth || DEFAULT_TABLE_WIDTH;
     updateVirtualScrollX(scrollLeft);
   }
   function initVirtualScroll(height) {
@@ -969,6 +981,8 @@ function useVirtualScroll({
   let vue2ScrollXTimeout = null;
   function updateVirtualScrollX(sLeft = 0) {
     var _a;
+    if (!props.virtualX)
+      return;
     const headerLength = (_a = tableHeaderLast.value) == null ? void 0 : _a.length;
     const { scrollLeft } = virtualScrollX.value;
     if (!headerLength)
@@ -1068,14 +1082,12 @@ const _hoisted_9 = ["onMousedown"];
 const _hoisted_10 = ["onMousedown"];
 const _hoisted_11 = {
   key: 0,
-  class: "virtual-x-left",
-  style: { "padding": "0" }
+  class: "virtual-x-left"
 };
 const _hoisted_12 = ["id", "data-row-key", "onClick", "onDblclick", "onContextmenu", "onMouseover"];
 const _hoisted_13 = {
   key: 0,
-  class: "virtual-x-left",
-  style: { "padding": "0" }
+  class: "virtual-x-left"
 };
 const _hoisted_14 = ["data-index", "onClick", "onMouseenter", "onMouseleave", "onMouseover"];
 const _hoisted_15 = ["title"];
@@ -1119,7 +1131,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }) },
     hideHeaderTitle: { type: [Boolean, Array], default: false },
     highlightConfig: { default: () => ({}) },
-    seqConfig: { default: () => ({}) }
+    seqConfig: { default: () => ({}) },
+    cellFixedMode: { default: "sticky" }
   },
   emits: ["sort-change", "row-click", "current-change", "row-dblclick", "header-row-menu", "row-menu", "cell-click", "cell-mouseenter", "cell-mouseleave", "cell-mouseover", "header-cell-click", "scroll", "scroll-x", "col-order-change", "th-drag-start", "th-drop", "update:columns"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -1138,6 +1151,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const tableHeaders = shallowRef([]);
     const tableHeaderLast = shallowRef([]);
     const dataSourceCopy = shallowRef([...props.dataSource]);
+    const colKeyGen = computed(() => {
+      if (typeof props.colKey === "function") {
+        return (col) => props.colKey(col);
+      } else {
+        return (col) => col[props.colKey];
+      }
+    });
     const getEmptyCellText = computed(() => {
       if (typeof props.emptyCellText === "string") {
         return () => props.emptyCellText;
@@ -1201,14 +1221,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       () => props.columns,
       () => {
         dealColumns();
-        initVirtualScrollX();
+        nextTick(initVirtualScrollX);
       }
     );
     watch(
       () => props.virtualX,
-      () => dealColumns()
+      () => {
+        dealColumns();
+        nextTick(initVirtualScrollX);
+      }
     );
-    dealColumns();
     watch(
       () => props.dataSource,
       (val) => {
@@ -1234,6 +1256,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     );
     watch(() => props.fixedColShadow, dealFixedColShadow);
+    dealColumns();
     onMounted(() => {
       initVirtualScroll();
       updateFixedShadow();
@@ -1305,15 +1328,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       return key;
     }
-    function colKeyGen(col) {
-      return typeof props.colKey === "function" ? props.colKey(col) : col[props.colKey];
-    }
     const cellStyleMap = computed(() => {
       const thMap = /* @__PURE__ */ new Map();
       const tdMap = /* @__PURE__ */ new Map();
       tableHeaders.value.forEach((cols, depth) => {
         cols.forEach((col) => {
-          const colKey = colKeyGen(col);
+          const colKey = colKeyGen.value(col);
           const width = props.virtualX ? getCalculatedColWidth(col) + "px" : transformWidthToStr(col.width);
           const style = {
             width
@@ -1592,17 +1612,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 (openBlock(true), createElementBlock(Fragment, null, renderList(unref(virtualX_on) && rowIndex === tableHeaders.value.length - 1 ? unref(virtualX_columnPart) : row, (col, colIndex) => {
                   return openBlock(), createElementBlock("th", {
                     key: col.dataIndex,
-                    "data-col-key": colKeyGen(col),
+                    "data-col-key": colKeyGen.value(col),
                     draggable: unref(isHeaderDraggable)(col) ? "true" : "false",
                     rowspan: unref(virtualX_on) ? 1 : col.rowSpan,
                     colspan: col.colSpan,
-                    style: normalizeStyle(cellStyleMap.value[unref(TagType).TH].get(colKeyGen(col))),
+                    style: normalizeStyle(cellStyleMap.value[unref(TagType).TH].get(colKeyGen.value(col))),
                     title: getHeaderTitle(col),
                     class: normalizeClass([
                       col.sorter ? "sortable" : "",
                       col.dataIndex === unref(sortCol) && unref(sortOrderIndex) !== 0 && "sorter-" + sortSwitchOrder[unref(sortOrderIndex)],
                       col.headerClassName,
-                      unref(fixedColClassMap).get(colKeyGen(col))
+                      unref(fixedColClassMap).get(colKeyGen.value(col))
                     ]),
                     onClick: (e) => {
                       onColumnSort(col);
@@ -1660,7 +1680,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               _ctx.fixedMode && _ctx.headless ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(unref(virtualX_columnPart), (col) => {
                 return openBlock(), createElementBlock("td", {
                   key: col.dataIndex,
-                  style: normalizeStyle(cellStyleMap.value[unref(TagType).TD].get(colKeyGen(col)))
+                  style: normalizeStyle(cellStyleMap.value[unref(TagType).TD].get(colKeyGen.value(col)))
                 }, null, 4);
               }), 128)) : createCommentVNode("", true)
             ], 4)) : createCommentVNode("", true),
@@ -1684,8 +1704,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   return openBlock(), createElementBlock("td", {
                     key: col.dataIndex,
                     "data-index": col.dataIndex,
-                    style: normalizeStyle(cellStyleMap.value[unref(TagType).TD].get(colKeyGen(col))),
-                    class: normalizeClass([col.className, unref(fixedColClassMap).get(colKeyGen(col)), col.type === "seq" ? "seq-column" : ""]),
+                    style: normalizeStyle(cellStyleMap.value[unref(TagType).TD].get(colKeyGen.value(col))),
+                    class: normalizeClass([col.className, unref(fixedColClassMap).get(colKeyGen.value(col)), col.type === "seq" ? "seq-column" : ""]),
                     onClick: (e) => onCellClick(e, row, col),
                     onMouseenter: (e) => onCellMouseEnter(e, row, col),
                     onMouseleave: (e) => onCellMouseLeave(e, row, col),

package/lib/style.css

@@ -88,15 +88,6 @@
 .stk-table.border thead tr:first-child th{
   background-image:var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
 }
-.stk-table.border.virtual-x .virtual-x-left{
-  background:none;
-  pointer-events:none;
-}
-.stk-table.border.virtual-x .virtual-x-right{
-  padding:0;
-  background:none;
-  pointer-events:none;
-}
 .stk-table.border-body-v tbody{
   --bg-border-bottom:linear-gradient(transparent, transparent);
 }
@@ -136,9 +127,6 @@
 .stk-table.virtual .padding-top-tr td{
   height:0;
 }
-.stk-table.virtual-x .virtual-x-left{
-  padding:0;
-}
 .stk-table th,
 .stk-table td{
   z-index:1;
@@ -197,6 +185,12 @@
 .stk-table .stk-table-main tbody tr.active{
   background-color:var(--tr-active-bgc);
 }
+.stk-table .virtual-x-left,
+.stk-table .virtual-x-right{
+  padding:0;
+  background:none;
+  pointer-events:none;
+}
 .stk-table .column-resize-indicator{
   width:0;
   height:100%;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "stk-table-vue",
-    "version": "0.3.2",
+    "version": "0.3.3",
     "description": "Simple realtime virtual table for vue3&vue2.7",
     "main": "./lib/stk-table-vue.js",
     "types": "./lib/src/StkTable/index.d.ts",

package/src/StkTable/StkTable.vue

@@ -142,7 +142,7 @@
             <tbody>
                 <tr v-if="virtual_on" :style="{ height: `${virtualScroll.offsetTop}px` }" class="padding-top-tr">
                     <!--这个td用于配合虚拟滚动的th对应，防止列错位-->
-                    <td v-if="virtualX_on && fixedMode && headless" class="virtual-x-left" style="padding: 0"></td>
+                    <td v-if="virtualX_on && fixedMode && headless" class="virtual-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
                     ></template>
@@ -163,7 +163,7 @@
                     @mouseover="e => onTrMouseOver(e, row)"
                 >
                     <!--这个td用于配合虚拟滚动的th对应，防止列错位-->
-                    <td v-if="virtualX_on" class="virtual-x-left" style="padding: 0"></td>
+                    <td v-if="virtualX_on" class="virtual-x-left"></td>
                     <td
                         v-for="(col, colIndex) in virtualX_columnPart"
                         :key="col.dataIndex"
@@ -212,9 +212,9 @@
  * [] 计算的高亮颜色，挂在数据源上对象上，若多个表格使用同一个数据源对象会有问题。需要深拷贝。(解决方案：获取组件uid)
  * [] highlight-row 颜色不能恢复到active的颜色
  */
-import { CSSProperties, computed, onMounted, ref, shallowRef, toRaw, watch } from 'vue';
+import { CSSProperties, computed, nextTick, onMounted, ref, shallowRef, toRaw, watch } from 'vue';
 import { DEFAULT_ROW_HEIGHT } from './const';
-import { HighlightConfig, Order, SeqConfig, SortConfig, SortOption, SortState, StkTableColumn, TagType, UniqKeyProp } from './types/index';
+import { HighlightConfig, Order, SeqConfig, SortConfig, SortOption, SortState, StkTableColumn, TagType, UniqKey, UniqKeyProp } from './types/index';
 import { useAutoResize } from './useAutoResize';
 import { useColResize } from './useColResize';
 import { useFixedCol } from './useFixedCol';
@@ -320,6 +320,14 @@ const props = withDefaults(
         highlightConfig?: HighlightConfig;
         /** 序号列配置 */
         seqConfig?: SeqConfig;
+        /**
+         * 固定头，固定列实现方式。
+         *
+         * relative：固定列只能放在props.columns的两侧。如果列宽会变动则谨慎使用。
+         *
+         * 低版本浏览器只能为'relative',
+         */
+        cellFixedMode?: 'sticky' | 'relative';
     }>(),
     {
         width: '',
@@ -360,6 +368,7 @@ const props = withDefaults(
         hideHeaderTitle: false,
         highlightConfig: () => ({}),
         seqConfig: () => ({}),
+        cellFixedMode: 'sticky',
     },
 );
 
@@ -496,6 +505,18 @@ const tableHeaderLast = shallowRef<StkTableColumn<DT>[]>([]);
 
 const dataSourceCopy = shallowRef<DT[]>([...props.dataSource]);
 
+/**
+ * 列唯一键
+ * @param col
+ */
+const colKeyGen = computed(() => {
+    if (typeof props.colKey === 'function') {
+        return (col: StkTableColumn<DT>) => (props.colKey as (col: StkTableColumn<DT>) => string)(col);
+    } else {
+        return (col: StkTableColumn<DT>) => (col as any)[props.colKey as string];
+    }
+});
+
 /**高亮帧间隔 
 const highlightStepDuration = Highlight_Color_Change_Freq / 1000 + 's';*/
 
@@ -579,16 +600,17 @@ watch(
     () => props.columns,
     () => {
         dealColumns();
-        initVirtualScrollX();
+        nextTick(initVirtualScrollX);
     },
 );
 watch(
     () => props.virtualX,
-    () => dealColumns(),
+    () => {
+        dealColumns();
+        nextTick(initVirtualScrollX);
+    },
 );
 
-dealColumns();
-
 watch(
     () => props.dataSource,
     val => {
@@ -618,6 +640,8 @@ watch(
 
 watch(() => props.fixedColShadow, dealFixedColShadow);
 
+dealColumns();
+
 onMounted(() => {
     initVirtualScroll();
     updateFixedShadow();
@@ -717,21 +741,13 @@ function rowKeyGen(row: DT) {
     return key;
 }
 
-/**
- * 列唯一键
- * @param col
- */
-function colKeyGen(col: StkTableColumn<DT>) {
-    return typeof props.colKey === 'function' ? props.colKey(col) : (col as any)[props.colKey];
-}
-
 /** 单元格样式 */
 const cellStyleMap = computed(() => {
     const thMap = new Map();
     const tdMap = new Map();
     tableHeaders.value.forEach((cols, depth) => {
         cols.forEach(col => {
-            const colKey = colKeyGen(col);
+            const colKey = colKeyGen.value(col);
             const width = props.virtualX ? getCalculatedColWidth(col) + 'px' : transformWidthToStr(col.width);
             const style: CSSProperties = {
                 width,

package/src/StkTable/style.less

@@ -116,28 +116,8 @@
             background-image: var(--bg-border-right), var(--bg-border-bottom);
         }
 
-        thead {
-            tr {
-                &:first-child th {
-                    background-image: var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
-                }
-
-            }
-        }
-
-
-        &.virtual-x {
-            .virtual-x-left {
-                background: none;
-                pointer-events: none;
-            }
-
-            .virtual-x-right {
-                padding: 0;
-                background: none;
-                pointer-events: none;
-            }
-
+        thead tr:first-child th {
+            background-image: var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
         }
     }
 
@@ -191,15 +171,13 @@
             max-height: var(--header-row-height);
         }
 
-        tbody {
-            td {
-                height: var(--row-height);
-                line-height: 1;
-
-                .table-cell-wrapper {
-                    max-height: var(--row-height);
-                    overflow: hidden;
-                }
+        tbody td {
+            height: var(--row-height);
+            line-height: 1;
+
+            .table-cell-wrapper {
+                max-height: var(--row-height);
+                overflow: hidden;
             }
         }
 
@@ -208,12 +186,6 @@
         }
     }
 
-    &.virtual-x {
-        .virtual-x-left {
-            padding: 0;
-        }
-    }
-
     th,
     td {
         z-index: 1;
@@ -294,6 +266,13 @@
         }
     }
 
+    .virtual-x-left,
+    .virtual-x-right {
+        padding: 0;
+        background: none;
+        pointer-events: none;
+    }
+
 
     /** 列宽调整指示器 */
     .column-resize-indicator {

package/src/StkTable/useColResize.ts

@@ -1,5 +1,5 @@
-import { Ref, ShallowRef, onBeforeUnmount, onMounted, ref } from 'vue';
-import { StkTableColumn } from './types';
+import { ComputedRef, Ref, ShallowRef, onBeforeUnmount, onMounted, ref } from 'vue';
+import { StkTableColumn, UniqKey } from './types';
 import { getCalculatedColWidth } from './utils';
 
 type ColResizeState<DT extends Record<string, any>> = {
@@ -21,7 +21,7 @@ type Params<DT extends Record<string, any>> = {
     tableContainerRef: Ref<HTMLElement | undefined>;
     tableHeaderLast: ShallowRef<StkTableColumn<DT>[]>;
     colResizeIndicatorRef: Ref<HTMLElement | undefined>;
-    colKeyGen: (p: any) => string;
+    colKeyGen: ComputedRef<(p: any) => UniqKey>;
 };
 
 /** 列宽拖动 */
@@ -78,7 +78,7 @@ export function useColResize<DT extends Record<string, any>>({
         const { scrollLeft, scrollTop } = tableContainerRef.value;
         const { left } = tableContainerRef.value.getBoundingClientRect();
         /** 列下标 */
-        let colIndex = tableHeaderLast.value.findIndex(it => colKeyGen(it) === colKeyGen(col));
+        let colIndex = tableHeaderLast.value.findIndex(it => colKeyGen.value(it) === colKeyGen.value(col));
         if (isPrev) {
             // 上一列
             colIndex -= 1;
@@ -139,7 +139,7 @@ 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(it) === colKeyGen(lastCol));
+        const curCol = tableHeaderLast.value.find(it => colKeyGen.value(it) === colKeyGen.value(lastCol));
         if (!curCol) return;
         curCol.width = width + 'px';
 

package/src/StkTable/useFixedCol.ts

@@ -1,9 +1,9 @@
-import { computed, ref, Ref, ShallowRef, shallowRef } from 'vue';
-import { StkTableColumn } from './types';
+import { computed, ComputedRef, ref, Ref, ShallowRef, shallowRef } from 'vue';
+import { StkTableColumn, UniqKey } from './types';
 
 type Params<T extends Record<string, any>> = {
     props: any;
-    colKeyGen: (col: StkTableColumn<T>) => string;
+    colKeyGen: ComputedRef<(col: StkTableColumn<T>) => UniqKey>;
     tableHeaders: ShallowRef<StkTableColumn<T>[][]>;
     tableHeaderLast: ShallowRef<StkTableColumn<T>[]>;
     tableContainerRef: Ref<HTMLDivElement | undefined>;
@@ -42,7 +42,7 @@ export function useFixedCol<DT extends Record<string, any>>({ props, colKeyGen,
                     ['fixed-cell--' + col.fixed]: col.fixed,
                     'fixed-cell--shadow': showShadow,
                 };
-                colMap.set(colKeyGen(col), classObj);
+                colMap.set(colKeyGen.value(col), classObj);
             });
         });
         return colMap;

package/src/StkTable/useFixedStyle.ts

@@ -75,19 +75,39 @@ export function useFixedStyle<DT extends Record<string, any>>({
         const { fixed } = col;
         if (tagType === TagType.TD && !fixed) return null;
 
-        const isFixedLeft = fixed === 'left';
         const style: CSSProperties = {};
         const { colKeyStore, refStore } = fixedColumnsPositionStore.value;
 
+        /** 是否是relative模式完成固定列 */
+        let isRelativeMode = true;
+        if (props.cellFixedMode === 'sticky') {
+            isRelativeMode = false;
+        }
+
         if (IS_LEGACY_MODE) {
+            // 低版本浏览器只能为固定列设置position: sticky
+            isRelativeMode = true;
+        }
+
+        const { scrollLeft, scrollWidth, offsetLeft, containerWidth } = virtualScrollX.value;
+        const scrollRight = scrollWidth - containerWidth - scrollLeft;
+
+        if (virtualScrollX.value.scrollLeft === 0 && fixed === 'left' && tagType === TagType.TD) {
+            // 滚动条在最左侧时，左侧固定列不需要，防止分层
+            style.position = void 0;
+        } else if (scrollRight === 0 && fixed === 'right' && tagType === TagType.TD) {
+            // 滚动条在最右侧时，右侧固定列不需要，防止分层
+            style.position = void 0;
+        } else if (isRelativeMode) {
             style.position = 'relative';
         } else {
             style.position = 'sticky';
         }
 
+        const isFixedLeft = fixed === 'left';
         if (tagType === TagType.TH) {
             // TH
-            if (IS_LEGACY_MODE) {
+            if (isRelativeMode) {
                 style.top = virtualScroll.value.scrollTop + 'px';
             } else {
                 style.top = depth * props.rowHeight + 'px';
@@ -95,17 +115,18 @@ export function useFixedStyle<DT extends Record<string, any>>({
             style.zIndex = isFixedLeft ? '3' : '2'; // 保证固定列高于其他单元格
         } else {
             // TD
-            style.zIndex = isFixedLeft ? '2' : '1';
+            if (isFixedLeft) {
+                style.zIndex = '2';
+            }
         }
 
         if (fixed === 'left' || fixed === 'right') {
-            if (IS_LEGACY_MODE) {
+            if (isRelativeMode) {
                 if (isFixedLeft) {
-                    if (virtualX_on.value) style.left = virtualScrollX.value.scrollLeft - virtualScrollX.value.offsetLeft + 'px';
-                    else style.left = virtualScrollX.value.scrollLeft + 'px';
+                    style.left = scrollLeft - (virtualX_on.value ? offsetLeft : 0) + 'px';
                 } else {
-                    // TODO:计算右侧距离
-                    style.right = `${virtualX_offsetRight.value}px`;
+                    // fixed right
+                    style.right = Math.max(scrollRight - (virtualX_on.value ? virtualX_offsetRight.value : 0), 0) + 'px';
                 }
             } else {
                 const lr = (col.dataIndex ? colKeyStore[col.dataIndex] : refStore.get(col)) + 'px';

package/src/StkTable/useVirtualScroll.ts

@@ -30,8 +30,10 @@ export type VirtualScrollStore = {
 };
 /** 暂存横向虚拟滚动的数据 */
 export type VirtualScrollXStore = {
-    /** 容器宽度 */
+    /** 父容器宽度 */
     containerWidth: number;
+    /** 滚动容器的宽度 */
+    scrollWidth: number;
     /** 开始位置 */
     startIndex: number;
     /** 结束始位置 */
@@ -69,6 +71,7 @@ export function useVirtualScroll<DT extends Record<string, any>>({
 
     const virtualScrollX = ref<VirtualScrollXStore>({
         containerWidth: 0,
+        scrollWidth: 0,
         startIndex: 0,
         endIndex: 0,
         offsetLeft: 0,
@@ -162,10 +165,9 @@ export function useVirtualScroll<DT extends Record<string, any>>({
     }
 
     function initVirtualScrollX() {
-        if (!props.virtualX) return;
-        const { offsetWidth, scrollLeft } = tableContainerRef.value || {};
-        // scrollTo(null, 0);
-        virtualScrollX.value.containerWidth = offsetWidth || DEFAULT_TABLE_WIDTH;
+        const { clientWidth, scrollLeft, scrollWidth } = tableContainerRef.value || {};
+        virtualScrollX.value.containerWidth = clientWidth || DEFAULT_TABLE_WIDTH;
+        virtualScrollX.value.scrollWidth = scrollWidth || DEFAULT_TABLE_WIDTH;
         updateVirtualScrollX(scrollLeft);
     }
     /**
@@ -237,6 +239,7 @@ export function useVirtualScroll<DT extends Record<string, any>>({
 
     /** 通过横向滚动条位置，计算横向虚拟滚动的参数 */
     function updateVirtualScrollX(sLeft = 0) {
+        if (!props.virtualX) return;
         const headerLength = tableHeaderLast.value?.length;
         const { scrollLeft } = virtualScrollX.value;
         if (!headerLength) return;