stk-table-vue 0.2.6 → 0.2.7

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

@@ -168,7 +168,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /** 设置高亮渐暗单元格 */
     setHighlightDimCell: (rowKeyValue: string, dataIndex: string) => void;
     /** 设置高亮渐暗行 */
-    setHighlightDimRow: (rowKeyValues: import("./types/index").UniqKey[]) => void;
+    setHighlightDimRow: (rowKeyValues: import("./types/index").UniqKey[], option?: {
+        useCss?: boolean | undefined;
+    }) => void;
     /** 表格排序列dataIndex */
     sortCol: import("vue").Ref<string | null | undefined>;
     /** 获取当前排序状态 */

package/lib/src/StkTable/types/index.d.ts

@@ -94,4 +94,9 @@ export type SortConfig<T extends Record<string, any>> = {
      */
     stringLocaleCompare?: boolean;
 };
+/** th td类型 */
+export declare const enum TagType {
+    TH = 0,
+    TD = 1
+}
 export {};

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

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

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

@@ -1,5 +1,5 @@
 import { CSSProperties, Ref } from 'vue';
-import { StkTableColumn } from './types';
+import { StkTableColumn, TagType } from './types';
 import { VirtualScrollStore, VirtualScrollXStore } from './useVirtualScroll';
 type Options<T extends Record<string, any>> = {
     props: any;
@@ -15,6 +15,6 @@ type Options<T extends Record<string, any>> = {
  * @returns
  */
 export declare function useFixedStyle<DT extends Record<string, any>>({ props, tableHeaders, virtualScroll, virtualScrollX, virtualX_on, virtualX_offsetRight, }: Options<DT>): {
-    getFixedStyle: (tagType: 1 | 2, col: StkTableColumn<any>, depth?: number) => CSSProperties;
+    getFixedStyle: (tagType: TagType, col: StkTableColumn<DT>, depth?: number) => CSSProperties;
 };
 export {};

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

@@ -20,7 +20,9 @@ type HighlightRowStore = {
  */
 export declare function useHighlight({ props, tableContainer }: Params): {
     highlightRowStore: Ref<Record<UniqKey, HighlightRowStore>>;
-    setHighlightDimRow: (rowKeyValues: UniqKey[]) => void;
+    setHighlightDimRow: (rowKeyValues: UniqKey[], option?: {
+        useCss?: boolean;
+    }) => void;
     setHighlightDimCell: (rowKeyValue: string, dataIndex: string) => void;
 };
 export {};

package/lib/stk-table-vue.js

@@ -1,4 +1,4 @@
-import { onMounted, onBeforeUnmount, watch, ref, computed, defineComponent, shallowRef, toRaw, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle, withDirectives, createElementVNode, vShow, Fragment, renderList, createCommentVNode, createBlock, resolveDynamicComponent, renderSlot, toDisplayString, createTextVNode } from "vue";
+import { onMounted, onBeforeUnmount, watch, ref, shallowRef, computed, defineComponent, toRaw, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle, withDirectives, createElementVNode, vShow, Fragment, renderList, createCommentVNode, createBlock, resolveDynamicComponent, renderSlot, toDisplayString, createTextVNode } from "vue";
 import { interpolateRgb } from "d3-interpolate";
 const Default_Col_Width = "100";
 const Default_Table_Height = 100;
@@ -20,6 +20,11 @@ try {
   console.error("Cannot get Chrome version", e);
 }
 const Is_Legacy_Mode = _chromeVersion < 56;
+var TagType = /* @__PURE__ */ ((TagType2) => {
+  TagType2[TagType2["TH"] = 0] = "TH";
+  TagType2[TagType2["TD"] = 1] = "TD";
+  return TagType2;
+})(TagType || {});
 function useAutoResize({ tableContainer, initVirtualScroll, props, debounceMs }) {
   let resizeObserver = null;
   onMounted(() => {
@@ -325,16 +330,30 @@ function useColResize({
     onThResizeMouseUp
   };
 }
-function useFixedCol({ props, tableHeaderLast, tableContainer }) {
+function useFixedCol({ props, colKeyGen, tableHeaderLast, tableContainer }) {
   const fixedShadow = ref({
     showL: false,
     showR: false
   });
-  let fixedShadowCols = [];
+  const fixedShadowCols = shallowRef([]);
+  const fixedColClassMap = computed(() => {
+    const colMap = /* @__PURE__ */ new Map();
+    props.columns.forEach((col) => {
+      const { showR, showL } = fixedShadow.value;
+      const showShadow = props.fixedColShadow && col.fixed && (showL && col.fixed === "left" || showR && col.fixed === "right") && fixedShadowCols.value.includes(col);
+      const classObj = {
+        "fixed-cell": col.fixed,
+        ["fixed-cell--" + col.fixed]: col.fixed,
+        "fixed-cell--shadow": showShadow
+      };
+      colMap.set(colKeyGen(col), classObj);
+    });
+    return colMap;
+  });
   function dealFixedColShadow() {
     if (!props.fixedColShadow)
       return;
-    fixedShadowCols = [];
+    fixedShadowCols.value = [];
     let lastLeftCol = null;
     for (let i = tableHeaderLast.value.length - 1; i >= 0; i--) {
       const col = tableHeaderLast.value[i];
@@ -346,27 +365,17 @@ function useFixedCol({ props, tableHeaderLast, tableContainer }) {
     let node = { __PARENT__: lastLeftCol };
     while (node = node.__PARENT__) {
       if (node.fixed) {
-        fixedShadowCols.push(node);
+        fixedShadowCols.value.push(node);
       }
     }
     const lastRightCol = tableHeaderLast.value.find((it) => it.fixed === "right");
     node = { __PARENT__: lastRightCol };
     while (node = node.__PARENT__) {
       if (node.fixed) {
-        fixedShadowCols.push(node);
+        fixedShadowCols.value.push(node);
       }
     }
   }
-  function getFixedColClass(col) {
-    const { showR, showL } = fixedShadow.value;
-    const showShadow = props.fixedColShadow && col.fixed && (showL && col.fixed === "left" || showR && col.fixed === "right") && fixedShadowCols.includes(col);
-    const classObj = {
-      "fixed-cell": col.fixed,
-      ["fixed-cell--" + col.fixed]: col.fixed,
-      "fixed-cell--shadow": showShadow
-    };
-    return classObj;
-  }
   function updateFixedShadow() {
     if (!props.fixedColShadow)
       return;
@@ -376,7 +385,7 @@ function useFixedCol({ props, tableHeaderLast, tableContainer }) {
   }
   return {
     /** 固定列class */
-    getFixedColClass,
+    fixedColClassMap,
     /** 处理固定列阴影 */
     dealFixedColShadow,
     /** 滚动条变化时，更新需要展示阴影的列 */
@@ -436,7 +445,7 @@ function useFixedStyle({
     } else {
       style.position = "sticky";
     }
-    if (tagType === 1) {
+    if (tagType === TagType.TH) {
       if (Is_Legacy_Mode) {
         style.top = virtualScroll.value.scrollTop + depth * props.rowHeight + "px";
       } else {
@@ -528,16 +537,16 @@ function useHighlight({ props, tableContainer }) {
       }, Highlight_Duration)
     );
   }
-  function setHighlightDimRow(rowKeyValues) {
+  function setHighlightDimRow(rowKeyValues, option = {}) {
     var _a, _b;
     if (!Array.isArray(rowKeyValues))
       rowKeyValues = [rowKeyValues];
-    if (props.virtual) {
+    if (props.virtual && !option.useCss) {
       const nowTs = Date.now();
       for (let i = 0; i < rowKeyValues.length; i++) {
         const rowKeyValue = rowKeyValues[i];
         highlightRowStore.value[rowKeyValue] = {
-          bgc: "",
+          bgc: highlightFrom.value,
           bgc_progress: 0,
           bgc_progress_ms: nowTs
         };
@@ -1042,8 +1051,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       virtualScrollX,
       tableHeaders
     });
-    const { getFixedColClass, dealFixedColShadow, updateFixedShadow } = useFixedCol({
+    const { fixedColClassMap, dealFixedColShadow, updateFixedShadow } = useFixedCol({
       props,
+      colKeyGen,
       tableContainer,
       tableHeaderLast
     });
@@ -1157,33 +1167,42 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function colKeyGen(col) {
       return typeof props.colKey === "function" ? props.colKey(col) : col[props.colKey];
     }
-    function getColWidthStyle(col) {
-      const width = getColWidthStr(col);
-      const minWidth = getColWidthStr(col, "minWidth");
-      const maxWidth = getColWidthStr(col, "maxWidth");
-      const style = {
-        width,
-        minWidth: minWidth ?? width,
-        maxWidth: maxWidth ?? width
-      };
-      if (props.colResizable) {
-        style.minWidth = width;
-        style.maxWidth = width;
-      }
-      return style;
-    }
-    function getCellStyle(tagType, col, depth) {
-      const style = {
-        ...getColWidthStyle(col),
-        ...getFixedStyle(tagType, col, depth)
+    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 width = getColWidthStr(col);
+          const style = {
+            width
+          };
+          if (props.colResizable) {
+            style.minWidth = width;
+            style.maxWidth = width;
+          } else {
+            style.minWidth = getColWidthStr(col, "minWidth") ?? width;
+            style.maxWidth = getColWidthStr(col, "maxWidth") ?? width;
+          }
+          const thStyle = {
+            ...style,
+            ...getFixedStyle(TagType.TH, col, depth),
+            textAlign: col.headerAlign
+          };
+          const tdStyle = {
+            ...style,
+            ...getFixedStyle(TagType.TD, col, depth),
+            textAlign: col.align
+          };
+          thMap.set(colKey, thStyle);
+          tdMap.set(colKey, tdStyle);
+        });
+      });
+      return {
+        [TagType.TH]: thMap,
+        [TagType.TD]: tdMap
       };
-      if (tagType === 1) {
-        style.textAlign = col.headerAlign;
-      } else if (tagType === 2) {
-        style.textAlign = col.align;
-      }
-      return style;
-    }
+    });
     function getHeaderTitle(col) {
       if (props.hideHeaderTitle === true || Array.isArray(props.hideHeaderTitle) && props.hideHeaderTitle.includes(col.dataIndex)) {
         return "";
@@ -1410,14 +1429,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     draggable: unref(isHeaderDraggable)(col) ? "true" : "false",
                     rowspan: unref(virtualX_on) ? 1 : col.rowSpan,
                     colspan: col.colSpan,
-                    style: normalizeStyle(getCellStyle(1, col, rowIndex)),
+                    style: normalizeStyle(cellStyleMap.value[unref(TagType).TH].get(colKeyGen(col))),
                     title: getHeaderTitle(col),
                     class: normalizeClass([
                       col.sorter ? "sortable" : "",
                       col.dataIndex === unref(sortCol) && unref(sortOrderIndex) !== 0 && "sorter-" + sortSwitchOrder[unref(sortOrderIndex)],
                       _ctx.showHeaderOverflow ? "text-overflow" : "",
                       col.headerClassName,
-                      unref(getFixedColClass)(col)
+                      unref(fixedColClassMap).get(colKeyGen(col))
                     ]),
                     onClick: (e) => {
                       onColumnSort(col);
@@ -1475,7 +1494,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(getCellStyle(2, col))
+                  style: normalizeStyle(cellStyleMap.value[unref(TagType).TD].get(colKeyGen(col)))
                 }, null, 4);
               }), 128)) : createCommentVNode("", true)
             ], 4)) : createCommentVNode("", true),
@@ -1502,8 +1521,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   return openBlock(), createElementBlock("td", {
                     key: col.dataIndex,
                     "data-index": col.dataIndex,
-                    class: normalizeClass([col.className, _ctx.showOverflow ? "text-overflow" : "", unref(getFixedColClass)(col)]),
-                    style: normalizeStyle(getCellStyle(2, col)),
+                    class: normalizeClass([col.className, _ctx.showOverflow ? "text-overflow" : "", unref(fixedColClassMap).get(colKeyGen(col))]),
+                    style: normalizeStyle(cellStyleMap.value[unref(TagType).TD].get(colKeyGen(col))),
                     onClick: (e) => onCellClick(e, row, col)
                   }, [
                     col.customCell ? (openBlock(), createBlock(resolveDynamicComponent(col.customCell), {

package/package.json

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

package/src/StkTable/StkTable.vue

@@ -60,14 +60,14 @@
                         :draggable="isHeaderDraggable(col) ? 'true' : 'false'"
                         :rowspan="virtualX_on ? 1 : col.rowSpan"
                         :colspan="col.colSpan"
-                        :style="getCellStyle(1, col, rowIndex)"
+                        :style="cellStyleMap[TagType.TH].get(colKeyGen(col))"
                         :title="getHeaderTitle(col)"
                         :class="[
                             col.sorter ? 'sortable' : '',
                             col.dataIndex === sortCol && sortOrderIndex !== 0 && 'sorter-' + sortSwitchOrder[sortOrderIndex],
                             showHeaderOverflow ? 'text-overflow' : '',
                             col.headerClassName,
-                            getFixedColClass(col),
+                            fixedColClassMap.get(colKeyGen(col)),
                         ]"
                         @click="
                             e => {
@@ -135,7 +135,7 @@
                     <!--这个td用于配合虚拟滚动的th对应，防止列错位-->
                     <td v-if="virtualX_on && fixedMode && headless" class="virtual-x-left" style="padding: 0"></td>
                     <template v-if="fixedMode && headless">
-                        <td v-for="col in virtualX_columnPart" :key="col.dataIndex" :style="getCellStyle(2, col)"></td
+                        <td v-for="col in virtualX_columnPart" :key="col.dataIndex" :style="cellStyleMap[TagType.TD].get(colKeyGen(col))"></td
                     ></template>
                 </tr>
                 <tr
@@ -161,8 +161,8 @@
                         v-for="col in virtualX_columnPart"
                         :key="col.dataIndex"
                         :data-index="col.dataIndex"
-                        :class="[col.className, showOverflow ? 'text-overflow' : '', getFixedColClass(col)]"
-                        :style="getCellStyle(2, col)"
+                        :class="[col.className, showOverflow ? 'text-overflow' : '', fixedColClassMap.get(colKeyGen(col))]"
+                        :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]" />
@@ -191,7 +191,7 @@
  */
 import { CSSProperties, computed, onMounted, ref, shallowRef, toRaw, watch } from 'vue';
 import { Default_Row_Height } from './const';
-import { Order, SortConfig, SortOption, SortState, StkTableColumn, UniqKeyProp } from './types/index';
+import { Order, SortConfig, SortOption, SortState, StkTableColumn, TagType, UniqKeyProp } from './types/index';
 import { useAutoResize } from './useAutoResize';
 import { useColResize } from './useColResize';
 import { useFixedCol } from './useFixedCol';
@@ -513,8 +513,9 @@ useKeyboardArrowScroll(tableContainer, {
 });
 
 /** 固定列处理 */
-const { getFixedColClass, dealFixedColShadow, updateFixedShadow } = useFixedCol({
+const { fixedColClassMap, dealFixedColShadow, updateFixedShadow } = useFixedCol({
     props,
+    colKeyGen,
     tableContainer,
     tableHeaderLast,
 });
@@ -668,47 +669,45 @@ function colKeyGen(col: StkTableColumn<DT>) {
     return typeof props.colKey === 'function' ? props.colKey(col) : (col as any)[props.colKey];
 }
 
-/** 获取列宽度样式 */
-function getColWidthStyle(col: StkTableColumn<DT>) {
-    const width = getColWidthStr(col);
-    const minWidth = getColWidthStr(col, 'minWidth');
-    const maxWidth = getColWidthStr(col, 'maxWidth');
-    const style: CSSProperties = {
-        width,
-        minWidth: minWidth ?? width,
-        maxWidth: maxWidth ?? width,
-    };
-    if (props.colResizable) {
-        style.minWidth = width;
-        style.maxWidth = width;
-    }
-
-    return style;
-}
+/** 单元格样式 */
+const cellStyleMap = computed(() => {
+    const thMap = new Map();
+    const tdMap = new Map();
+    tableHeaders.value.forEach((cols, depth) => {
+        cols.forEach(col => {
+            const colKey = colKeyGen(col);
+            const width = getColWidthStr(col);
+            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行内样式
- *
- * FIXME: col变化时仍从缓存拿style。watch col?
- * @param tagType 1-th 2-td
- * @param col
- * @param depth 表头层级
- */
-function getCellStyle(tagType: 1 | 2, col: StkTableColumn<DT>, depth?: number): CSSProperties {
-    const style: CSSProperties = {
-        ...getColWidthStyle(col),
-        ...getFixedStyle(tagType, col, depth),
+            const thStyle = {
+                ...style,
+                ...getFixedStyle(TagType.TH, col, depth),
+                textAlign: col.headerAlign,
+            };
+            const tdStyle = {
+                ...style,
+                ...getFixedStyle(TagType.TD, col, depth),
+                textAlign: col.align,
+            };
+
+            thMap.set(colKey, thStyle);
+            tdMap.set(colKey, tdStyle);
+        });
+    });
+    return {
+        [TagType.TH]: thMap,
+        [TagType.TD]: tdMap,
     };
-    if (tagType === 1) {
-        // TH
-        style.textAlign = col.headerAlign;
-    } else if (tagType === 2) {
-        // TD
-        style.textAlign = col.align;
-    }
-
-    return style;
-}
+});
 
 /** th title */
 function getHeaderTitle(col: StkTableColumn<DT>): string {

package/src/StkTable/types/index.ts

@@ -93,3 +93,9 @@ export type SortConfig<T extends Record<string, any>> = {
      */
     stringLocaleCompare?: boolean;
 };
+
+/** th td类型 */
+export const enum TagType {
+    TH,
+    TD,
+}

package/src/StkTable/useFixedCol.ts

@@ -1,8 +1,9 @@
-import { ref, Ref } from 'vue';
+import { computed, ref, Ref, shallowRef } from 'vue';
 import { StkTableColumn } from './types';
 
 type Params<T extends Record<string, any>> = {
     props: any;
+    colKeyGen: (col: StkTableColumn<T>) => string;
     tableHeaderLast: Ref<StkTableColumn<T>[]>;
     tableContainer: Ref<HTMLDivElement | undefined>;
 };
@@ -11,7 +12,7 @@ type Params<T extends Record<string, any>> = {
  * 固定列处理
  * @returns
  */
-export function useFixedCol<DT extends Record<string, any>>({ props, tableHeaderLast, tableContainer }: Params<DT>) {
+export function useFixedCol<DT extends Record<string, any>>({ props, colKeyGen, tableHeaderLast, tableContainer }: Params<DT>) {
     /** 固定列阴影 */
     const fixedShadow = ref<{
         /** 是否展示左侧固定列阴影 */
@@ -23,12 +24,31 @@ export function useFixedCol<DT extends Record<string, any>>({ props, tableHeader
         showR: false,
     });
     /** 保存需要出现阴影的列 */
-    let fixedShadowCols: StkTableColumn<DT>[] = [];
+    const fixedShadowCols = shallowRef<StkTableColumn<DT>[]>([]);
+
+    const fixedColClassMap = computed(() => {
+        const colMap = new Map();
+        props.columns.forEach((col: any) => {
+            const { showR, showL } = fixedShadow.value;
+            const showShadow =
+                props.fixedColShadow &&
+                col.fixed &&
+                ((showL && col.fixed === 'left') || (showR && col.fixed === 'right')) &&
+                fixedShadowCols.value.includes(col);
+            const classObj = {
+                'fixed-cell': col.fixed,
+                ['fixed-cell--' + col.fixed]: col.fixed,
+                'fixed-cell--shadow': showShadow,
+            };
+            colMap.set(colKeyGen(col), classObj);
+        });
+        return colMap;
+    });
 
     /** 处理固定列阴影 */
     function dealFixedColShadow() {
         if (!props.fixedColShadow) return;
-        fixedShadowCols = [];
+        fixedShadowCols.value = [];
         // 找到最右边的固定列 findLast
         let lastLeftCol = null;
         for (let i = tableHeaderLast.value.length - 1; i >= 0; i--) {
@@ -42,7 +62,7 @@ export function useFixedCol<DT extends Record<string, any>>({ props, tableHeader
         let node: any = { __PARENT__: lastLeftCol };
         while ((node = node.__PARENT__)) {
             if (node.fixed) {
-                fixedShadowCols.push(node);
+                fixedShadowCols.value.push(node);
             }
         }
 
@@ -51,27 +71,11 @@ export function useFixedCol<DT extends Record<string, any>>({ props, tableHeader
         node = { __PARENT__: lastRightCol };
         while ((node = node.__PARENT__)) {
             if (node.fixed) {
-                fixedShadowCols.push(node);
+                fixedShadowCols.value.push(node);
             }
         }
     }
 
-    /** 固定列class */
-    function getFixedColClass(col: StkTableColumn<DT>): Record<string, boolean> {
-        const { showR, showL } = fixedShadow.value;
-        const showShadow =
-            props.fixedColShadow &&
-            col.fixed &&
-            ((showL && col.fixed === 'left') || (showR && col.fixed === 'right')) &&
-            fixedShadowCols.includes(col);
-        const classObj = {
-            'fixed-cell': col.fixed,
-            ['fixed-cell--' + col.fixed]: col.fixed,
-            'fixed-cell--shadow': showShadow,
-        };
-        return classObj;
-    }
-
     /** 滚动条变化时，更新需要展示阴影的列 */
     function updateFixedShadow() {
         if (!props.fixedColShadow) return;
@@ -82,7 +86,7 @@ export function useFixedCol<DT extends Record<string, any>>({ props, tableHeader
 
     return {
         /** 固定列class */
-        getFixedColClass,
+        fixedColClassMap,
         /** 处理固定列阴影 */
         dealFixedColShadow,
         /** 滚动条变化时，更新需要展示阴影的列 */

package/src/StkTable/useFixedStyle.ts

@@ -1,6 +1,6 @@
 import { CSSProperties, Ref, computed } from 'vue';
 import { Is_Legacy_Mode } from './const';
-import { StkTableColumn } from './types';
+import { StkTableColumn, TagType } from './types';
 import { VirtualScrollStore, VirtualScrollXStore } from './useVirtualScroll';
 import { getColWidth } from './utils';
 
@@ -64,24 +64,25 @@ export function useFixedStyle<DT extends Record<string, any>>({
 
         return { refStore, colKeyStore };
     });
+
     /**
      * 固定列的style
      * @param tagType 1-th 2-td
      * @param col
      * @param depth 深度。tagType = 1时使用
      */
-    function getFixedStyle(tagType: 1 | 2, col: StkTableColumn<any>, depth = 0): CSSProperties {
+    function getFixedStyle(tagType: TagType, col: StkTableColumn<DT>, depth = 0): CSSProperties {
         const { fixed } = col;
         const isFixedLeft = fixed === 'left';
         const style: CSSProperties = {};
         const { colKeyStore, refStore } = fixedColumnsPositionStore.value;
-        // TD
+
         if (Is_Legacy_Mode) {
             style.position = 'relative';
         } else {
             style.position = 'sticky';
         }
-        if (tagType === 1) {
+        if (tagType === TagType.TH) {
             // TH
             if (Is_Legacy_Mode) {
                 style.top = virtualScroll.value.scrollTop + depth * props.rowHeight + 'px';
@@ -90,6 +91,7 @@ export function useFixedStyle<DT extends Record<string, any>>({
             }
             style.zIndex = isFixedLeft ? '5' : '4'; // 保证固定列高于其他单元格
         } else {
+            // TD
             style.zIndex = isFixedLeft ? '3' : '2';
         }
 

package/src/StkTable/useHighlight.ts

@@ -114,16 +114,17 @@ export function useHighlight({ props, tableContainer }: Params) {
     /**
      * 高亮一行
      * @param rowKeyValues
+     * @param option.useCss 虚拟滚动时，高亮由js控制。如果仍想使用css 关键帧控制，则配置此项
      */
-    function setHighlightDimRow(rowKeyValues: UniqKey[]) {
+    function setHighlightDimRow(rowKeyValues: UniqKey[], option: { useCss?: boolean } = {}) {
         if (!Array.isArray(rowKeyValues)) rowKeyValues = [rowKeyValues];
-        if (props.virtual) {
+        if (props.virtual && !option.useCss) {
             // --------虚拟滚动用js计算颜色渐变的高亮方案
             const nowTs = Date.now(); // 重置渐变进度
             for (let i = 0; i < rowKeyValues.length; i++) {
                 const rowKeyValue = rowKeyValues[i];
                 highlightRowStore.value[rowKeyValue] = {
-                    bgc: '',
+                    bgc: highlightFrom.value,
                     bgc_progress: 0,
                     bgc_progress_ms: nowTs,
                 };