stk-table-vue 0.3.2 → 0.3.4

package/README.md

@@ -16,7 +16,7 @@ repo:
   - [x] 虚拟滚动默认通过js计算行高亮背景色，可通过 `useCss` 设置为css @keyframe实现 。
   - [x] 支持配置高亮参数（持续时间，颜色，频率（虚拟滚动））。(`v0.2.9`)
   - [x] `setHighlightDimRow`/`setHighlightCellRow`支持自定义高亮css类名。(`v0.2.9`)
-  - [x] 使用 `Web Animations API` 实现高亮。
+  - [x] 使用 `Web Animations API` 实现高亮。(`v0.3.4` 变更为默认值)
 * [x] 虚拟滚动。
   - [x] 纵向。
   - [x] 横向（必须设置列宽）。
@@ -223,7 +223,7 @@ export type StkProps = {
   highlightConfig?: {
     /** 高亮持续时间(s) */
     duration?: number;
-    /** 高亮帧率(虚拟滚动生效) */
+    /** 高亮帧率*/
     fps?: number;
   };
   /** 序号列配置 */
@@ -231,6 +231,14 @@ export type StkProps = {
     /** 序号列起始下标 用于适配分页 */
     startIndex?: number;
   };
+  /**
+   * 固定头，固定列实现方式。
+   *
+   * relative：固定列只能放在props.columns的两侧。如果列宽会变动则谨慎使用。
+   * 
+   * 低版本浏览器只能为'relative', 
+   */
+  cellFixedMode?: 'sticky' | 'relative';
 };
 ```
 
@@ -541,10 +549,20 @@ export type SortConfig<T extends Record<string, any>> = {
 ### 鼠标悬浮表头时，不展示title
 * 将 `StkTableColumn` 中的 `title` 字段置为 "" 空字符串。这样th中就没有title了。
 * 使用 `StkTableColumn` 中的 `customHeaderCell` 属性中，自定义表头渲染。
-### 高亮性能
-* 在虚拟滚动下高亮强制使用css @keyframes 实现动画。`setHighlightDimRow`/`setHighlightCellRow` 最后一个参数传入 `{method: 'css'}` 即可。（滚动后动画会中断） 
-* 指定 `{method:'animation'}` 在虚拟滚动下使用animation api实现动画。好处是动画流畅，且滚动后动画不中断。
+### 性能
+#### highlight
+* 在虚拟滚动下高亮强制使用 `css @keyframes` 实现动画。`setHighlightDimRow`/`setHighlightCellRow` 最后一个参数传入 `{method: 'css'}` 即可。（滚动后动画会中断） 
+* 指定 `{method:'animation'}` 在虚拟滚动下使用animation api实现动画。好处是动画流畅，且滚动后动画不中断。坏处是不支持帧率配置。
 * 配置 `props.highlightConfig.fps` 指定高亮帧率。降低帧率有利于性能。
+#### relative fixed
+* 配置 `props.cellFixedMode` 为 `relative` 时，将使用相对定位实现固定列与固定表头，相较于`sticky`的实现，渲染合成层更少。
+* 问题：若开启了纵向虚拟滚动，不开启横向虚拟滚动，且不设置某些列宽时。如果纵向滚动导致某些列宽变化，则会导致右侧固定列计算错误。
+#### tr 分层
+* 通过css选择器将 stk-table tbody tr 配置 `transform:translateZ(0)` 对每行 tr 进行分层。在 `customCell` 较多且复杂时，尝试开启此功能可能对性能有帮助。
 
 ## Other
 * `$*$` 兼容注释
+
+
+### Planed removal APi
+* `setHighlightDimRow` 中的 `method="js"`。观察animation Api 是否足够满足使用场景。若足够满足计划在后期移除，并且可以移除 `d3-interpolate` 依赖。

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;
@@ -177,13 +186,13 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /** 设置高亮渐暗单元格 */
     setHighlightDimCell: (rowKeyValue: string, dataIndex: string, option?: {
         className?: string | undefined;
-        method?: "css" | "animation" | undefined;
+        method?: "animation" | "css" | undefined;
         keyframe?: Keyframe[] | PropertyIndexedKeyframes | null | undefined;
         duration?: number | undefined;
     }) => void;
     /** 设置高亮渐暗行 */
-    setHighlightDimRow: (rowKeyValues: import("./types/index").UniqKey[], option?: {
-        method?: "css" | "animation" | "js" | undefined;
+    setHighlightDimRow: (rowKeyValues: UniqKey[], option?: {
+        method?: "animation" | "css" | "js" | undefined;
         useCss?: boolean | undefined;
         className?: string | undefined;
         keyframe?: Keyframe[] | PropertyIndexedKeyframes | null | 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/useHighlight.d.ts

@@ -9,9 +9,9 @@ type Params = {
  * 高亮单元格，行
  */
 export declare function useHighlight({ props, stkTableId, tableContainerRef }: Params): {
-    highlightSteps: number;
+    highlightSteps: number | null;
     setHighlightDimRow: (rowKeyValues: UniqKey[], option?: {
-        method?: 'css' | 'animation' | 'js';
+        method?: 'animation' | 'css' | 'js';
         /** @deprecated 请使用method */
         useCss?: boolean;
         className?: string;
@@ -20,7 +20,7 @@ export declare function useHighlight({ props, stkTableId, tableContainerRef }: P
     }) => void;
     setHighlightDimCell: (rowKeyValue: string, dataIndex: string, option?: {
         className?: string;
-        method?: 'css' | 'animation';
+        method?: 'animation' | 'css';
         keyframe?: Parameters<Animatable['animate']>['0'];
         duration?: number;
     }) => 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";
@@ -498,13 +510,13 @@ function useFixedStyle({
 }
 function useHighlight({ props, stkTableId, tableContainerRef }) {
   const config = props.highlightConfig;
-  const highlightDuration = config.duration ? config.duration * 1e3 : HIGHLIGHT_DURATION;
-  const highlightFrequency = config.fps ? 1e3 / config.fps : HIGHLIGHT_FREQ;
   const highlightColor = {
     light: HIGHLIGHT_COLOR.light,
     dark: HIGHLIGHT_COLOR.dark
   };
-  const highlightSteps = highlightDuration / highlightFrequency;
+  const highlightDuration = config.duration ? config.duration * 1e3 : HIGHLIGHT_DURATION;
+  const highlightFrequency = config.fps && config.fps > 0 ? 1e3 / config.fps : null;
+  const highlightSteps = highlightFrequency ? Math.round(highlightDuration / highlightFrequency) : null;
   const highlightFrom = computed(() => highlightColor[props.theme].from);
   const highlightTo = computed(() => highlightColor[props.theme].to);
   const highlightInter = computed(() => interpolateRgb(highlightFrom.value, highlightTo.value));
@@ -514,6 +526,13 @@ function useHighlight({ props, stkTableId, tableContainerRef }) {
   let calcHighlightDimLoopAnimation = false;
   const highlightDimRowsTimeout = /* @__PURE__ */ new Map();
   const highlightDimCellsTimeout = /* @__PURE__ */ new Map();
+  const defaultHighlightDimOption = (() => {
+    const keyframe = { backgroundColor: [highlightFrom.value, highlightTo.value] };
+    if (highlightSteps) {
+      keyframe.easing = `steps(${highlightSteps})`;
+    }
+    return { duration: highlightDuration, keyframe };
+  })();
   function calcRowHighlightLoop() {
     if (calcHighlightDimLoopAnimation)
       return;
@@ -565,20 +584,16 @@ function useHighlight({ props, stkTableId, tableContainerRef }) {
           calcHighlightDimLoopJs = false;
           highlightDimRowsJs.clear();
         }
-      }, highlightFrequency);
+      }, highlightFrequency || HIGHLIGHT_FREQ);
     };
     recursion();
   }
-  const defaultHighlightDimOption = {
-    keyframe: [{ backgroundColor: highlightFrom.value }, { backgroundColor: highlightTo.value }],
-    duration: highlightDuration
-  };
   function setHighlightDimCell(rowKeyValue, dataIndex, option = {}) {
     var _a;
     const cellEl = (_a = tableContainerRef.value) == null ? void 0 : _a.querySelector(`[data-row-key="${rowKeyValue}"]>[data-index="${dataIndex}"]`);
     const { className, method, duration, keyframe } = {
       className: HIGHLIGHT_CELL_CLASS,
-      method: "css",
+      method: "animation",
       ...defaultHighlightDimOption,
       ...option
     };
@@ -595,7 +610,7 @@ function useHighlight({ props, stkTableId, tableContainerRef }) {
       rowKeyValues = [rowKeyValues];
     const { className, method, useCss, keyframe, duration } = {
       className: HIGHLIGHT_ROW_CLASS,
-      method: props.virtual ? "js" : "css",
+      method: "animation",
       ...defaultHighlightDimOption,
       ...option
     };
@@ -837,6 +852,7 @@ function useVirtualScroll({
   });
   const virtualScrollX = ref({
     containerWidth: 0,
+    scrollWidth: 0,
     startIndex: 0,
     endIndex: 0,
     offsetLeft: 0,
@@ -897,12 +913,7 @@ function useVirtualScroll({
       return;
     const { offsetHeight, scrollTop } = tableContainerRef.value || {};
     const { rowHeight } = virtualScroll.value;
-    let containerHeight;
-    if (typeof height === "number") {
-      containerHeight = height;
-    } else {
-      containerHeight = offsetHeight || DEFAULT_TABLE_HEIGHT;
-    }
+    const containerHeight = height ?? (offsetHeight || DEFAULT_TABLE_HEIGHT);
     const { headless, headerRowHeight } = props;
     let pageSize = Math.ceil(containerHeight / rowHeight);
     if (!headless) {
@@ -913,10 +924,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) {
@@ -930,17 +940,12 @@ function useVirtualScroll({
     if (!virtual_on.value)
       return;
     let startIndex = Math.floor(sTop / rowHeight);
-    if (props.stripe) {
-      startIndex -= 1;
-    }
     if (startIndex < 0) {
       startIndex = 0;
     }
     if (props.stripe && startIndex !== 0) {
       const scrollRows = Math.abs(oldStartIndex - startIndex);
-      if (scrollRows < 2) {
-        return;
-      } else if (scrollRows % 2) {
+      if (scrollRows % 2) {
         startIndex -= 1;
       }
     }
@@ -969,18 +974,21 @@ 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)
       return;
+    const { scrollLeft } = virtualScrollX.value;
     let startIndex = 0;
     let offsetLeft = 0;
     let colWidthSum = 0;
     let leftColWidthSum = 0;
+    let leftFirstColRestWidth = 0;
     for (let colIndex = 0; colIndex < headerLength; colIndex++) {
-      startIndex++;
       const col = tableHeaderLast.value[colIndex];
       const colWidth = getCalculatedColWidth(col);
+      startIndex++;
       if (col.fixed === "left") {
         leftColWidthSum += colWidth;
         continue;
@@ -989,10 +997,11 @@ function useVirtualScroll({
       if (colWidthSum >= sLeft) {
         offsetLeft = colWidthSum - colWidth;
         startIndex--;
+        leftFirstColRestWidth = colWidthSum - sLeft;
         break;
       }
     }
-    colWidthSum = 0;
+    colWidthSum = leftFirstColRestWidth;
     const containerWidth = virtualScrollX.value.containerWidth - leftColWidthSum;
     let endIndex = headerLength;
     for (let colIndex = startIndex + 1; colIndex < headerLength; colIndex++) {
@@ -1068,14 +1077,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 +1126,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 +1146,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 +1216,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 +1251,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     );
     watch(() => props.fixedColShadow, dealFixedColShadow);
+    dealColumns();
     onMounted(() => {
       initVirtualScroll();
       updateFixedShadow();
@@ -1305,15 +1323,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
@@ -1550,16 +1565,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           "text-overflow": props.showOverflow,
           "header-text-overflow": props.showHeaderOverflow
         }]),
-        style: normalizeStyle([
-          _ctx.virtual && {
-            "--row-height": unref(virtualScroll).rowHeight + "px",
-            "--header-row-height": (props.headerRowHeight || props.rowHeight) + "px"
-          },
-          {
-            "--highlight-duration": props.highlightConfig.duration && props.highlightConfig.duration + "s",
-            "--highlight-timing-function": unref(highlightSteps) ? `steps(${unref(highlightSteps)})` : ""
-          }
-        ]),
+        style: normalizeStyle({
+          "--row-height": unref(virtualScroll).rowHeight + "px",
+          "--header-row-height": (props.headerRowHeight || props.rowHeight) + "px",
+          "--highlight-duration": props.highlightConfig.duration && props.highlightConfig.duration + "s",
+          "--highlight-timing-function": unref(highlightSteps) ? `steps(${unref(highlightSteps)})` : ""
+        }),
         onScroll: onTableScroll,
         onWheel: onTableWheel
       }, [
@@ -1592,17 +1603,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 +1671,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 +1695,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,7 +1,7 @@
 {
     "name": "stk-table-vue",
-    "version": "0.3.2",
-    "description": "Simple realtime virtual table for vue3&vue2.7",
+    "version": "0.3.4",
+    "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",
@@ -17,8 +17,13 @@
     "keywords": [
         "virtual table",
         "vue",
+        "vue2",
+        "vue3",
         "highlight",
-        "sticky"
+        "sticky",
+        "virtual",
+        "table",
+        "list"
     ],
     "files": [
         "lib",

package/src/StkTable/StkTable.vue

@@ -18,16 +18,12 @@
             'text-overflow': props.showOverflow,
             'header-text-overflow': props.showHeaderOverflow,
         }"
-        :style="[
-            virtual && {
-                '--row-height': virtualScroll.rowHeight + 'px',
-                '--header-row-height': (props.headerRowHeight || props.rowHeight) + 'px',
-            },
-            {
-                '--highlight-duration': props.highlightConfig.duration && props.highlightConfig.duration + 's',
-                '--highlight-timing-function': highlightSteps ? `steps(${highlightSteps})` : '',
-            },
-        ]"
+        :style="{
+            '--row-height': virtualScroll.rowHeight + 'px',
+            '--header-row-height': (props.headerRowHeight || props.rowHeight) + 'px',
+            '--highlight-duration': props.highlightConfig.duration && props.highlightConfig.duration + 's',
+            '--highlight-timing-function': highlightSteps ? `steps(${highlightSteps})` : '',
+        }"
         @scroll="onTableScroll"
         @wheel="onTableWheel"
     >
@@ -142,7 +138,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 +159,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 +208,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 +316,14 @@ const props = withDefaults(
         highlightConfig?: HighlightConfig;
         /** 序号列配置 */
         seqConfig?: SeqConfig;
+        /**
+         * 固定头，固定列实现方式。
+         *
+         * relative：固定列只能放在props.columns的两侧。如果列宽会变动则谨慎使用。
+         *
+         * 低版本浏览器只能为'relative',
+         */
+        cellFixedMode?: 'sticky' | 'relative';
     }>(),
     {
         width: '',
@@ -360,6 +364,7 @@ const props = withDefaults(
         hideHeaderTitle: false,
         highlightConfig: () => ({}),
         seqConfig: () => ({}),
+        cellFixedMode: 'sticky',
     },
 );
 
@@ -496,6 +501,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 +596,17 @@ watch(
     () => props.columns,
     () => {
         dealColumns();
-        initVirtualScrollX();
+        nextTick(initVirtualScrollX);
     },
 );
 watch(
     () => props.virtualX,
-    () => dealColumns(),
+    () => {
+        dealColumns();
+        nextTick(initVirtualScrollX);
+    },
 );
 
-dealColumns();
-
 watch(
     () => props.dataSource,
     val => {
@@ -618,6 +636,8 @@ watch(
 
 watch(() => props.fixedColShadow, dealFixedColShadow);
 
+dealColumns();
+
 onMounted(() => {
     initVirtualScroll();
     updateFixedShadow();
@@ -717,21 +737,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/const.ts

@@ -11,6 +11,7 @@ export const HIGHLIGHT_COLOR = {
 };
 /** 高亮持续时间 */
 export const HIGHLIGHT_DURATION = 2000;
+
 /** 高亮变更频率 */
 export const HIGHLIGHT_FREQ = 1000 / 30;
 

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/useHighlight.ts

@@ -26,18 +26,17 @@ type HighlightDimRowStore = {
 export function useHighlight({ props, stkTableId, tableContainerRef }: Params) {
     const config: HighlightConfig = props.highlightConfig;
 
-    /** 持续时间 */
-    const highlightDuration = config.duration ? config.duration * 1000 : HIGHLIGHT_DURATION;
-    /** 高亮频率（仅虚拟滚动生效） */
-    const highlightFrequency = config.fps ? 1000 / config.fps : HIGHLIGHT_FREQ;
     /** 高亮颜色 */
     const highlightColor = {
         light: HIGHLIGHT_COLOR.light,
         dark: HIGHLIGHT_COLOR.dark,
     };
-
-    /** css 高亮的次数，用于css animation steps() */
-    const highlightSteps = highlightDuration / highlightFrequency;
+    /** 持续时间 */
+    const highlightDuration = config.duration ? config.duration * 1000 : HIGHLIGHT_DURATION;
+    /** 高亮频率*/
+    const highlightFrequency = config.fps && config.fps > 0 ? 1000 / config.fps : null;
+    /** 高亮帧数（非帧率），用于 timing-function: steps() */
+    const highlightSteps = highlightFrequency ? Math.round(highlightDuration / highlightFrequency) : null;
     /** 高亮开始 */
     const highlightFrom = computed(() => highlightColor[props.theme as 'light' | 'dark'].from);
     /** 高亮结束 */
@@ -66,6 +65,15 @@ export function useHighlight({ props, stkTableId, tableContainerRef }: Params) {
     /** 高亮后渐暗的单元格定时器 */
     const highlightDimCellsTimeout = new Map();
 
+    /** 高亮函数的默认参数 */
+    const defaultHighlightDimOption = (() => {
+        const keyframe: PropertyIndexedKeyframes = { backgroundColor: [highlightFrom.value, highlightTo.value] };
+        if (highlightSteps) {
+            keyframe.easing = `steps(${highlightSteps})`;
+        }
+        return { duration: highlightDuration, keyframe };
+    })();
+
     /**
      * 计算高亮渐暗颜色的循环
      */
@@ -130,22 +138,16 @@ export function useHighlight({ props, stkTableId, tableContainerRef }: Params) {
                     calcHighlightDimLoopJs = false;
                     highlightDimRowsJs.clear(); // TODO: 是否需要 清除
                 }
-            }, highlightFrequency);
+            }, highlightFrequency || HIGHLIGHT_FREQ);
         };
         recursion();
     }
 
-    /** 高亮函数的默认参数 */
-    const defaultHighlightDimOption = {
-        keyframe: [{ backgroundColor: highlightFrom.value }, { backgroundColor: highlightTo.value }],
-        duration: highlightDuration,
-    };
-
     /**
-     *  高亮一个单元格
+     * 高亮一个单元格。暂不支持虚拟滚动高亮状态记忆。
      * @param rowKeyValue 一行的key
      * @param dataIndex 列key
-     * @param options.method css-使用css渲染，animation-使用animation api。默认css;
+     * @param options.method css-使用css渲染，animation-使用animation api。默认animation;
      * @param option.className 自定义css动画的class。
      * @param option.keyframe 同Keyframe https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Animations_API/Keyframe_Formats
      * @param option.duration 动画时长。method='css'状态下，用于移除class，如果传入了className则需要与自定义的动画时间一致。
@@ -153,13 +155,12 @@ export function useHighlight({ props, stkTableId, tableContainerRef }: Params) {
     function setHighlightDimCell(
         rowKeyValue: string,
         dataIndex: string,
-        option: { className?: string; method?: 'css' | 'animation'; keyframe?: Parameters<Animatable['animate']>['0']; duration?: number } = {},
+        option: { className?: string; method?: 'animation' | 'css'; keyframe?: Parameters<Animatable['animate']>['0']; duration?: number } = {},
     ) {
-        // TODO: 支持动态计算高亮颜色。不易实现。需记录每一个单元格的颜色情况。
         const cellEl = tableContainerRef.value?.querySelector<HTMLElement>(`[data-row-key="${rowKeyValue}"]>[data-index="${dataIndex}"]`);
         const { className, method, duration, keyframe } = {
             className: HIGHLIGHT_CELL_CLASS,
-            method: 'css',
+            method: 'animation',
             ...defaultHighlightDimOption,
             ...option,
         };
@@ -174,15 +175,15 @@ export function useHighlight({ props, stkTableId, tableContainerRef }: Params) {
     /**
      * 高亮一行
      * @param rowKeyValues 行唯一键的数组
-     * @param option.method css-使用css渲染，animation-使用animation api，js-使用js计算颜色
+     * @param option.method css-使用css渲染，animation-使用animation api，js-使用js计算颜色。默认animation
      * @param option.className 自定义css动画的class。
-     * @param option.keyframe 同Keyframe,无法控制帧率。 https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Animations_API/Keyframe_Formats
+     * @param option.keyframe 同Keyframe。 https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Animations_API/Keyframe_Formats
      * @param option.duration 动画时长。method='css'状态下，用于移除class，如果传入了className则需要与自定义的动画时间一致。。
      */
     function setHighlightDimRow(
         rowKeyValues: UniqKey[],
         option: {
-            method?: 'css' | 'animation' | 'js';
+            method?: 'animation' | 'css' | 'js';
             /** @deprecated 请使用method */
             useCss?: boolean;
             className?: string;
@@ -193,7 +194,7 @@ export function useHighlight({ props, stkTableId, tableContainerRef }: Params) {
         if (!Array.isArray(rowKeyValues)) rowKeyValues = [rowKeyValues];
         const { className, method, useCss, keyframe, duration } = {
             className: HIGHLIGHT_ROW_CLASS,
-            method: props.virtual ? 'js' : 'css',
+            method: 'animation',
             ...defaultHighlightDimOption,
             ...option,
         };
@@ -234,7 +235,7 @@ export function useHighlight({ props, stkTableId, tableContainerRef }: Params) {
 
     /**
      * 使用css @keyframes动画，实现高亮行动画
-     * 此方案作为兼容方式。v0.3.0 将使用Element.animate 接口实现动画。
+     * 此方案作为兼容方式。v0.3.4 将使用Element.animate 接口实现动画。
      */
     function highlightRowsInCssKeyframe(rowKeyValues: UniqKey[], className: string, duration: number) {
         /**是否需要重绘 */
@@ -267,7 +268,7 @@ export function useHighlight({ props, stkTableId, tableContainerRef }: Params) {
 
     /**
      * 使用css @keyframes动画，实现高亮单元格动画
-     * 此方案作为兼容方式。v0.3.0 将使用Element.animate 接口实现动画。
+     * 此方案作为兼容方式。v0.3.4 将使用Element.animate 接口实现动画。
      */
     function highlightCellsInCssKeyFrame(cellEl: HTMLElement, rowKeyValue: UniqKey, className: string, duration: number) {
         if (cellEl.classList.contains(className)) {

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,
@@ -143,13 +146,7 @@ export function useVirtualScroll<DT extends Record<string, any>>({
         if (!virtual_on.value) return;
         const { offsetHeight, scrollTop } = tableContainerRef.value || {};
         const { rowHeight } = virtualScroll.value;
-        let containerHeight: number;
-        // FIXME: 可能多次获取offsetHeight 会导致浏览器频繁重排
-        if (typeof height === 'number') {
-            containerHeight = height;
-        } else {
-            containerHeight = offsetHeight || DEFAULT_TABLE_HEIGHT;
-        }
+        const containerHeight = height ?? (offsetHeight || DEFAULT_TABLE_HEIGHT);
         const { headless, headerRowHeight } = props;
         let pageSize = Math.ceil(containerHeight / rowHeight);
         if (!headless) {
@@ -162,10 +159,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);
     }
     /**
@@ -189,25 +185,19 @@ export function useVirtualScroll<DT extends Record<string, any>>({
         if (!virtual_on.value) return;
 
         let startIndex = Math.floor(sTop / rowHeight);
-        if (props.stripe) {
-            startIndex -= 1; //预渲染1行
-        }
         if (startIndex < 0) {
             startIndex = 0;
         }
         if (props.stripe && startIndex !== 0) {
             const scrollRows = Math.abs(oldStartIndex - startIndex);
             // 斑马纹情况下，每滚动偶数行才加载。防止斑马纹错位。
-            if (scrollRows < 2) {
-                return;
-            } else if (scrollRows % 2) {
+            if (scrollRows % 2) {
                 startIndex -= 1; // 奇数-1变成偶数
             }
         }
         let endIndex = startIndex + pageSize;
         if (props.stripe) {
-            // 由于stripe上方预渲染-1行，这里也要预渲染1+1行
-            endIndex += 1;
+            endIndex += 1; // 斑马纹下多渲染一些
         }
         const offsetTop = startIndex * rowHeight; // startIndex之前的高度
         endIndex = Math.min(endIndex, dataSourceCopy.value.length); // 溢出index修正
@@ -237,18 +227,24 @@ 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;
+
+        const { scrollLeft } = virtualScrollX.value;
         let startIndex = 0;
         let offsetLeft = 0;
-
+        /** 列宽累加 */
         let colWidthSum = 0;
+        /** 固定左侧列宽 */
         let leftColWidthSum = 0;
+        /** 横向滚动时，第一列的剩余宽度 */
+        let leftFirstColRestWidth = 0;
+
         for (let colIndex = 0; colIndex < headerLength; colIndex++) {
-            startIndex++;
             const col = tableHeaderLast.value[colIndex];
             const colWidth = getCalculatedColWidth(col);
+            startIndex++;
             // fixed left 不进入计算列宽
             if (col.fixed === 'left') {
                 leftColWidthSum += colWidth;
@@ -259,11 +255,12 @@ export function useVirtualScroll<DT extends Record<string, any>>({
             if (colWidthSum >= sLeft) {
                 offsetLeft = colWidthSum - colWidth;
                 startIndex--;
+                leftFirstColRestWidth = colWidthSum - sLeft;
                 break;
             }
         }
         // -----
-        colWidthSum = 0;
+        colWidthSum = leftFirstColRestWidth;
         const containerWidth = virtualScrollX.value.containerWidth - leftColWidthSum;
         let endIndex = headerLength;
         for (let colIndex = startIndex + 1; colIndex < headerLength; colIndex++) {