stk-table-vue 0.2.9 → 0.3.0

package/src/StkTable/useFixedStyle.ts

@@ -1,12 +1,12 @@
-import { CSSProperties, Ref, computed } from 'vue';
+import { CSSProperties, Ref, ShallowRef, computed } from 'vue';
 import { IS_LEGACY_MODE } from './const';
 import { StkTableColumn, TagType } from './types';
 import { VirtualScrollStore, VirtualScrollXStore } from './useVirtualScroll';
-import { getColWidth } from './utils';
+import { getCalculatedColWidth } from './utils';
 
 type Options<T extends Record<string, any>> = {
     props: any;
-    tableHeaders: Ref<StkTableColumn<T>[][]>;
+    tableHeaders: ShallowRef<StkTableColumn<T>[][]>;
     virtualScroll: Ref<VirtualScrollStore>;
     virtualScrollX: Ref<VirtualScrollXStore>;
     virtualX_on: Ref<boolean>;
@@ -42,7 +42,7 @@ export function useFixedStyle<DT extends Record<string, any>>({
                     } else {
                         refStore.set(item, left);
                     }
-                    left += getColWidth(item);
+                    left += getCalculatedColWidth(item);
                 }
                 if (!rightStartIndex && item.fixed === 'right') {
                     rightStartIndex = i;
@@ -57,7 +57,7 @@ export function useFixedStyle<DT extends Record<string, any>>({
                     } else {
                         refStore.set(item, right);
                     }
-                    right += getColWidth(item);
+                    right += getCalculatedColWidth(item);
                 }
             }
         });
@@ -71,8 +71,10 @@ export function useFixedStyle<DT extends Record<string, any>>({
      * @param col
      * @param depth 深度。tagType = 1时使用
      */
-    function getFixedStyle(tagType: TagType, col: StkTableColumn<DT>, depth = 0): CSSProperties {
+    function getFixedStyle(tagType: TagType, col: StkTableColumn<DT>, depth = 0): CSSProperties | null {
         const { fixed } = col;
+        if (tagType === TagType.TD && !fixed) return null;
+
         const isFixedLeft = fixed === 'left';
         const style: CSSProperties = {};
         const { colKeyStore, refStore } = fixedColumnsPositionStore.value;
@@ -82,6 +84,7 @@ export function useFixedStyle<DT extends Record<string, any>>({
         } else {
             style.position = 'sticky';
         }
+
         if (tagType === TagType.TH) {
             // TH
             if (IS_LEGACY_MODE) {
@@ -89,10 +92,10 @@ export function useFixedStyle<DT extends Record<string, any>>({
             } else {
                 style.top = depth * props.rowHeight + 'px';
             }
-            style.zIndex = isFixedLeft ? '5' : '4'; // 保证固定列高于其他单元格
+            style.zIndex = isFixedLeft ? '3' : '2'; // 保证固定列高于其他单元格
         } else {
             // TD
-            style.zIndex = isFixedLeft ? '3' : '2';
+            style.zIndex = isFixedLeft ? '2' : '1';
         }
 
         if (fixed === 'left' || fixed === 'right') {

package/src/StkTable/useHighlight.ts

@@ -1,183 +1,328 @@
 import { interpolateRgb } from 'd3-interpolate';
-import { Ref, computed, ref } from 'vue';
-import { HIGHLIGHT_CELL_CLASS, HIGHLIGHT_COLOR, HIGHLIGHT_DURATION, HIGHLIGHT_FREQ, HIGHLIGHT_ROW_CLASS } from './const';
+import { Ref, computed } from 'vue';
+import { HIGHLIGHT_CELL_CLASS, HIGHLIGHT_COLOR, HIGHLIGHT_DURATION, HIGHLIGHT_FREQ, HIGHLIGHT_ROW_CLASS, IS_LEGACY_MODE } from './const';
 import { HighlightConfig, UniqKey } from './types';
 
 type Params = {
     props: any;
-    tableContainer: Ref<HTMLElement | undefined>;
+    stkTableId: string;
+    tableContainerRef: Ref<HTMLDivElement | undefined>;
 };
-
-/** 高亮行保存的东西 */
-type HighlightRowStore = {
-    bgc: string;
-    bgc_progress_ms: number;
-    bgc_progress: number;
+/** 存放高亮行信息 */
+type HighlightDimRowStore = {
+    /** 动画开始时间戳 */
+    readonly ts: number;
+    /** 行是否可见 */
+    visible: boolean;
+    /** 动画关键帧 */
+    keyframe: Parameters<Animatable['animate']>['0'];
+    /** 动画初始持续时间 */
+    readonly duration: number;
 };
 
 /**
  * 高亮单元格，行
- * row中新增_bgc_progress_ms 属性控制高亮状态,_bgc控制颜色
  */
-export function useHighlight({ props, tableContainer }: Params) {
+export function useHighlight({ props, stkTableId, tableContainerRef }: Params) {
     const config: HighlightConfig = props.highlightConfig;
-    /**
-     * 高亮行记录 key-rowKey, value-obj
-     */
-    const highlightRowStore = ref<Record<UniqKey, HighlightRowStore>>({});
+
     /** 持续时间 */
-    const duration = config.duration ? config.duration * 1000 : HIGHLIGHT_DURATION;
-    /** 频率 */
-    const frequency = config.fps ? 1000 / config.fps : HIGHLIGHT_FREQ;
+    const highlightDuration = config.duration ? config.duration * 1000 : HIGHLIGHT_DURATION;
+    /** 高亮频率（仅虚拟滚动生效） */
+    const highlightFrequency = config.fps ? 1000 / config.fps : HIGHLIGHT_FREQ;
+    /** 高亮颜色 */
     const highlightColor = {
-        light: Object.assign(HIGHLIGHT_COLOR.light, config.color?.light),
-        dark: Object.assign(HIGHLIGHT_COLOR.dark, config.color?.dark),
+        light: HIGHLIGHT_COLOR.light,
+        dark: HIGHLIGHT_COLOR.dark,
     };
+
+    /** css 高亮的次数，用于css animation steps() */
+    const highlightSteps = highlightDuration / highlightFrequency;
     /** 高亮开始 */
     const highlightFrom = computed(() => highlightColor[props.theme as 'light' | 'dark'].from);
     /** 高亮结束 */
     const highlightTo = computed(() => highlightColor[props.theme as 'light' | 'dark'].to);
     const highlightInter = computed(() => interpolateRgb(highlightFrom.value, highlightTo.value));
 
-    /** 存放高亮行的key*/
-    const highlightDimRowKeys = new Set<UniqKey>();
+    /**
+     * 存放高亮行的状态-使用js计算颜色
+     * @key 行唯一键
+     * @value 记录高亮开始时间
+     */
+    const highlightDimRowsJs = new Map<UniqKey, number>();
+    /** 是否正在计算高亮行的循环-使用js计算颜色 */
+    let calcHighlightDimLoopJs = false;
+    /**
+     * 存放高亮行的状态-使用animation api实现
+     * @key 行唯一键
+     * @value 记录高亮配置
+     */
+    const highlightDimRowsAnimation = new Map<UniqKey, HighlightDimRowStore>();
+    /** 是否正在计算高亮行的循环-使用animation api实现 */
+    let calcHighlightDimLoopAnimation = false;
+
     /** 高亮后渐暗的行定时器 */
     const highlightDimRowsTimeout = new Map();
     /** 高亮后渐暗的单元格定时器 */
     const highlightDimCellsTimeout = new Map();
-    /** 是否正在计算高亮行的循环*/
-    let calcHighlightDimLoop = false;
 
     /**
      * 计算高亮渐暗颜色的循环
-     * FIXME: 相同数据源，相同引用的情况，将颜色值挂在数据源对象上，在多个表格使用相同数据源时会出问题。
      */
-    function calcHighlightLoop() {
-        if (calcHighlightDimLoop) return;
-        calcHighlightDimLoop = true;
+    function calcRowHighlightLoop() {
+        if (calcHighlightDimLoopAnimation) return;
+        calcHighlightDimLoopAnimation = true;
+        const recursion = () => {
+            window.requestAnimationFrame(
+                () => {
+                    const nowTs = Date.now();
+                    highlightDimRowsAnimation.forEach((store, rowKeyValue) => {
+                        const { ts, duration } = store;
+                        const timeOffset = nowTs - ts;
+                        if (nowTs - ts < duration) {
+                            updateRowBgc(rowKeyValue, store, timeOffset);
+                        } else {
+                            highlightDimRowsAnimation.delete(rowKeyValue);
+                        }
+                    });
+
+                    if (highlightDimRowsAnimation.size > 0) {
+                        // 还有高亮的行,则下一次循环
+                        recursion();
+                    } else {
+                        // 没有则停止循环
+                        calcHighlightDimLoopAnimation = false;
+                        highlightDimRowsAnimation.clear();
+                    }
+                } /* , highlightFrequency */,
+            );
+        };
+        recursion();
+    }
+
+    /**
+     * js计算高亮渐暗颜色的循环
+     */
+    function calcRowHighlightLoopJs() {
+        if (calcHighlightDimLoopJs) return;
+        calcHighlightDimLoopJs = true;
         // js计算gradient
-        // raf 太频繁。TODO: 考虑setTimeout分段设置颜色，过渡靠css transition 补间
         const recursion = () => {
             window.setTimeout(() => {
                 const nowTs = Date.now();
-
-                highlightDimRowKeys.forEach(rowKeyValue => {
-                    //   const rowKeyValue = rowKeyGen(row);
-                    //   const rowEl = tableContainer.value?.querySelector<HTMLElement>(`[data-row-key="${rowKeyValue}"]`);
-                    //   if (rowEl && row._bgc_progress === 0) {
-                    //     // 开始css transition 补间
-                    //     rowEl.classList.remove('highlight-row-transition');
-                    //     void rowEl.offsetHeight; // reflow
-                    //     rowEl.classList.add('highlight-row-transition');
-                    //   }
-                    const highlightItem = highlightRowStore.value[rowKeyValue];
+                highlightDimRowsJs.forEach((highlightStart, rowKeyValue) => {
                     /** 经过的时间 ÷ 高亮持续时间 计算出 颜色过渡进度 (0-1) */
-                    const progress = (nowTs - highlightItem.bgc_progress_ms) / duration;
+                    const progress = (nowTs - highlightStart) / highlightDuration;
+                    let bgc = '';
                     if (0 < progress && progress < 1) {
-                        highlightItem.bgc = highlightInter.value(progress);
+                        bgc = highlightInter.value(progress);
                     } else {
-                        highlightItem.bgc = ''; // 清空颜色
-                        highlightDimRowKeys.delete(rowKeyValue);
+                        highlightDimRowsJs.delete(rowKeyValue);
                     }
+                    updateRowBgcJs(rowKeyValue, bgc);
                 });
 
-                // $*$ 兼容vue2响应
-                highlightRowStore.value = { ...highlightRowStore.value };
-
-                if (highlightDimRowKeys.size > 0) {
+                if (highlightDimRowsJs.size > 0) {
                     // 还有高亮的行,则下一次循环
                     recursion();
                 } else {
                     // 没有则停止循环
-                    calcHighlightDimLoop = false;
+                    calcHighlightDimLoopJs = false;
+                    highlightDimRowsJs.clear();
                 }
-            }, frequency);
+            }, highlightFrequency);
         };
         recursion();
     }
 
+    /** 高亮函数的默认参数 */
+    const defaultHighlightDimOption = {
+        keyframe: [{ backgroundColor: highlightFrom.value }, { backgroundColor: highlightTo.value }],
+        duration: highlightDuration,
+    };
+
     /**
      *  高亮一个单元格
      * @param rowKeyValue 一行的key
      * @param dataIndex 列key
-     * @param option.className 高亮类名
+     * @param options.method css-使用css渲染，animation-使用animation api。默认css;
+     * @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则需要与自定义的动画时间一致。
      */
-    function setHighlightDimCell(rowKeyValue: string, dataIndex: string, option: { className?: string } = {}) {
+    function setHighlightDimCell(
+        rowKeyValue: string,
+        dataIndex: string,
+        option: { className?: string; method?: 'css' | 'animation'; keyframe?: Parameters<Animatable['animate']>['0']; duration?: number } = {},
+    ) {
         // TODO: 支持动态计算高亮颜色。不易实现。需记录每一个单元格的颜色情况。
-        const cellEl = tableContainer.value?.querySelector<HTMLElement>(`[data-row-key="${rowKeyValue}"]>[data-index="${dataIndex}"]`);
-        const opt = { className: HIGHLIGHT_CELL_CLASS, ...option };
+        const cellEl = tableContainerRef.value?.querySelector<HTMLElement>(`[data-row-key="${rowKeyValue}"]>[data-index="${dataIndex}"]`);
+        const { className, method, duration, keyframe } = {
+            className: HIGHLIGHT_CELL_CLASS,
+            method: 'css',
+            ...defaultHighlightDimOption,
+            ...option,
+        };
         if (!cellEl) return;
-        if (cellEl.classList.contains(opt.className)) {
-            cellEl.classList.remove(opt.className);
-            void cellEl.offsetHeight; // 通知浏览器重绘
+        if (method === 'animation') {
+            cellEl.animate(keyframe, duration);
+        } else {
+            highlightCellsInCssKeyFrame(cellEl, rowKeyValue, className, duration);
         }
-        cellEl.classList.add(opt.className);
-        window.clearTimeout(highlightDimCellsTimeout.get(rowKeyValue));
-        highlightDimCellsTimeout.set(
-            rowKeyValue,
-            window.setTimeout(() => {
-                cellEl.classList.remove(opt.className);
-                highlightDimCellsTimeout.delete(rowKeyValue);
-            }, duration),
-        );
     }
 
     /**
      * 高亮一行
      * @param rowKeyValues 行唯一键的数组
-     * @param option.useCss 虚拟滚动时，高亮由js控制。如果仍想使用css 关键帧控制，则配置此项
+     * @param option.method css-使用css渲染，animation-使用animation api，js-使用js计算颜色
+     * @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则需要与自定义的动画时间一致。。
      */
-    function setHighlightDimRow(rowKeyValues: UniqKey[], option: { useCss?: boolean; className?: string } = {}) {
+    function setHighlightDimRow(
+        rowKeyValues: UniqKey[],
+        option: {
+            method?: 'css' | 'animation' | 'js';
+            /** @deprecated 请使用method */
+            useCss?: boolean;
+            className?: string;
+            keyframe?: Parameters<Animatable['animate']>['0'];
+            duration?: number;
+        } = {},
+    ) {
         if (!Array.isArray(rowKeyValues)) rowKeyValues = [rowKeyValues];
-        const { className, useCss } = { className: HIGHLIGHT_ROW_CLASS, useCss: false, ...option };
-        if (props.virtual && !useCss) {
-            // --------虚拟滚动用js计算颜色渐变的高亮方案
-            const nowTs = Date.now(); // 重置渐变进度
+        const { className, method, useCss, keyframe, duration } = {
+            className: HIGHLIGHT_ROW_CLASS,
+            method: props.virtual ? 'js' : 'css',
+            ...defaultHighlightDimOption,
+            ...option,
+        };
+
+        const nowTs = Date.now();
+        if (method === 'css' || useCss) {
+            // -------- use css keyframe
+            highlightRowsInCssKeyframe(rowKeyValues, className, duration);
+        } else if (method === 'animation') {
+            if (props.virtual) {
+                // -------- 用animation 接口实现动画
+                for (let i = 0; i < rowKeyValues.length; i++) {
+                    const rowKeyValue = rowKeyValues[i];
+                    const store: HighlightDimRowStore = { ts: nowTs, visible: false, keyframe, duration };
+                    highlightDimRowsAnimation.set(rowKeyValue, store);
+                    updateRowBgc(rowKeyValue, store, 0);
+                }
+                calcRowHighlightLoop();
+            } else {
+                // -------- use Element.animate
+                for (let i = 0; i < rowKeyValues.length; i++) {
+                    const rowEl = document.getElementById(stkTableId + '-' + String(rowKeyValues[i])) as HTMLTableRowElement | null;
+                    if (!rowEl) continue;
+                    rowEl.animate(keyframe, duration);
+                }
+            }
+        } else if (method === 'js') {
+            // -------- 用js计算颜色渐变的高亮方案
             for (let i = 0; i < rowKeyValues.length; i++) {
                 const rowKeyValue = rowKeyValues[i];
-                highlightRowStore.value[rowKeyValue] = {
-                    bgc: highlightFrom.value,
-                    bgc_progress: 0,
-                    bgc_progress_ms: nowTs,
-                };
-                highlightDimRowKeys.add(rowKeyValue);
+                highlightDimRowsJs.set(rowKeyValue, nowTs);
+                updateRowBgcJs(rowKeyValue, highlightFrom.value);
             }
-            calcHighlightLoop();
-        } else {
-            // -------- 普通滚动用css @keyframes动画，实现高亮
-            /**是否需要重绘 */
-            let needRepaint = false;
+            calcRowHighlightLoopJs();
+        }
+    }
 
-            const rowElTemp: HTMLTableRowElement[] = [];
-            for (let i = 0; i < rowKeyValues.length; i++) {
-                const rowKeyValue = rowKeyValues[i];
-                const rowEl = tableContainer.value?.querySelector<HTMLTableRowElement>(`[data-row-key="${rowKeyValue}"]`);
-                if (!rowEl) continue;
-                if (rowEl.classList.contains(className)) {
-                    rowEl.classList.remove(className);
-                    needRepaint = true;
-                }
-                rowElTemp.push(rowEl);
-                // 动画结束移除class
-                window.clearTimeout(highlightDimRowsTimeout.get(rowKeyValue));
-                highlightDimRowsTimeout.set(
-                    rowKeyValue,
-                    window.setTimeout(() => {
-                        rowEl.classList.remove(className);
-                        highlightDimRowsTimeout.delete(rowKeyValue); // 回收内存
-                    }, duration),
-                );
+    /**
+     * 使用css @keyframes动画，实现高亮行动画
+     * 此方案作为兼容方式。v0.3.0 将使用Element.animate 接口实现动画。
+     */
+    function highlightRowsInCssKeyframe(rowKeyValues: UniqKey[], className: string, duration: number) {
+        /**是否需要重绘 */
+        let needRepaint = false;
+        const rowElTemp: HTMLTableRowElement[] = [];
+        for (let i = 0; i < rowKeyValues.length; i++) {
+            const rowKeyValue = rowKeyValues[i];
+            const rowEl = document.getElementById(stkTableId + '-' + String(rowKeyValue)) as HTMLTableRowElement | null;
+            if (!rowEl) continue;
+            if (rowEl.classList.contains(className)) {
+                rowEl.classList.remove(className);
+                needRepaint = true;
             }
-            if (needRepaint) {
-                void tableContainer.value?.offsetWidth; //强制浏览器重绘
+            rowElTemp.push(rowEl);
+            // 动画结束移除class
+            window.clearTimeout(highlightDimRowsTimeout.get(rowKeyValue));
+            highlightDimRowsTimeout.set(
+                rowKeyValue,
+                window.setTimeout(() => {
+                    rowEl.classList.remove(className);
+                    highlightDimRowsTimeout.delete(rowKeyValue); // 回收内存
+                }, duration),
+            );
+        }
+        if (needRepaint) {
+            void tableContainerRef.value?.offsetWidth; //强制浏览器重绘
+        }
+        rowElTemp.forEach(el => el.classList.add(className)); // 统一添加动画
+    }
+
+    /**
+     * 使用css @keyframes动画，实现高亮单元格动画
+     * 此方案作为兼容方式。v0.3.0 将使用Element.animate 接口实现动画。
+     */
+    function highlightCellsInCssKeyFrame(cellEl: HTMLElement, rowKeyValue: UniqKey, className: string, duration: number) {
+        if (cellEl.classList.contains(className)) {
+            cellEl.classList.remove(className);
+            void cellEl.offsetHeight; // 通知浏览器重绘
+        }
+        cellEl.classList.add(className);
+        window.clearTimeout(highlightDimCellsTimeout.get(rowKeyValue));
+        highlightDimCellsTimeout.set(
+            rowKeyValue,
+            window.setTimeout(() => {
+                cellEl.classList.remove(className);
+                highlightDimCellsTimeout.delete(rowKeyValue);
+            }, duration),
+        );
+    }
+
+    /**
+     *  更新行状态
+     * @param rowKeyValue 行唯一键
+     * @param store highlightDimRowStore 的引用对象
+     * @param timeOffset 距动画开始经过的时长
+     */
+    function updateRowBgc(rowKeyValue: UniqKey, store: HighlightDimRowStore, timeOffset: number) {
+        const rowEl = document.getElementById(stkTableId + '-' + String(rowKeyValue));
+        const { visible, keyframe, duration: initialDuration } = store;
+        if (!rowEl) {
+            if (visible) {
+                store.visible = false; // 标记为不可见
             }
-            rowElTemp.forEach(el => el.classList.add(className)); // 统一添加动画
+            return;
+        }
+        // 只有元素 不可见 -> 可见 时才需要更新
+        if (!visible) {
+            store.visible = true; // 标记为可见
+            /** 经过的时间 ÷ 高亮持续时间 计算出 颜色过渡进度 (0-1) */
+            const iterationStart = timeOffset / initialDuration;
+            rowEl.animate(keyframe, {
+                duration: initialDuration - timeOffset,
+                /** 从什么时候开始，0-1 */
+                iterationStart,
+                /** 持续多久 0-1 */
+                iterations: 1 - iterationStart,
+            });
         }
     }
 
+    /** 更新行状态 */
+    function updateRowBgcJs(rowKeyValue: UniqKey, color: string) {
+        const rowEl = document.getElementById(stkTableId + '-' + String(rowKeyValue));
+        if (!rowEl) return;
+        rowEl.style.backgroundColor = color;
+    }
+
     return {
-        highlightRowStore,
-        highlightFrom,
+        highlightSteps,
         setHighlightDimRow,
         setHighlightDimCell,
     };

package/src/StkTable/useKeyboardArrowScroll.ts

@@ -1,4 +1,4 @@
-import { Ref, onBeforeUnmount, onMounted } from 'vue';
+import { ComputedRef, Ref, ShallowRef, onBeforeUnmount, onMounted, watch } from 'vue';
 import { StkTableColumn } from './types';
 import { VirtualScrollStore, VirtualScrollXStore } from './useVirtualScroll';
 
@@ -10,7 +10,8 @@ type Options<DT extends Record<string, any>> = {
     scrollTo: (y: number | null, x: number | null) => void;
     virtualScroll: Ref<VirtualScrollStore>;
     virtualScrollX: Ref<VirtualScrollXStore>;
-    tableHeaders: Ref<StkTableColumn<DT>[][]>;
+    tableHeaders: ShallowRef<StkTableColumn<DT>[][]>;
+    virtual_on: ComputedRef<boolean>;
 };
 /**
  * 按下键盘箭头滚动。只有悬浮在表体上才能生效键盘。
@@ -19,24 +20,35 @@ type Options<DT extends Record<string, any>> = {
  */
 export function useKeyboardArrowScroll<DT extends Record<string, any>>(
     targetElement: Ref<HTMLElement | undefined>,
-    { props, scrollTo, virtualScroll, virtualScrollX, tableHeaders }: Options<DT>,
+    { props, scrollTo, virtualScroll, virtualScrollX, tableHeaders, virtual_on }: Options<DT>,
 ) {
     /** 检测鼠标是否悬浮在表格体上 */
     let isMouseOver = false;
+    watch(virtual_on, val => {
+        if (!val) {
+            removeListeners();
+        } else {
+            addEventListeners();
+        }
+    });
+
+    onMounted(addEventListeners);
+
+    onBeforeUnmount(removeListeners);
 
-    onMounted(() => {
+    function addEventListeners() {
         window.addEventListener('keydown', handleKeydown);
         targetElement.value?.addEventListener('mouseenter', handleMouseEnter);
         targetElement.value?.addEventListener('mouseleave', handleMouseLeave);
         targetElement.value?.addEventListener('mousedown', handleMouseDown);
-    });
+    }
 
-    onBeforeUnmount(() => {
+    function removeListeners() {
         window.removeEventListener('keydown', handleKeydown);
         targetElement.value?.removeEventListener('mouseenter', handleMouseEnter);
         targetElement.value?.removeEventListener('mouseleave', handleMouseLeave);
         targetElement.value?.removeEventListener('mousedown', handleMouseDown);
-    });
+    }
 
     /** 键盘按下事件 */
     function handleKeydown(e: KeyboardEvent) {

package/src/StkTable/useVirtualScroll.ts

@@ -1,14 +1,14 @@
 import { Ref, ShallowRef, computed, ref } from 'vue';
 import { DEFAULT_TABLE_HEIGHT, DEFAULT_TABLE_WIDTH } from './const';
 import { StkTableColumn } from './types';
-import { getColWidth } from './utils';
+import { getCalculatedColWidth } from './utils';
 
 type Option<DT extends Record<string, any>> = {
     props: any;
-    tableContainer: Ref<HTMLElement | undefined>;
+    tableContainerRef: Ref<HTMLElement | undefined>;
     dataSourceCopy: ShallowRef<DT[]>;
-    tableHeaderLast: Ref<StkTableColumn<DT>[]>;
-    tableHeaders: Ref<StkTableColumn<DT>[][]>;
+    tableHeaderLast: ShallowRef<StkTableColumn<DT>[]>;
+    tableHeaders: ShallowRef<StkTableColumn<DT>[][]>;
 };
 
 /** 暂存纵向虚拟滚动的数据 */
@@ -52,7 +52,7 @@ const VUE2_SCROLL_TIMEOUT_MS = 200;
  */
 export function useVirtualScroll<DT extends Record<string, any>>({
     props,
-    tableContainer,
+    tableContainerRef,
     dataSourceCopy,
     tableHeaderLast,
     tableHeaders,
@@ -93,7 +93,10 @@ export function useVirtualScroll<DT extends Record<string, any>>({
     });
 
     const virtualX_on = computed(() => {
-        return props.virtualX && tableHeaderLast.value.reduce((sum, col) => (sum += getColWidth(col)), 0) > virtualScrollX.value.containerWidth + 100;
+        return (
+            props.virtualX &&
+            tableHeaderLast.value.reduce((sum, col) => (sum += getCalculatedColWidth(col)), 0) > virtualScrollX.value.containerWidth + 100
+        );
     });
 
     const virtualX_columnPart = computed(() => {
@@ -126,7 +129,7 @@ export function useVirtualScroll<DT extends Record<string, any>>({
         for (let i = virtualScrollX.value.endIndex; i < tableHeaderLast.value.length; i++) {
             const col = tableHeaderLast.value[i];
             if (col.fixed !== 'right') {
-                width += getColWidth(col);
+                width += getCalculatedColWidth(col);
             }
         }
         return width;
@@ -138,7 +141,7 @@ export function useVirtualScroll<DT extends Record<string, any>>({
      */
     function initVirtualScrollY(height?: number) {
         if (!virtual_on.value) return;
-        const { offsetHeight, scrollTop } = tableContainer.value || {};
+        const { offsetHeight, scrollTop } = tableContainerRef.value || {};
         const { rowHeight } = virtualScroll.value;
         let containerHeight: number;
         // FIXME: 可能多次获取offsetHeight 会导致浏览器频繁重排
@@ -160,7 +163,7 @@ export function useVirtualScroll<DT extends Record<string, any>>({
 
     function initVirtualScrollX() {
         if (!props.virtualX) return;
-        const { offsetWidth, scrollLeft } = tableContainer.value || {};
+        const { offsetWidth, scrollLeft } = tableContainerRef.value || {};
         // scrollTo(null, 0);
         virtualScrollX.value.containerWidth = offsetWidth || DEFAULT_TABLE_WIDTH;
         updateVirtualScrollX(scrollLeft);
@@ -243,7 +246,7 @@ export function useVirtualScroll<DT extends Record<string, any>>({
         for (let colIndex = 0; colIndex < headerLength; colIndex++) {
             startIndex++;
             const col = tableHeaderLast.value[colIndex];
-            const colWidth = getColWidth(col);
+            const colWidth = getCalculatedColWidth(col);
             // fixed left 不进入计算列宽
             if (col.fixed === 'left') {
                 leftColWidthSum += colWidth;
@@ -263,7 +266,7 @@ export function useVirtualScroll<DT extends Record<string, any>>({
         let endIndex = headerLength;
         for (let colIndex = startIndex + 1; colIndex < headerLength; colIndex++) {
             const col = tableHeaderLast.value[colIndex];
-            colWidthSum += getColWidth(col);
+            colWidthSum += getCalculatedColWidth(col);
             // 列宽大于容器宽度则停止
             if (colWidthSum >= containerWidth) {
                 endIndex = colIndex + 1; // 由于slice[start,end)，要加1