stk-table-vue 0.2.5 → 0.2.7

package/README.md

@@ -40,7 +40,8 @@ repo:
 * [] 非虚拟滚动时，大数据分批加载。
 * [x] vue2.7支持（引入源码使用）。
   - [x] `props.optimizeVue2Scroll` 优化vue2虚拟滚动流畅度。
-* [] `props.emptyCellText` 支持传入函数。
+* [x] `props.emptyCellText` 支持传入函数。
+* [] 支持配置高亮参数。
 
 
 ## Usage
@@ -135,7 +136,7 @@ export type StkProps = {
   /** 列唯一键 */
   colKey?: UniqKeyProp;
   /** 空值展示文字 */
-  emptyCellText?: string;
+  emptyCellText?: string | ((option: { row: DT; col: StkTableColumn<DT> }) => string);
   /** 暂无数据兜底高度是否撑满 */
   noDataFull?: boolean;
   /** 是否展示暂无数据 */
@@ -148,8 +149,6 @@ export type StkProps = {
   showOverflow?: boolean;
   /** 是否增加行hover class */
   showTrHoverClass?: boolean;
-  /** 表头是否可拖动 */
-  headerDrag?: boolean;
   /** 表头是否可拖动。支持回调函数。 */
   headerDrag?: boolean | ((col: StkTableColumn<DT>) => boolean);
   /**
@@ -348,6 +347,30 @@ export type StkTableColumn<T extends Record<string, any>> = {
 ```
 
 
+### StkTableColumn.SortConfig
+```ts
+/** 排序配置 */
+export type SortConfig<T extends Record<string, any>> = {
+    /** 空值始终排在列表末尾 */
+    emptyToBottom?: boolean;
+    /**
+     * 默认排序（1.初始化时触发 2.排序方向为null时触发)
+     * 类似onMounted时，调用setSorter点了下表头。
+     */
+    defaultSort?: {
+        dataIndex: keyof T;
+        order: Order;
+        /** 是否禁止触发sort-change事件。默认false，表示触发事件。 */
+        silent?: boolean;
+    };
+    /**
+     * string排序是否使用 String.prototype.localCompare
+     * 默认true (&$&应该false)
+     */
+    stringLocaleCompare?: boolean;
+};
+```
+
 ### Example
 ```vue
 <template>
@@ -420,3 +443,7 @@ export type StkTableColumn<T extends Record<string, any>> = {
 ### 鼠标悬浮表头时，不展示title
 * 将 `StkTableColumn` 中的 `title` 字段置为 "" 空字符串。这样th中就没有title了。
 * 使用 `StkTableColumn` 中的 `customHeaderCell` 属性中，自定义表头渲染。
+
+
+## Other
+* `$*$` 兼容注释

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

@@ -16,9 +16,11 @@ declare function setCurrentRow(rowKey: string, option?: {
  * @param option.sortOption 指定排序参数。同 StkTableColumn 中排序相关字段。建议从columns中find得到。
  * @param option.sort 是否触发排序-默认true
  * @param option.silent 是否禁止触发回调-默认true
+ * @param option.force 是否触发排序-默认true
  */
 declare function setSorter(dataIndex: string, order: Order, option?: {
     sortOption?: SortOption<DT>;
+    force?: boolean;
     silent?: boolean;
     sort?: boolean;
 }): any[];
@@ -65,7 +67,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /** 列唯一键 */
     colKey?: UniqKeyProp | undefined;
     /** 空值展示文字 */
-    emptyCellText?: string | undefined;
+    emptyCellText?: string | ((option: {
+        row: any;
+        col: StkTableColumn<any>;
+    }) => string) | undefined;
     /** 暂无数据兜底高度是否撑满 */
     noDataFull?: boolean | undefined;
     /** 是否展示暂无数据 */
@@ -163,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>;
     /** 获取当前排序状态 */
@@ -225,7 +232,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /** 列唯一键 */
     colKey?: UniqKeyProp | undefined;
     /** 空值展示文字 */
-    emptyCellText?: string | undefined;
+    emptyCellText?: string | ((option: {
+        row: any;
+        col: StkTableColumn<any>;
+    }) => string) | undefined;
     /** 暂无数据兜底高度是否撑满 */
     noDataFull?: boolean | undefined;
     /** 是否展示暂无数据 */
@@ -345,7 +355,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     dataSource: any[];
     rowKey: UniqKeyProp;
     colKey: UniqKeyProp;
-    emptyCellText: string;
+    emptyCellText: string | ((option: {
+        row: any;
+        col: StkTableColumn<any>;
+    }) => string);
     noDataFull: boolean;
     showNoData: boolean;
     sortRemote: boolean;

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

@@ -78,10 +78,15 @@ export type UniqKeyProp = UniqKey | UniqKeyFun;
 export type SortConfig<T extends Record<string, any>> = {
     /** 空值始终排在列表末尾 */
     emptyToBottom?: boolean;
-    /** 默认排序（1.初始化时触发 2.排序方向为null时触发) */
+    /**
+     * 默认排序（1.初始化时触发 2.排序方向为null时触发)
+     * 类似onMounted时，调用setSorter点了下表头。
+     */
     defaultSort?: {
         dataIndex: keyof T;
         order: Order;
+        /** 是否禁止触发sort-change事件。默认false，表示触发事件。 */
+        silent?: boolean;
     };
     /**
      * string排序是否使用 String.prototype.localCompare
@@ -89,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 {
@@ -499,6 +508,7 @@ function useHighlight({ props, tableContainer }) {
             highlightDimRowKeys.delete(rowKeyValue);
           }
         });
+        highlightRowStore.value = { ...highlightRowStore.value };
         if (highlightDimRowKeys.size > 0) {
           recursion();
         } else {
@@ -527,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
         };
@@ -954,7 +964,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     dataSource: { default: () => [] },
     rowKey: { type: [String, Number, Function], default: "" },
     colKey: { type: [String, Number, Function], default: "dataIndex" },
-    emptyCellText: { default: "--" },
+    emptyCellText: { type: [String, Function], default: "--" },
     noDataFull: { type: Boolean, default: false },
     showNoData: { type: Boolean, default: true },
     sortRemote: { type: Boolean, default: false },
@@ -990,6 +1000,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const tableHeaders = ref([]);
     const tableHeaderLast = ref([]);
     const dataSourceCopy = shallowRef([...props.dataSource]);
+    const getEmptyCellText = computed(() => {
+      if (typeof props.emptyCellText === "string") {
+        return () => props.emptyCellText;
+      } else {
+        return (col, row) => props.emptyCellText({ row, col });
+      }
+    });
     const rowKeyGenStore = /* @__PURE__ */ new WeakMap();
     const { isColResizing, onThResizeMouseDown } = useColResize({
       props,
@@ -1034,8 +1051,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       virtualScrollX,
       tableHeaders
     });
-    const { getFixedColClass, dealFixedColShadow, updateFixedShadow } = useFixedCol({
+    const { fixedColClassMap, dealFixedColShadow, updateFixedShadow } = useFixedCol({
       props,
+      colKeyGen,
       tableContainer,
       tableHeaderLast
     });
@@ -1080,8 +1098,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function dealDefaultSorter() {
       if (!props.sortConfig.defaultSort)
         return;
-      const { dataIndex, order } = props.sortConfig.defaultSort;
-      setSorter(dataIndex, order);
+      const { dataIndex, order, silent } = { silent: false, ...props.sortConfig.defaultSort };
+      setSorter(dataIndex, order, { force: false, silent });
     }
     function dealColumns() {
       tableHeaders.value = [];
@@ -1149,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 "";
@@ -1288,7 +1315,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (newOption.sort && ((_a = dataSourceCopy.value) == null ? void 0 : _a.length)) {
         const column = newOption.sortOption || tableHeaderLast.value.find((it) => it.dataIndex === sortCol.value);
         if (column)
-          onColumnSort(column, false, { force: true, emit: !newOption.silent });
+          onColumnSort(column, false, { force: option.force ?? true, emit: !newOption.silent });
         else
           console.warn("Can not find column by dataIndex:", sortCol.value);
       }
@@ -1402,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);
@@ -1467,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),
@@ -1494,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), {
@@ -1507,7 +1534,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       key: 1,
                       class: "table-cell-wrapper",
                       title: row[col.dataIndex]
-                    }, toDisplayString(row[col.dataIndex] ?? _ctx.emptyCellText), 9, _hoisted_14))
+                    }, toDisplayString(row[col.dataIndex] ?? getEmptyCellText.value(col, row)), 9, _hoisted_14))
                   ], 14, _hoisted_13);
                 }), 128))
               ], 46, _hoisted_11);

package/package.json

@@ -1,61 +1,61 @@
-{
-    "name": "stk-table-vue",
-    "version": "0.2.5",
-    "description": "Simple realtime virtual table for vue3&vue2.7",
-    "main": "./lib/stk-table-vue.js",
-    "types": "./lib/StkTable/index.d.ts",
-    "packageManager": "pnpm@8.14.3",
-    "directories": {
-        "test": "test"
-    },
-    "type": "module",
-    "scripts": {
-        "dev": "vite",
-        "build": "vite build",
-        "test": "vitest"
-    },
-    "keywords": [
-        "virtual table",
-        "vue",
-        "highlight",
-        "sticky"
-    ],
-    "files": [
-        "lib",
-        "src"
-    ],
-    "author": "japlus",
-    "repository": {
-        "type": "git",
-        "url": "https://gitee.com/japlus/stk-table-vue"
-    },
-    "license": "MIT",
-    "devDependencies": {
-        "@types/d3-interpolate": "^3.0.4",
-        "@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",
-        "@vue/test-utils": "2.4.4",
-        "eslint": "^8.55.0",
-        "eslint-config-prettier": "^9.1.0",
-        "eslint-plugin-html": "^7.1.0",
-        "eslint-plugin-prettier": "^5.0.1",
-        "eslint-plugin-vue": "^9.19.2",
-        "happy-dom": "^12.10.3",
-        "less": "^4.2.0",
-        "postcss-discard-comments": "^6.0.1",
-        "postcss-preset-env": "^9.3.0",
-        "prettier": "^3.1.1",
-        "typescript": "^5.3.3",
-        "vite": "^5.1.4",
-        "vite-plugin-dts": "^3.7.3",
-        "vitest": "^1.1.0",
-        "vue": "^3.4.19",
-        "vue-eslint-parser": "^9.3.2"
-    },
-    "dependencies": {
-        "d3-interpolate": "^3.0.1"
-    }
+{
+    "name": "stk-table-vue",
+    "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",
+    "packageManager": "pnpm@8.14.3",
+    "directories": {
+        "test": "test"
+    },
+    "type": "module",
+    "scripts": {
+        "dev": "vite",
+        "build": "vite build",
+        "test": "vitest"
+    },
+    "keywords": [
+        "virtual table",
+        "vue",
+        "highlight",
+        "sticky"
+    ],
+    "files": [
+        "lib",
+        "src"
+    ],
+    "author": "japlus",
+    "repository": {
+        "type": "git",
+        "url": "https://gitee.com/japlus/stk-table-vue"
+    },
+    "license": "MIT",
+    "devDependencies": {
+        "@types/d3-interpolate": "^3.0.4",
+        "@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",
+        "@vue/test-utils": "2.4.4",
+        "eslint": "^8.55.0",
+        "eslint-config-prettier": "^9.1.0",
+        "eslint-plugin-html": "^7.1.0",
+        "eslint-plugin-prettier": "^5.0.1",
+        "eslint-plugin-vue": "^9.19.2",
+        "happy-dom": "^12.10.3",
+        "less": "^4.2.0",
+        "postcss-discard-comments": "^6.0.1",
+        "postcss-preset-env": "^9.3.0",
+        "prettier": "^3.1.1",
+        "typescript": "^5.3.3",
+        "vite": "^5.1.4",
+        "vite-plugin-dts": "^3.7.3",
+        "vitest": "^1.1.0",
+        "vue": "^3.4.19",
+        "vue-eslint-parser": "^9.3.2"
+    },
+    "dependencies": {
+        "d3-interpolate": "^3.0.1"
+    }
 }

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,13 +161,13 @@
                         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]" />
                         <div v-else class="table-cell-wrapper" :title="row[col.dataIndex]">
-                            {{ row[col.dataIndex] ?? emptyCellText }}
+                            {{ row[col.dataIndex] ?? getEmptyCellText(col, row) }}
                         </div>
                     </td>
                 </tr>
@@ -189,9 +189,9 @@
  * [] 计算的高亮颜色，挂在数据源上对象上，若多个表格使用同一个数据源对象会有问题。需要深拷贝。(解决方案：获取组件uid)
  * [] highlight-row 颜色不能恢复到active的颜色
  */
-import { CSSProperties, onMounted, ref, shallowRef, toRaw, watch } from 'vue';
+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';
@@ -239,7 +239,7 @@ const props = withDefaults(
         /** 列唯一键 */
         colKey?: UniqKeyProp;
         /** 空值展示文字 */
-        emptyCellText?: string; //TODO: 支持传入方法
+        emptyCellText?: string | ((option: { row: DT; col: StkTableColumn<DT> }) => string);
         /** 暂无数据兜底高度是否撑满 */
         noDataFull?: boolean;
         /** 是否展示暂无数据 */
@@ -258,7 +258,7 @@ const props = withDefaults(
          * 给行附加className<br>
          * FIXME: 是否需要优化，因为不传此prop会使表格行一直执行空函数，是否有影响
          */
-        rowClassName?: (row: any, i: number) => string;
+        rowClassName?: (row: DT, i: number) => string;
         /**
          * 列宽是否可拖动<br>
          * **不要设置**列minWidth，**必须**设置width<br>
@@ -446,6 +446,15 @@ const dataSourceCopy = shallowRef<DT[]>([...props.dataSource]);
 /**高亮帧间隔 
 const highlightStepDuration = Highlight_Color_Change_Freq / 1000 + 's';*/
 
+/** 空单元格占位字符 */
+const getEmptyCellText = computed(() => {
+    if (typeof props.emptyCellText === 'string') {
+        return () => props.emptyCellText;
+    } else {
+        return (col: StkTableColumn<DT>, row: DT) => (props.emptyCellText as any)({ row, col });
+    }
+});
+
 /** rowKey缓存 */
 const rowKeyGenStore = new WeakMap();
 
@@ -504,8 +513,9 @@ useKeyboardArrowScroll(tableContainer, {
 });
 
 /** 固定列处理 */
-const { getFixedColClass, dealFixedColShadow, updateFixedShadow } = useFixedCol({
+const { fixedColClassMap, dealFixedColShadow, updateFixedShadow } = useFixedCol({
     props,
+    colKeyGen,
     tableContainer,
     tableHeaderLast,
 });
@@ -558,8 +568,8 @@ onMounted(() => {
 /** 处理默认排序 */
 function dealDefaultSorter() {
     if (!props.sortConfig.defaultSort) return;
-    const { dataIndex, order } = props.sortConfig.defaultSort;
-    setSorter(dataIndex as string, order);
+    const { dataIndex, order, silent } = { silent: false, ...props.sortConfig.defaultSort };
+    setSorter(dataIndex as string, order, { force: false, silent });
 }
 
 /**
@@ -659,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 {
@@ -859,8 +867,9 @@ function setCurrentRow(rowKey: string, option = { silent: false }) {
  * @param option.sortOption 指定排序参数。同 StkTableColumn 中排序相关字段。建议从columns中find得到。
  * @param option.sort 是否触发排序-默认true
  * @param option.silent 是否禁止触发回调-默认true
+ * @param option.force 是否触发排序-默认true
  */
-function setSorter(dataIndex: string, order: Order, option: { sortOption?: SortOption<DT>; silent?: boolean; sort?: boolean } = {}) {
+function setSorter(dataIndex: string, order: Order, option: { sortOption?: SortOption<DT>; force?: boolean; silent?: boolean; sort?: boolean } = {}) {
     const newOption = { silent: true, sortOption: null, sort: true, ...option };
     sortCol.value = dataIndex;
     sortOrderIndex.value = sortSwitchOrder.indexOf(order);
@@ -868,7 +877,7 @@ function setSorter(dataIndex: string, order: Order, option: { sortOption?: SortO
     if (newOption.sort && dataSourceCopy.value?.length) {
         // 如果表格有数据，则进行排序
         const column = newOption.sortOption || tableHeaderLast.value.find(it => it.dataIndex === sortCol.value);
-        if (column) onColumnSort(column, false, { force: true, emit: !newOption.silent });
+        if (column) onColumnSort(column, false, { force: option.force ?? true, emit: !newOption.silent });
         else console.warn('Can not find column by dataIndex:', sortCol.value);
     }
     return dataSourceCopy.value;

package/src/StkTable/types/index.ts

@@ -77,10 +77,15 @@ export type UniqKeyProp = UniqKey | UniqKeyFun;
 export type SortConfig<T extends Record<string, any>> = {
     /** 空值始终排在列表末尾 */
     emptyToBottom?: boolean;
-    /** 默认排序（1.初始化时触发 2.排序方向为null时触发) */
+    /**
+     * 默认排序（1.初始化时触发 2.排序方向为null时触发)
+     * 类似onMounted时，调用setSorter点了下表头。
+     */
     defaultSort?: {
         dataIndex: keyof T;
         order: Order;
+        /** 是否禁止触发sort-change事件。默认false，表示触发事件。 */
+        silent?: boolean;
     };
     /**
      * string排序是否使用 String.prototype.localCompare
@@ -88,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

@@ -76,6 +76,9 @@ export function useHighlight({ props, tableContainer }: Params) {
                     }
                 });
 
+                // $*$ 兼容vue2响应
+                highlightRowStore.value = { ...highlightRowStore.value };
+
                 if (highlightDimRowKeys.size > 0) {
                     // 还有高亮的行,则下一次循环
                     recursion();
@@ -111,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,
                 };