stk-table-vue 0.2.8 → 0.3.0

package/lib/style.css

@@ -20,6 +20,8 @@
   --bg-border-bottom:linear-gradient(0deg, var(--border-color) var(--border-width), transparent var(--border-width));
   --bg-border-left:linear-gradient(90deg, var(--border-color) var(--border-width), transparent var(--border-width));
   --highlight-color:#71a2fd;
+  --highlight-duration:2s;
+  --highlight-easing:linear;
   --stripe-bgc:#fafafc;
   --sort-arrow-color:#757699;
   --sort-arrow-hover-color:#8f90b5;
@@ -148,13 +150,16 @@
   background-color:inherit;
 }
 .stk-table .stk-table-main td.highlight-cell{
-  animation:stk-table-dim 2s linear;
+  animation:stk-table-dim var(--highlight-duration) var(--highlight-easing);
 }
 .stk-table .stk-table-main td.text-overflow .table-cell-wrapper{
   white-space:nowrap;
   overflow:hidden;
   text-overflow:ellipsis;
 }
+.stk-table .stk-table-main td.seq-column{
+  text-align:center;
+}
 .stk-table .stk-table-main .fixed-cell--left{
   --shadow-rotate:90deg;
 }
@@ -245,9 +250,10 @@
 .stk-table .stk-table-main tbody tr{
   background-color:var(--td-bgc);
   height:var(--row-height);
+  transform:translateZ(0);
 }
 .stk-table .stk-table-main tbody tr.highlight-row{
-  animation:stk-table-dim 2s linear;
+  animation:stk-table-dim var(--highlight-duration) var(--highlight-easing);
 }
 .stk-table .stk-table-main tbody tr.hover,
 .stk-table .stk-table-main tbody tr:hover{

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "stk-table-vue",
-    "version": "0.2.8",
+    "version": "0.3.0",
     "description": "Simple realtime virtual table for vue3&vue2.7",
     "main": "./lib/stk-table-vue.js",
     "types": "./lib/src/StkTable/index.d.ts",
@@ -35,8 +35,7 @@
         "@types/node": "^20.11.14",
         "@typescript-eslint/eslint-plugin": "^6.14.0",
         "@typescript-eslint/parser": "^6.14.0",
-        "@vitejs/plugin-vue": "^5.0.3",
-        "@vitejs/plugin-vue-jsx": "^3.1.0",
+        "@vitejs/plugin-vue": "^5.0.4",
         "@vue/test-utils": "2.4.4",
         "eslint": "^8.55.0",
         "eslint-config-prettier": "^9.1.0",
@@ -49,10 +48,10 @@
         "postcss-preset-env": "^9.3.0",
         "prettier": "^3.1.1",
         "typescript": "^5.3.3",
-        "vite": "^5.1.4",
+        "vite": "^5.2.0",
         "vite-plugin-dts": "^3.7.3",
         "vitest": "^1.1.0",
-        "vue": "^3.4.19",
+        "vue": "^3.4.21",
         "vue-eslint-parser": "^9.3.2"
     },
     "dependencies": {

package/src/StkTable/StkTable.vue

@@ -1,6 +1,6 @@
 <template>
     <div
-        ref="tableContainer"
+        ref="tableContainerRef"
         class="stk-table"
         :class="{
             virtual,
@@ -15,12 +15,16 @@
             'border-body-v': props.bordered === 'body-v',
             stripe: props.stripe,
         }"
-        :style="
+        :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-easing': highlightSteps ? `steps(${highlightSteps})` : '',
+            },
+        ]"
         @scroll="onTableScroll"
         @wheel="onTableWheel"
     >
@@ -31,7 +35,7 @@
           :style="{ height: dataSourceCopy.length * virtualScroll.rowHeight + 'px' }"
         ></div>
       -->
-        <div v-show="colResizable" ref="colResizeIndicator" class="column-resize-indicator"></div>
+        <div v-if="colResizable" ref="colResizeIndicatorRef" class="column-resize-indicator"></div>
         <!-- 表格主体 -->
         <table
             class="stk-table-main"
@@ -81,6 +85,9 @@
                     >
                         <div class="table-header-cell-wrapper">
                             <component :is="col.customHeaderCell" v-if="col.customHeaderCell" :col="col" />
+                            <template v-else-if="col.type === 'seq'">
+                                <span class="table-header-title">{{ col.title }}</span>
+                            </template>
                             <template v-else>
                                 <slot name="tableHeader" :col="col">
                                     <span class="table-header-title">{{ col.title }}</span>
@@ -139,16 +146,14 @@
                     ></template>
                 </tr>
                 <tr
-                    v-for="(row, i) in virtual_dataSourcePart"
-                    :key="rowKey ? rowKeyGen(row) : i"
-                    :data-row-key="rowKey ? rowKeyGen(row) : i"
+                    v-for="(row, rowIndex) in virtual_dataSourcePart"
+                    :id="stkTableId + '-' + (rowKey ? rowKeyGen(row) : rowIndex)"
+                    :key="rowKey ? rowKeyGen(row) : rowIndex"
+                    :data-row-key="rowKey ? rowKeyGen(row) : rowIndex"
                     :class="{
                         active: rowKey ? rowKeyGen(row) === rowKeyGen(currentItem) : row === currentItem,
                         hover: rowKey ? rowKeyGen(row) === currentHover : row === currentHover,
-                        [rowClassName(row, i)]: true,
-                    }"
-                    :style="{
-                        backgroundColor: highlightRowStore[rowKeyGen(row)]?.bgc,
+                        [rowClassName(row, rowIndex)]: true,
                     }"
                     @click="e => onRowClick(e, row)"
                     @dblclick="e => onRowDblclick(e, row)"
@@ -158,16 +163,34 @@
                     <!--这个td用于配合虚拟滚动的th对应，防止列错位-->
                     <td v-if="virtualX_on" class="virtual-x-left" style="padding: 0"></td>
                     <td
-                        v-for="col in virtualX_columnPart"
+                        v-for="(col, colIndex) in virtualX_columnPart"
                         :key="col.dataIndex"
                         :data-index="col.dataIndex"
-                        :class="[col.className, showOverflow ? 'text-overflow' : '', fixedColClassMap.get(colKeyGen(col))]"
+                        :class="[
+                            col.className,
+                            fixedColClassMap.get(colKeyGen(col)),
+                            showOverflow ? 'text-overflow' : '',
+                            col.type === 'seq' ? 'seq-column' : '',
+                        ]"
                         :style="cellStyleMap[TagType.TD].get(colKeyGen(col))"
                         @click="e => onCellClick(e, row, col)"
                     >
-                        <component :is="col.customCell" v-if="col.customCell" :col="col" :row="row" :cell-value="row[col.dataIndex]" />
-                        <div v-else class="table-cell-wrapper" :title="row[col.dataIndex]">
-                            {{ row[col.dataIndex] ?? getEmptyCellText(col, row) }}
+                        <component
+                            :is="col.customCell"
+                            v-if="col.customCell"
+                            :col="col"
+                            :row="row"
+                            :row-index="rowIndex"
+                            :col-index="colIndex"
+                            :cell-value="row[col.dataIndex]"
+                        />
+                        <div v-else class="table-cell-wrapper" :title="!col.type ? row[col.dataIndex] : ''">
+                            <template v-if="col.type === 'seq'">
+                                {{ (props.seqConfig.startIndex || 0) + rowIndex + 1 }}
+                            </template>
+                            <template v-else>
+                                {{ row[col.dataIndex] ?? getEmptyCellText(col, row) }}
+                            </template>
                         </div>
                     </td>
                 </tr>
@@ -190,8 +213,8 @@
  * [] highlight-row 颜色不能恢复到active的颜色
  */
 import { CSSProperties, computed, onMounted, ref, shallowRef, toRaw, watch } from 'vue';
-import { Default_Row_Height } from './const';
-import { Order, SortConfig, SortOption, SortState, StkTableColumn, TagType, UniqKeyProp } from './types/index';
+import { DEFAULT_ROW_HEIGHT } from './const';
+import { HighlightConfig, Order, SeqConfig, SortConfig, SortOption, SortState, StkTableColumn, TagType, UniqKeyProp } from './types/index';
 import { useAutoResize } from './useAutoResize';
 import { useColResize } from './useColResize';
 import { useFixedCol } from './useFixedCol';
@@ -200,10 +223,12 @@ import { useHighlight } from './useHighlight';
 import { useKeyboardArrowScroll } from './useKeyboardArrowScroll';
 import { useThDrag } from './useThDrag';
 import { useVirtualScroll } from './useVirtualScroll';
-import { getColWidth, getColWidthStr, howDeepTheHeader, tableSort } from './utils';
+import { createStkTableId, getCalculatedColWidth, getColWidth, transformWidthToStr, howDeepTheHeader, tableSort } from './utils';
 
 /** Generic stands for DataType */
 type DT = any;
+/** 自己生成实例id */
+const stkTableId = createStkTableId();
 /**
  * props 不能放在单独的文件中。vue2.7 compiler 构建会出错。
  */
@@ -228,7 +253,7 @@ const props = withDefaults(
         headerRowHeight?: number | null;
         /** 虚拟滚动 */
         virtual?: boolean;
-        /** x轴虚拟滚动 */
+        /** x轴虚拟滚动(必须设置列宽)*/
         virtualX?: boolean;
         /** 表格列配置 */
         columns?: StkTableColumn<DT>[];
@@ -289,6 +314,10 @@ const props = withDefaults(
         sortConfig?: SortConfig<DT>;
         /** 隐藏头部title。可传入dataIndex数组 */
         hideHeaderTitle?: boolean | string[];
+        /** 高亮配置 */
+        highlightConfig?: HighlightConfig;
+        /** 序号列配置 */
+        seqConfig?: SeqConfig;
     }>(),
     {
         width: '',
@@ -298,7 +327,7 @@ const props = withDefaults(
         maxWidth: '',
         headless: false,
         theme: 'light',
-        rowHeight: Default_Row_Height,
+        rowHeight: DEFAULT_ROW_HEIGHT,
         headerRowHeight: null,
         virtual: false,
         virtualX: false,
@@ -326,6 +355,8 @@ const props = withDefaults(
             stringLocaleCompare: true,
         }),
         hideHeaderTitle: false,
+        highlightConfig: () => ({}),
+        seqConfig: () => ({}),
     },
 );
 
@@ -407,8 +438,8 @@ const emits = defineEmits<{
 //     empty(): void;
 // }>();
 
-const tableContainer = ref<HTMLDivElement>();
-const colResizeIndicator = ref<HTMLDivElement>();
+const tableContainerRef = ref<HTMLDivElement>();
+const colResizeIndicatorRef = ref<HTMLDivElement>();
 /** 当前选中的一行*/
 const currentItem = ref<DT | null>(null);
 /**
@@ -417,7 +448,7 @@ const currentItem = ref<DT | null>(null);
  */
 const currentItemKey = ref<any>(null);
 /** 当前hover的行 */
-const currentHover = ref<DT | null>(null);
+const currentHover = ref<any | null>(null);
 
 /** 排序的列dataIndex*/
 let sortCol = ref<string | null>();
@@ -437,9 +468,9 @@ const sortSwitchOrder: Order[] = [null, 'desc', 'asc'];
  * ]
  * ```
  */
-const tableHeaders = ref<StkTableColumn<DT>[][]>([]);
+const tableHeaders = shallowRef<StkTableColumn<DT>[][]>([]);
 /** 若有多级表头时，最后一行的tableHeaders.内容是 props.columns 的引用集合  */
-const tableHeaderLast = ref<StkTableColumn<DT>[]>([]);
+const tableHeaderLast = shallowRef<StkTableColumn<DT>[]>([]);
 
 const dataSourceCopy = shallowRef<DT[]>([...props.dataSource]);
 
@@ -462,8 +493,8 @@ const { isColResizing, onThResizeMouseDown } = useColResize({
     props,
     emits,
     colKeyGen,
-    colResizeIndicator,
-    tableContainer,
+    colResizeIndicatorRef,
+    tableContainerRef,
     tableHeaderLast,
 });
 
@@ -483,7 +514,7 @@ const {
     initVirtualScrollX,
     updateVirtualScrollY,
     updateVirtualScrollX,
-} = useVirtualScroll({ tableContainer, props, dataSourceCopy, tableHeaderLast, tableHeaders });
+} = useVirtualScroll({ tableContainerRef, props, dataSourceCopy, tableHeaderLast, tableHeaders });
 
 const { getFixedStyle } = useFixedStyle<DT>({
     props,
@@ -497,26 +528,27 @@ const { getFixedStyle } = useFixedStyle<DT>({
 /**
  * 高亮行，高亮单元格
  */
-const { highlightRowStore, setHighlightDimCell, setHighlightDimRow } = useHighlight({ props, tableContainer });
+const { highlightSteps, setHighlightDimCell, setHighlightDimRow } = useHighlight({ props, stkTableId, tableContainerRef });
 
 if (props.autoResize) {
-    useAutoResize({ tableContainer, initVirtualScroll, props, debounceMs: 200 });
+    useAutoResize({ tableContainerRef, initVirtualScroll, props, debounceMs: 200 });
 }
 
 /** 键盘箭头滚动 */
-useKeyboardArrowScroll(tableContainer, {
+useKeyboardArrowScroll(tableContainerRef, {
     props,
     scrollTo,
     virtualScroll,
     virtualScrollX,
     tableHeaders,
+    virtual_on,
 });
 
 /** 固定列处理 */
 const { fixedColClassMap, dealFixedColShadow, updateFixedShadow } = useFixedCol({
     props,
     colKeyGen,
-    tableContainer,
+    tableContainerRef,
     tableHeaders,
     tableHeaderLast,
 });
@@ -528,6 +560,10 @@ watch(
         initVirtualScrollX();
     },
 );
+watch(
+    () => props.virtualX,
+    () => dealColumns(),
+);
 
 dealColumns();
 
@@ -579,7 +615,6 @@ function dealDefaultSorter() {
 function dealColumns() {
     // reset
     tableHeaders.value = [];
-    tableHeaderLast.value = [];
     const copyColumn = props.columns; // do not deep clone
     const deep = howDeepTheHeader(copyColumn);
     const tempHeaderLast: StkTableColumn<DT>[] = [];
@@ -588,9 +623,8 @@ function dealColumns() {
         console.error('多级表头不支持横向虚拟滚动');
     }
 
-    // 展开columns
-
     /**
+     * 展开columns
      * @param arr
      * @param depth 深度
      * @param parent 父节点引用，用于构建双向链表。
@@ -633,10 +667,7 @@ function dealColumns() {
             if (colSpan !== 1) {
                 col.colSpan = colSpan;
             }
-            if (!props.fixedMode && col.width === void 0) {
-                // 列赋值默认列宽。由于有些场景不需要设置width。
-                col.width = colWidth + 'px';
-            }
+            col.__WIDTH__ = colWidth; //记录计算的列宽
             allChildrenLen += colChildrenLen;
             allChildrenWidthSum += colWidth;
         });
@@ -645,6 +676,8 @@ function dealColumns() {
 
     flat(copyColumn, null);
 
+    // tableHeaders.value = [...tableHeaders.value];
+
     tableHeaderLast.value = tempHeaderLast;
     dealFixedColShadow();
 }
@@ -677,16 +710,17 @@ const cellStyleMap = computed(() => {
     tableHeaders.value.forEach((cols, depth) => {
         cols.forEach(col => {
             const colKey = colKeyGen(col);
-            const width = getColWidthStr(col);
+            const width = props.virtualX ? getCalculatedColWidth(col) + 'px' : transformWidthToStr(col.width);
             const style: CSSProperties = {
                 width,
             };
             if (props.colResizable) {
+                // 如果要调整列宽，列宽必须固定。
                 style.minWidth = width;
                 style.maxWidth = width;
             } else {
-                style.minWidth = getColWidthStr(col, 'minWidth') ?? width;
-                style.maxWidth = getColWidthStr(col, 'maxWidth') ?? width;
+                style.minWidth = transformWidthToStr(col.minWidth) ?? width;
+                style.maxWidth = transformWidthToStr(col.maxWidth) ?? width;
             }
 
             const thStyle = {
@@ -897,9 +931,9 @@ function resetSorter() {
  * @param left 传null 则不变动位置
  */
 function scrollTo(top: number | null = 0, left: number | null = 0) {
-    if (!tableContainer.value) return;
-    if (top !== null) tableContainer.value.scrollTop = top;
-    if (left !== null) tableContainer.value.scrollLeft = left;
+    if (!tableContainerRef.value) return;
+    if (top !== null) tableContainerRef.value.scrollTop = top;
+    if (left !== null) tableContainerRef.value.scrollLeft = left;
 }
 
 /** 获取当前状态的表格数据 */

package/src/StkTable/const.ts

@@ -1,18 +1,23 @@
-export const Default_Col_Width = '100';
+export const DEFAULT_COL_WIDTH = '100';
 
-export const Default_Table_Height = 100;
-export const Default_Table_Width = 200;
-export const Default_Row_Height = 28;
+export const DEFAULT_TABLE_HEIGHT = 100;
+export const DEFAULT_TABLE_WIDTH = 200;
+export const DEFAULT_ROW_HEIGHT = 28;
 
 /** 高亮背景色 */
-export const Highlight_Color = {
+export const HIGHLIGHT_COLOR = {
     light: { from: '#71a2fd', to: '#fff' },
     dark: { from: '#1e4c99', to: '#181c21' },
 };
 /** 高亮持续时间 */
-export const Highlight_Duration = 2000;
+export const HIGHLIGHT_DURATION = 2000;
 /** 高亮变更频率 */
-export const Highlight_Color_Change_Freq = 100;
+export const HIGHLIGHT_FREQ = 1000 / 30;
+
+/** 高亮行class */
+export const HIGHLIGHT_ROW_CLASS = 'highlight-row';
+/** 高连单元格class */
+export const HIGHLIGHT_CELL_CLASS = 'highlight-cell';
 
 let _chromeVersion = 0;
 try {
@@ -24,4 +29,6 @@ try {
     console.error('Cannot get Chrome version', e);
 }
 /** 是否兼容低版本模式 */
-export const Is_Legacy_Mode = _chromeVersion < 56;
+export const IS_LEGACY_MODE = _chromeVersion < 56;
+
+export const STK_ID_PREFIX = 'stk';

package/src/StkTable/style.less

@@ -23,6 +23,8 @@
     --bg-border-bottom: linear-gradient(0deg, var(--border-color) var(--border-width), transparent var(--border-width));
     --bg-border-left: linear-gradient(90deg, var(--border-color) var(--border-width), transparent var(--border-width));
     --highlight-color: #71a2fd;
+    --highlight-duration: 2s;
+    --highlight-easing: linear;
     /* 斑马纹颜色*/
     --stripe-bgc: #fafafc;
 
@@ -211,7 +213,7 @@
             }
 
             &.highlight-cell {
-                animation: stk-table-dim 2s linear;
+                animation: stk-table-dim var(--highlight-duration) var(--highlight-easing);
             }
 
             &.text-overflow {
@@ -221,6 +223,10 @@
                     text-overflow: ellipsis;
                 }
             }
+            
+            &.seq-column{
+                text-align: center;
+            }
         }
 
         /*固定列阴影-左*/
@@ -348,15 +354,14 @@
             tr {
                 background-color: var(--td-bgc);
                 height: var(--row-height);
+                /** 一行分层，有利于高亮行重绘*/
+                transform: translateZ(0); 
 
                 /* td inherit tr bgc*/
                 &.highlight-row {
-                    animation: stk-table-dim 2s linear;
+                    animation: stk-table-dim var(--highlight-duration) var(--highlight-easing);
                 }
-
-                /* &.highlight-row-transition {
-                   transition: background-color v-bind(highlightStepDuration) linear;
-                 }*/
+                
 
                 &.hover,
                 &:hover {

package/src/StkTable/types/index.ts

@@ -10,6 +10,11 @@ export type CustomHeaderCellFunc<T extends Record<string, any>> = (props: { col:
 
 /** 表格列配置 */
 export type StkTableColumn<T extends Record<string, any>> = {
+    /**
+     * 列类型
+     * - seq 序号列
+     */
+    type?: 'seq';
     /** 取值id */
     dataIndex: keyof T & string;
     /** 表头文字 */
@@ -57,6 +62,8 @@ export type StkTableColumn<T extends Record<string, any>> = {
     children?: StkTableColumn<T>[];
     /** 父节点引用 */
     __PARENT__?: StkTableColumn<T> | null;
+    /** 保存计算的宽度。横向虚拟滚动用。 */
+    __WIDTH__?: number;
 };
 
 export type SortOption<T extends Record<string, any>> = Pick<StkTableColumn<T>, 'sorter' | 'dataIndex' | 'sortField' | 'sortType'>;
@@ -99,3 +106,17 @@ export const enum TagType {
     TH,
     TD,
 }
+
+/** 高亮配置 */
+export type HighlightConfig = {
+    /** 高亮持续时间(s) */
+    duration?: number;
+    /** 高亮帧率 */
+    fps?: number;
+};
+
+/** 序号列配置 */
+export type SeqConfig = {
+    /** 序号列起始下标 用于适配分页 */
+    startIndex?: number;
+};

package/src/StkTable/useAutoResize.ts

@@ -2,7 +2,7 @@ import { Ref, onBeforeUnmount, onMounted, watch } from 'vue';
 
 type Options = {
     props: any;
-    tableContainer: Ref<HTMLElement | undefined>;
+    tableContainerRef: Ref<HTMLElement | undefined>;
     initVirtualScroll: () => void;
     /** 防抖延时 */
     debounceMs: number;
@@ -11,7 +11,7 @@ type Options = {
  * 窗口变化自动重置虚拟滚动
  * @param param0
  */
-export function useAutoResize({ tableContainer, initVirtualScroll, props, debounceMs }: Options) {
+export function useAutoResize({ tableContainerRef, initVirtualScroll, props, debounceMs }: Options) {
     let resizeObserver: ResizeObserver | null = null;
 
     onMounted(() => {
@@ -24,9 +24,9 @@ export function useAutoResize({ tableContainer, initVirtualScroll, props, deboun
 
     function initResizeObserver() {
         if (window.ResizeObserver) {
-            if (!tableContainer.value) {
+            if (!tableContainerRef.value) {
                 const watchDom = watch(
-                    () => tableContainer,
+                    () => tableContainerRef,
                     () => {
                         initResizeObserver();
                         watchDom();
@@ -35,7 +35,7 @@ export function useAutoResize({ tableContainer, initVirtualScroll, props, deboun
                 return;
             }
             resizeObserver = new ResizeObserver(resizeCallback);
-            resizeObserver.observe(tableContainer.value);
+            resizeObserver.observe(tableContainerRef.value);
         } else {
             window.addEventListener('resize', resizeCallback);
         }

package/src/StkTable/useColResize.ts

@@ -1,6 +1,6 @@
-import { Ref, onBeforeUnmount, onMounted, ref } from 'vue';
+import { Ref, ShallowRef, onBeforeUnmount, onMounted, ref } from 'vue';
 import { StkTableColumn } from './types';
-import { getColWidth } from './utils';
+import { getCalculatedColWidth } from './utils';
 
 type ColResizeState<DT extends Record<string, any>> = {
     /** 当前被拖动的列*/
@@ -18,17 +18,17 @@ type ColResizeState<DT extends Record<string, any>> = {
 type Params<DT extends Record<string, any>> = {
     props: any;
     emits: any;
-    tableContainer: Ref<HTMLElement | undefined>;
-    tableHeaderLast: Ref<StkTableColumn<DT>[]>;
-    colResizeIndicator: Ref<HTMLElement | undefined>;
+    tableContainerRef: Ref<HTMLElement | undefined>;
+    tableHeaderLast: ShallowRef<StkTableColumn<DT>[]>;
+    colResizeIndicatorRef: Ref<HTMLElement | undefined>;
     colKeyGen: (p: any) => string;
 };
 
 /** 列宽拖动 */
 export function useColResize<DT extends Record<string, any>>({
-    tableContainer,
+    tableContainerRef,
     tableHeaderLast,
-    colResizeIndicator,
+    colResizeIndicatorRef,
     props,
     emits,
     colKeyGen,
@@ -71,12 +71,12 @@ export function useColResize<DT extends Record<string, any>>({
      * @param isPrev 是否要上一列
      */
     function onThResizeMouseDown(e: MouseEvent, col: StkTableColumn<DT>, isPrev = false) {
-        if (!tableContainer.value) return;
+        if (!tableContainerRef.value) return;
         e.stopPropagation();
         e.preventDefault();
         const { clientX } = e;
-        const { scrollLeft, scrollTop } = tableContainer.value;
-        const { left } = tableContainer.value.getBoundingClientRect();
+        const { scrollLeft, scrollTop } = tableContainerRef.value;
+        const { left } = tableContainerRef.value.getBoundingClientRect();
         /** 列下标 */
         let colIndex = tableHeaderLast.value.findIndex(it => colKeyGen(it) === colKeyGen(col));
         if (isPrev) {
@@ -97,8 +97,8 @@ export function useColResize<DT extends Record<string, any>>({
         });
 
         // 展示指示线，更新其位置
-        if (colResizeIndicator.value) {
-            const style = colResizeIndicator.value.style;
+        if (colResizeIndicatorRef.value) {
+            const style = colResizeIndicatorRef.value.style;
             style.display = 'block';
             style.left = offsetTableX + 'px';
             style.top = scrollTop + 'px';
@@ -115,15 +115,15 @@ export function useColResize<DT extends Record<string, any>>({
         const { lastCol, startX, startOffsetTableX } = colResizeState;
         const { clientX } = e;
         let moveX = clientX - startX;
-        const currentColWidth = getColWidth(lastCol);
+        const currentColWidth = getCalculatedColWidth(lastCol);
         // 移动量不小于最小列宽
         if (currentColWidth + moveX < props.colMinWidth) {
             moveX = -currentColWidth;
         }
 
         const offsetTableX = startOffsetTableX + moveX;
-        if (!colResizeIndicator.value) return;
-        colResizeIndicator.value.style.left = offsetTableX + 'px';
+        if (!colResizeIndicatorRef.value) return;
+        colResizeIndicatorRef.value.style.left = offsetTableX + 'px';
     }
 
     /**
@@ -136,7 +136,7 @@ export function useColResize<DT extends Record<string, any>>({
         const moveX = clientX - startX;
 
         // 移动量不小于最小列宽
-        let width = getColWidth(lastCol) + moveX;
+        let width = getCalculatedColWidth(lastCol) + moveX;
         if (width < props.colMinWidth) width = props.colMinWidth;
 
         const curCol = tableHeaderLast.value.find(it => colKeyGen(it) === colKeyGen(lastCol));
@@ -146,8 +146,8 @@ export function useColResize<DT extends Record<string, any>>({
         emits('update:columns', [...props.columns]);
 
         // 隐藏指示线
-        if (colResizeIndicator.value) {
-            const style = colResizeIndicator.value.style;
+        if (colResizeIndicatorRef.value) {
+            const style = colResizeIndicatorRef.value.style;
             style.display = 'none';
             style.left = '0';
             style.top = '0';