stk-table-vue 0.4.13 → 0.4.14

package/README.md

@@ -139,7 +139,7 @@ export type StkProps = {
   rowHover?: boolean;
   /** 是否高亮选中的行 */
   rowActive?: boolean;
-  /** 当前行再次点击否可以取消 */
+  /** 当前行再次点击否可以取消 (rowActive=true)*/
   rowCurrentRevokable?: boolean;
   /** 表头行高。default = rowHeight */
   headerRowHeight?: number | null;
@@ -169,9 +169,12 @@ export type StkProps = {
   showOverflow?: boolean;
   /** 是否增加行hover class */
   showTrHoverClass?: boolean;
- 
   /** 是否高亮鼠标悬浮的单元格 */
   cellHover?: boolean;
+  /** 是否高亮选中的单元格 */
+  cellActive?: boolean;
+  /** 单元格再次点击否可以取消选中 (cellActive=true)*/
+  selectedCellRevokable?: boolean;
   /** 表头是否可拖动。支持回调函数。 */
   headerDrag?: boolean | ((col: StkTableColumn<DT>) => boolean);
   /**
@@ -272,6 +275,11 @@ export type StkProps = {
      * ```(ev: MouseEvent | null, row: DT | undefined,, data: { select: boolean })```
      */
     (e: 'current-change', ev: MouseEvent | null, row: DT | undefined,, data: { select: boolean }): void;
+    /**
+     * 选中单元格触发。ev返回null表示不是点击事件触发的
+     * ```(ev: MouseEvent | null, data: { select: boolean; row: DT | undefined; col: StkTableColumn<DT> | null })```
+     */
+    (e: 'cell-selected', ev: MouseEvent | null, data: { select: boolean; row: DT | undefined; col: StkTableColumn<DT> | null }): void;
     /**
      * 行双击事件
      * ```(ev: MouseEvent, row: DT)```
@@ -357,6 +365,8 @@ defineExpose({
   initVirtualScrollY,
   /** 设置当前选中行 */
   setCurrentRow,
+  /** 设置当前选中单元格 (props.cellActive=true)*/
+  setSelectedCell,
   /** 设置高亮渐暗单元格 */
   setHighlightDimCell,
   /** 设置高亮渐暗行 */
@@ -602,6 +612,9 @@ export type SortConfig<T extends Record<string, any>> = {
 ### props.autoResize
 * 手动设置为 `props.autoResize=false`。可取消监听的性能消耗。适用于宽度高度不变的表格。
 
+### props.smoothScroll
+* 高版本浏览器滚动默认有惯性。会频繁触发 `onscroll` 回调。因此 chrome > 85 默认关闭，使用 `onwheel` 代理滚动，且可防止滚动白屏。
+
 ## Tips
 ### props.fixedMode
 * **低版本浏览器** 需要设置 `props.width`（default: width=fit-content不生效）。否则列宽不设宽度会变为0。

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

@@ -3,13 +3,22 @@ import { HighlightConfig, Order, SeqConfig, SortConfig, SortOption, SortState, S
 /** Generic stands for DataType */
 type DT = any;
 /**
- * 选中一行，
+ * 选中一行
  * @param {string} rowKeyOrRow selected rowKey, undefined to unselect
  * @param {boolean} option.silent if emit current-change. default:false(not emit `current-change`)
  */
 declare function setCurrentRow(rowKeyOrRow: string | undefined | DT, option?: {
     silent: boolean;
 }): void;
+/**
+ * set highlight active cell (props.cellActive=true)
+ * @param row row if undefined, clear highlight
+ * @param col column
+ * @param option.silent if emit current-change. default:false(not emit `current-change`)
+ */
+declare function setSelectedCell(row?: DT, col?: StkTableColumn<DT>, option?: {
+    silent: boolean;
+}): void;
 /**
  * 设置表头排序状态
  * @param dataIndex 列字段
@@ -57,7 +66,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
     rowHover?: boolean | undefined;
     /** 是否高亮选中的行 */
     rowActive?: boolean | undefined;
-    /** 当前行再次点击否可以取消 */
+    /** 当前行再次点击否可以取消 (rowActive=true)*/
     rowCurrentRevokable?: boolean | undefined;
     /** 表头行高。default = rowHeight */
     headerRowHeight?: number | null | undefined;
@@ -92,6 +101,10 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
     showTrHoverClass?: boolean | undefined;
     /** 是否高亮鼠标悬浮的单元格 */
     cellHover?: boolean | undefined;
+    /** 是否高亮选中的单元格 */
+    cellActive?: boolean | undefined;
+    /** 单元格再次点击否可以取消选中 (cellActive=true)*/
+    selectedCellRevokable?: boolean | undefined;
     /** 表头是否可拖动。支持回调函数。 */
     headerDrag?: boolean | ((col: StkTableColumn<any>) => boolean) | undefined;
     /**
@@ -176,6 +189,8 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
     showOverflow: boolean;
     showTrHoverClass: boolean;
     cellHover: boolean;
+    cellActive: boolean;
+    selectedCellRevokable: boolean;
     headerDrag: boolean;
     rowClassName: () => "";
     colResizable: boolean;
@@ -194,22 +209,24 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
     cellFixedMode: string;
     smoothScroll: boolean;
 }>, {
-    /** 初始化横向纵向虚拟滚动 */
+    /** @see {@link initVirtualScroll} */
     initVirtualScroll: (height?: number | undefined) => void;
-    /** 初始化横向虚拟滚动 */
+    /** @see {@link initVirtualScrollX} */
     initVirtualScrollX: () => void;
-    /** 初始化纵向虚拟滚动 */
+    /** @see {@link initVirtualScrollY} */
     initVirtualScrollY: (height?: number | undefined) => void;
-    /** 设置当前选中行 */
+    /** @see {@link setCurrentRow} */
     setCurrentRow: typeof setCurrentRow;
-    /** 设置高亮渐暗单元格 */
+    /** @see {@link setSelectedCell} */
+    setSelectedCell: typeof setSelectedCell;
+    /** @see {@link setHighlightDimCell} */
     setHighlightDimCell: (rowKeyValue: import('./types/index').UniqKey, dataIndex: string, option?: {
         className?: string | undefined;
         method?: "animation" | "css" | undefined;
         keyframe?: Keyframe[] | PropertyIndexedKeyframes | null | undefined;
         duration?: number | undefined;
     }) => void;
-    /** 设置高亮渐暗行 */
+    /** @see {@link setHighlightDimRow} */
     setHighlightDimRow: (rowKeyValues: import('./types/index').UniqKey[], option?: {
         method?: "animation" | "css" | "js" | undefined;
         useCss?: boolean | undefined;
@@ -219,15 +236,15 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
     }) => void;
     /** 表格排序列dataIndex */
     sortCol: import('vue').Ref<string | number | symbol | undefined>;
-    /** 获取当前排序状态 */
+    /** @see {@link getSortColumns} */
     getSortColumns: typeof getSortColumns;
-    /** 设置排序 */
+    /** @see {@link setSorter} */
     setSorter: typeof setSorter;
-    /** 重置排序 */
+    /** @see {@link resetSorter} */
     resetSorter: typeof resetSorter;
-    /** 滚动至 */
+    /** @see {@link scrollTo} */
     scrollTo: typeof scrollTo;
-    /** 获取表格数据 */
+    /** @see {@link getTableData} */
     getTableData: typeof getTableData;
 }, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "sort-change": (col: StkTableColumn<any> | null, order: Order, data: any[], sortConfig: SortConfig<any>) => void;
@@ -235,6 +252,11 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
     "current-change": (ev: MouseEvent | null, row: any, data: {
         select: boolean;
     }) => void;
+    "cell-selected": (ev: MouseEvent | null, data: {
+        select: boolean;
+        row: any;
+        col: StkTableColumn<any> | undefined;
+    }) => void;
     "row-dblclick": (ev: MouseEvent, row: any) => void;
     "header-row-menu": (ev: MouseEvent) => void;
     "row-menu": (ev: MouseEvent, row: any) => void;
@@ -251,6 +273,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
     "col-order-change": (dragStartKey: string, targetColKey: string) => void;
     "th-drag-start": (dragStartKey: string) => void;
     "th-drop": (targetColKey: string) => void;
+    "col-resize": (cols: StkTableColumn<any>) => void;
     "update:columns": (cols: StkTableColumn<any>[]) => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     width?: string | undefined;
@@ -272,7 +295,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
     rowHover?: boolean | undefined;
     /** 是否高亮选中的行 */
     rowActive?: boolean | undefined;
-    /** 当前行再次点击否可以取消 */
+    /** 当前行再次点击否可以取消 (rowActive=true)*/
     rowCurrentRevokable?: boolean | undefined;
     /** 表头行高。default = rowHeight */
     headerRowHeight?: number | null | undefined;
@@ -307,6 +330,10 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
     showTrHoverClass?: boolean | undefined;
     /** 是否高亮鼠标悬浮的单元格 */
     cellHover?: boolean | undefined;
+    /** 是否高亮选中的单元格 */
+    cellActive?: boolean | undefined;
+    /** 单元格再次点击否可以取消选中 (cellActive=true)*/
+    selectedCellRevokable?: boolean | undefined;
     /** 表头是否可拖动。支持回调函数。 */
     headerDrag?: boolean | ((col: StkTableColumn<any>) => boolean) | undefined;
     /**
@@ -391,6 +418,8 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
     showOverflow: boolean;
     showTrHoverClass: boolean;
     cellHover: boolean;
+    cellActive: boolean;
+    selectedCellRevokable: boolean;
     headerDrag: boolean;
     rowClassName: () => "";
     colResizable: boolean;
@@ -414,6 +443,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
         endIndex: number;
     }) => any) | undefined;
     "onUpdate:columns"?: ((cols: StkTableColumn<any>[]) => any) | undefined;
+    "onCol-resize"?: ((cols: StkTableColumn<any>) => any) | undefined;
     "onTh-drag-start"?: ((dragStartKey: string) => any) | undefined;
     "onCol-order-change"?: ((dragStartKey: string, targetColKey: string) => any) | undefined;
     "onTh-drop"?: ((targetColKey: string) => any) | undefined;
@@ -422,6 +452,11 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
     "onCurrent-change"?: ((ev: MouseEvent | null, row: any, data: {
         select: boolean;
     }) => any) | undefined;
+    "onCell-selected"?: ((ev: MouseEvent | null, data: {
+        select: boolean;
+        row: any;
+        col: StkTableColumn<any> | undefined;
+    }) => any) | undefined;
     "onRow-dblclick"?: ((ev: MouseEvent, row: any) => any) | undefined;
     "onHeader-row-menu"?: ((ev: MouseEvent) => any) | undefined;
     "onRow-menu"?: ((ev: MouseEvent, row: any) => any) | undefined;
@@ -461,6 +496,8 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
     showOverflow: boolean;
     showTrHoverClass: boolean;
     cellHover: boolean;
+    cellActive: boolean;
+    selectedCellRevokable: boolean;
     headerDrag: boolean | ((col: StkTableColumn<any>) => boolean);
     rowClassName: (row: any, i: number) => string;
     colResizable: boolean;

package/lib/stk-table-vue.js

@@ -362,6 +362,7 @@ function useColResize({
       return;
     curCol.width = width + "px";
     emits("update:columns", [...props.columns]);
+    emits("col-resize", { ...curCol });
     if (colResizeIndicatorRef.value) {
       const style = colResizeIndicatorRef.value.style;
       style.display = "none";
@@ -1177,7 +1178,7 @@ const _hoisted_12 = {
   key: 0,
   class: "vt-x-left"
 };
-const _hoisted_13 = ["data-index", "onClick", "onMouseenter", "onMouseleave", "onMouseover"];
+const _hoisted_13 = ["data-index", "cell-key", "onClick", "onMouseenter", "onMouseleave", "onMouseover"];
 const _hoisted_14 = ["title"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "StkTable",
@@ -1208,6 +1209,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     showOverflow: { type: Boolean, default: false },
     showTrHoverClass: { type: Boolean, default: false },
     cellHover: { type: Boolean, default: false },
+    cellActive: { type: Boolean, default: false },
+    selectedCellRevokable: { type: Boolean, default: true },
     headerDrag: { type: [Boolean, Function], default: false },
     rowClassName: { type: Function, default: () => "" },
     colResizable: { type: Boolean, default: false },
@@ -1226,7 +1229,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     cellFixedMode: { default: "sticky" },
     smoothScroll: { type: Boolean, default: DEFAULT_SMOOTH_SCROLL }
   },
-  emits: ["sort-change", "row-click", "current-change", "row-dblclick", "header-row-menu", "row-menu", "cell-click", "cell-mouseenter", "cell-mouseleave", "cell-mouseover", "header-cell-click", "scroll", "scroll-x", "col-order-change", "th-drag-start", "th-drop", "update:columns"],
+  emits: ["sort-change", "row-click", "current-change", "cell-selected", "row-dblclick", "header-row-menu", "row-menu", "cell-click", "cell-mouseenter", "cell-mouseleave", "cell-mouseover", "header-cell-click", "scroll", "scroll-x", "col-order-change", "th-drag-start", "th-drop", "col-resize", "update:columns"],
   setup(__props, { expose: __expose, emit: __emit }) {
     const stkTableId = createStkTableId();
     const props = __props;
@@ -1236,7 +1239,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const colResizeIndicatorRef = ref();
     const isRelativeMode = ref(IS_LEGACY_MODE ? true : props.cellFixedMode === "relative");
     const currentRow = shallowRef();
-    const currentRowKey = ref(null);
+    const currentRowKey = ref(void 0);
+    const currentSelectedCellKey = ref(void 0);
     let currentHoverRow = null;
     const currentHoverRowKey = ref(null);
     let sortCol = ref();
@@ -1461,6 +1465,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       return key;
     }
+    function cellKeyGen(row, col) {
+      return rowKeyGen(row) + "--" + colKeyGen.value(col);
+    }
     const cellStyleMap = computed(() => {
       const thMap = /* @__PURE__ */ new Map();
       const tdMap = /* @__PURE__ */ new Map();
@@ -1561,6 +1568,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       emits("row-menu", e, row);
     }
     function onCellClick(e, row, col) {
+      if (props.rowActive) {
+        const cellKey = cellKeyGen(row, col);
+        if (props.selectedCellRevokable && currentSelectedCellKey.value === cellKey) {
+          currentSelectedCellKey.value = void 0;
+          emits("cell-selected", e, { select: false, row, col });
+        } else {
+          currentSelectedCellKey.value = cellKey;
+          emits("cell-selected", e, { select: true, row, col });
+        }
+      }
       emits("cell-click", e, row, col);
     }
     function onHeaderCellClick(e, col) {
@@ -1641,7 +1658,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function setCurrentRow(rowKeyOrRow, option = { silent: false }) {
       if (!dataSourceCopy.value.length)
         return;
-      if (rowKeyOrRow === void 0) {
+      const select = rowKeyOrRow !== void 0;
+      if (!select) {
         currentRow.value = void 0;
         currentRowKey.value = void 0;
       } else if (typeof rowKeyOrRow === "string") {
@@ -1662,7 +1680,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           /** no Event */
           null,
           currentRow.value,
-          { select: true }
+          { select }
+        );
+      }
+    }
+    function setSelectedCell(row, col, option = { silent: false }) {
+      if (!dataSourceCopy.value.length)
+        return;
+      const select = row !== void 0 && col !== void 0;
+      currentSelectedCellKey.value = select ? cellKeyGen(row, col) : void 0;
+      if (!option.silent) {
+        emits(
+          "cell-selected",
+          /** no Event */
+          null,
+          { row, col, select }
         );
       }
     }
@@ -1703,29 +1735,31 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return [{ dataIndex: sortCol.value, order: sortOrder }];
     }
     __expose({
-      /** 初始化横向纵向虚拟滚动 */
+      /** @see {@link initVirtualScroll} */
       initVirtualScroll,
-      /** 初始化横向虚拟滚动 */
+      /** @see {@link initVirtualScrollX} */
       initVirtualScrollX,
-      /** 初始化纵向虚拟滚动 */
+      /** @see {@link initVirtualScrollY} */
       initVirtualScrollY,
-      /** 设置当前选中行 */
+      /** @see {@link setCurrentRow} */
       setCurrentRow,
-      /** 设置高亮渐暗单元格 */
+      /** @see {@link setSelectedCell} */
+      setSelectedCell,
+      /** @see {@link setHighlightDimCell} */
       setHighlightDimCell,
-      /** 设置高亮渐暗行 */
+      /** @see {@link setHighlightDimRow} */
       setHighlightDimRow,
       /** 表格排序列dataIndex */
       sortCol,
-      /** 获取当前排序状态 */
+      /** @see {@link getSortColumns} */
       getSortColumns,
-      /** 设置排序 */
+      /** @see {@link setSorter} */
       setSorter,
-      /** 重置排序 */
+      /** @see {@link resetSorter} */
       resetSorter,
-      /** 滚动至 */
+      /** @see {@link scrollTo} */
       scrollTo,
-      /** 获取表格数据 */
+      /** @see {@link getTableData} */
       getTableData
     });
     return (_ctx, _cache) => {
@@ -1746,6 +1780,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           "border-body-v": props.bordered === "body-v",
           stripe: props.stripe,
           "cell-hover": props.cellHover,
+          "cell-active": props.cellActive,
           "row-hover": props.rowHover,
           "row-active": props.rowActive,
           "text-overflow": props.showOverflow,
@@ -1885,8 +1920,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   return openBlock(), createElementBlock("td", {
                     key: col.dataIndex,
                     "data-index": col.dataIndex,
+                    "cell-key": rowKeyGen(row) + "--" + colKeyGen.value(col),
                     style: normalizeStyle(cellStyleMap.value[unref(TagType).TD].get(colKeyGen.value(col))),
-                    class: normalizeClass([col.className, unref(fixedColClassMap).get(colKeyGen.value(col)), col.type === "seq" ? "seq-column" : ""]),
+                    class: normalizeClass([
+                      col.className,
+                      unref(fixedColClassMap).get(colKeyGen.value(col)),
+                      {
+                        "seq-column": col.type === "seq",
+                        active: currentSelectedCellKey.value === cellKeyGen(row, col)
+                      }
+                    ]),
                     onClick: (e) => onCellClick(e, row, col),
                     onMouseenter: (e) => onCellMouseEnter(e, row, col),
                     onMouseleave: (e) => onCellMouseLeave(e, row, col),

package/lib/style.css

@@ -12,6 +12,7 @@
   --border-width:1px;
   --td-bgc:#fff;
   --td-hover-color:#71a2fd;
+  --td-active-color:#386ccc;
   --th-bgc:#fafafc;
   --th-color:#272841;
   --tr-active-bgc:#e6f7ff;
@@ -46,6 +47,7 @@
   --th-color:#C0C0D1;
   --td-bgc:#1b1b24;
   --td-hover-color:#70a6ff;
+  --td-active-color:#386ccc;
   --border-color:#292933;
   --tr-active-bgc:#283f63;
   --tr-hover-bgc:#1a2b46;
@@ -112,6 +114,9 @@
 .stk-table.cell-hover tbody td:hover{
   box-shadow:inset 0 0 0 2px var(--td-hover-color);
 }
+.stk-table.cell-active tbody td.active{
+  box-shadow:inset 0 0 0 2px var(--td-active-color);
+}
 .stk-table.text-overflow .table-cell-wrapper{
   white-space:nowrap;
   overflow:hidden;

package/package.json

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

package/src/StkTable/StkTable.vue

@@ -17,6 +17,7 @@
             'border-body-v': props.bordered === 'body-v',
             stripe: props.stripe,
             'cell-hover': props.cellHover,
+            'cell-active': props.cellActive,
             'row-hover': props.rowHover,
             'row-active': props.rowActive,
             'text-overflow': props.showOverflow,
@@ -151,8 +152,16 @@
                         v-for="(col, colIndex) in virtualX_columnPart"
                         :key="col.dataIndex"
                         :data-index="col.dataIndex"
+                        :cell-key="rowKeyGen(row) + '--' + colKeyGen(col)"
                         :style="cellStyleMap[TagType.TD].get(colKeyGen(col))"
-                        :class="[col.className, fixedColClassMap.get(colKeyGen(col)), col.type === 'seq' ? 'seq-column' : '']"
+                        :class="[
+                            col.className,
+                            fixedColClassMap.get(colKeyGen(col)),
+                            {
+                                'seq-column': col.type === 'seq',
+                                active: currentSelectedCellKey === cellKeyGen(row, col),
+                            },
+                        ]"
                         @click="e => onCellClick(e, row, col)"
                         @mouseenter="e => onCellMouseEnter(e, row, col)"
                         @mouseleave="e => onCellMouseLeave(e, row, col)"
@@ -234,7 +243,7 @@ const props = withDefaults(
         rowHover?: boolean;
         /** 是否高亮选中的行 */
         rowActive?: boolean;
-        /** 当前行再次点击否可以取消 */
+        /** 当前行再次点击否可以取消 (rowActive=true)*/
         rowCurrentRevokable?: boolean;
         /** 表头行高。default = rowHeight */
         headerRowHeight?: number | null;
@@ -266,6 +275,10 @@ const props = withDefaults(
         showTrHoverClass?: boolean;
         /** 是否高亮鼠标悬浮的单元格 */
         cellHover?: boolean;
+        /** 是否高亮选中的单元格 */
+        cellActive?: boolean;
+        /** 单元格再次点击否可以取消选中 (cellActive=true)*/
+        selectedCellRevokable?: boolean;
         /** 表头是否可拖动。支持回调函数。 */
         headerDrag?: boolean | ((col: StkTableColumn<DT>) => boolean);
         /**
@@ -351,6 +364,8 @@ const props = withDefaults(
         showOverflow: false,
         showTrHoverClass: false,
         cellHover: false,
+        cellActive: false,
+        selectedCellRevokable: true,
         headerDrag: false,
         rowClassName: () => '',
         colResizable: false,
@@ -387,6 +402,11 @@ const emits = defineEmits<{
      * ```(ev: MouseEvent | null, row: DT | undefined, data: { select: boolean })```
      */
     (e: 'current-change', ev: MouseEvent | null, row: DT | undefined, data: { select: boolean }): void;
+    /**
+     * 选中单元格触发。ev返回null表示不是点击事件触发的
+     * ```(ev: MouseEvent | null, data: { select: boolean; row: DT | undefined; col: StkTableColumn<DT> | null })```
+     */
+    (e: 'cell-selected', ev: MouseEvent | null, data: { select: boolean; row: DT | undefined; col: StkTableColumn<DT> | undefined }): void;
     /**
      * 行双击事件
      * ```(ev: MouseEvent, row: DT)```
@@ -484,7 +504,9 @@ const currentRow = shallowRef<DT>();
  * 保存当前选中行的key<br>
  * 原因：vue3 不用ref包dataSource时，row为原始对象，与currentItem（Ref）相比会不相等。
  */
-const currentRowKey = ref<any>(null);
+const currentRowKey = ref<any>(void 0);
+/** 当前选中的单元格key  */
+const currentSelectedCellKey = ref<any>(void 0);
 /** 当前hover行 */
 let currentHoverRow: DT | null = null;
 /** 当前hover的行的key */
@@ -799,6 +821,11 @@ function rowKeyGen(row: DT | null | undefined) {
     return key;
 }
 
+/** 单元格唯一值 */
+function cellKeyGen(row: DT | null | undefined, col: StkTableColumn<DT>) {
+    return rowKeyGen(row) + '--' + colKeyGen.value(col);
+}
+
 /** 单元格样式 */
 const cellStyleMap = computed(() => {
     const thMap = new Map();
@@ -925,6 +952,16 @@ function onRowMenu(e: MouseEvent, row: DT) {
 
 /** 单元格单击 */
 function onCellClick(e: MouseEvent, row: DT, col: StkTableColumn<DT>) {
+    if (props.rowActive) {
+        const cellKey = cellKeyGen(row, col);
+        if (props.selectedCellRevokable && currentSelectedCellKey.value === cellKey) {
+            currentSelectedCellKey.value = void 0;
+            emits('cell-selected', e, { select: false, row, col });
+        } else {
+            currentSelectedCellKey.value = cellKey;
+            emits('cell-selected', e, { select: true, row, col });
+        }
+    }
     emits('cell-click', e, row, col);
 }
 
@@ -1040,13 +1077,14 @@ function onTrMouseOver(_e: MouseEvent, row: DT) {
 }
 
 /**
- * 选中一行，
+ * 选中一行
  * @param {string} rowKeyOrRow selected rowKey, undefined to unselect
  * @param {boolean} option.silent if emit current-change. default:false(not emit `current-change`)
  */
 function setCurrentRow(rowKeyOrRow: string | undefined | DT, option = { silent: false }) {
     if (!dataSourceCopy.value.length) return;
-    if (rowKeyOrRow === void 0) {
+    const select = rowKeyOrRow !== void 0;
+    if (!select) {
         currentRow.value = void 0;
         currentRowKey.value = void 0;
     } else if (typeof rowKeyOrRow === 'string') {
@@ -1062,7 +1100,22 @@ function setCurrentRow(rowKeyOrRow: string | undefined | DT, option = { silent:
         currentRowKey.value = rowKeyGen(rowKeyOrRow);
     }
     if (!option.silent) {
-        emits('current-change', /** no Event */ null, currentRow.value, { select: true });
+        emits('current-change', /** no Event */ null, currentRow.value, { select });
+    }
+}
+
+/**
+ * set highlight active cell (props.cellActive=true)
+ * @param row row if undefined, clear highlight
+ * @param col column
+ * @param option.silent if emit current-change. default:false(not emit `current-change`)
+ */
+function setSelectedCell(row?: DT, col?: StkTableColumn<DT>, option = { silent: false }) {
+    if (!dataSourceCopy.value.length) return;
+    const select = row !== void 0 && col !== void 0;
+    currentSelectedCellKey.value = select ? cellKeyGen(row, col) : void 0;
+    if (!option.silent) {
+        emits('cell-selected', /** no Event */ null, { row, col, select });
     }
 }
 
@@ -1120,29 +1173,31 @@ function getSortColumns(): Partial<SortState<DT>>[] {
 }
 
 defineExpose({
-    /** 初始化横向纵向虚拟滚动 */
+    /** @see {@link initVirtualScroll} */
     initVirtualScroll,
-    /** 初始化横向虚拟滚动 */
+    /** @see {@link initVirtualScrollX} */
     initVirtualScrollX,
-    /** 初始化纵向虚拟滚动 */
+    /** @see {@link initVirtualScrollY} */
     initVirtualScrollY,
-    /** 设置当前选中行 */
+    /** @see {@link setCurrentRow} */
     setCurrentRow,
-    /** 设置高亮渐暗单元格 */
+    /** @see {@link setSelectedCell} */
+    setSelectedCell,
+    /** @see {@link setHighlightDimCell} */
     setHighlightDimCell,
-    /** 设置高亮渐暗行 */
+    /** @see {@link setHighlightDimRow} */
     setHighlightDimRow,
     /** 表格排序列dataIndex */
     sortCol,
-    /** 获取当前排序状态 */
+    /** @see {@link getSortColumns} */
     getSortColumns,
-    /** 设置排序 */
+    /** @see {@link setSorter} */
     setSorter,
-    /** 重置排序 */
+    /** @see {@link resetSorter} */
     resetSorter,
-    /** 滚动至 */
+    /** @see {@link scrollTo} */
     scrollTo,
-    /** 获取表格数据 */
+    /** @see {@link getTableData} */
     getTableData,
 });
 </script>

package/src/StkTable/style.less

@@ -15,6 +15,7 @@
     --border-width: 1px;
     --td-bgc: #fff;
     --td-hover-color: #71a2fd;
+    --td-active-color: #386ccc;
     --th-bgc: #fafafc;
     --th-color: #272841;
     --tr-active-bgc: rgb(230, 247, 255);
@@ -62,6 +63,7 @@
         --th-color: #C0C0D1;
         --td-bgc: #1b1b24;
         --td-hover-color: #70a6ff;
+        --td-active-color: #386ccc;
         --border-color: #292933;
         --tr-active-bgc: #283f63;
         --tr-hover-bgc: #1a2b46;
@@ -167,6 +169,11 @@
         box-shadow: inset 0 0 0 2px var(--td-hover-color);
     }
 
+    /* 单元格高亮 */
+    &.cell-active tbody td.active{
+        box-shadow: inset 0 0 0 2px var(--td-active-color);
+    }
+    
     /* td 溢出*/
     &.text-overflow {
         .table-cell-wrapper {