stk-table-vue 0.8.12 → 0.8.14

package/lib/stk-table-vue.js

@@ -1,4 +1,12 @@
-import { createElementBlock, openBlock, createElementVNode, watch, onMounted, onBeforeUnmount, ref, computed, shallowRef, onUnmounted, defineComponent, nextTick, toRaw, normalizeStyle, normalizeClass, unref, createCommentVNode, renderSlot, Fragment, renderList, createBlock, resolveDynamicComponent, toDisplayString, createTextVNode, mergeProps, withCtx, createVNode } from "vue";
+/**
+ * name: stk-table-vue
+ * version: v0.8.13
+ * description: High performance realtime virtual table for vue3 and vue2.7
+ * author: japlus
+ * homepage: https://ja-plus.github.io/stk-table-vue/
+ * license: MIT
+ */
+import { createElementBlock, openBlock, createElementVNode, watch, onMounted, onBeforeUnmount, ref, computed, shallowRef, customRef, onUnmounted, defineComponent, nextTick, toRaw, normalizeStyle, normalizeClass, unref, createCommentVNode, renderSlot, Fragment, renderList, mergeProps, createBlock, resolveDynamicComponent, toDisplayString, createTextVNode, withCtx, createVNode } from "vue";
 const _export_sfc = (sfc, props) => {
   const target = sfc.__vccOpts || sfc;
   for (const [key, val] of props) {
@@ -203,6 +211,20 @@ function getBrowsersVersion(browserName) {
 function pureCellKeyGen(rowKey, colKey) {
   return rowKey + CELL_KEY_SEPARATE + colKey;
 }
+function getClosestTr(e) {
+  const target = e.target;
+  const tr = target == null ? void 0 : target.closest("tr");
+  return tr;
+}
+function getClosestTrIndex(e) {
+  const tr = getClosestTr(e);
+  if (!tr) return -1;
+  return Number(tr.dataset.rowI);
+}
+function getClosestColKey(e) {
+  var _a, _b;
+  return (_b = (_a = e.target) == null ? void 0 : _a.closest("td")) == null ? void 0 : _b.dataset.colKey;
+}
 const DEFAULT_COL_WIDTH = "100";
 const DEFAULT_TABLE_HEIGHT = 100;
 const DEFAULT_TABLE_WIDTH = 200;
@@ -227,9 +249,9 @@ const DEFAULT_SORT_CONFIG = {
   sortChildren: false
 };
 const DEFAULT_ROW_ACTIVE_CONFIG = {
-  enabled: false,
+  enabled: true,
   disabled: () => false,
-  revokable: false
+  revokable: true
 };
 var TagType = /* @__PURE__ */ ((TagType2) => {
   TagType2[TagType2["TH"] = 0] = "TH";
@@ -483,19 +505,19 @@ function useFixedCol({
     tableHeaders.value.forEach((cols) => {
       cols.forEach((col) => {
         const fixed = col.fixed;
-        const showShadow = fixedColShadow && fixed && fixedShadowColsValue.includes(col);
-        const classObj = {
-          "fixed-cell--active": fixedColsValue.includes(col)
-          // 表示该列正在被固定
-        };
+        const showShadow = fixed && fixedColShadow && fixedShadowColsValue.includes(col);
+        const classList = [];
+        if (fixedColsValue.includes(col)) {
+          classList.push("fixed-cell--active");
+        }
         if (fixed) {
-          classObj["fixed-cell"] = true;
-          classObj["fixed-cell--" + fixed] = true;
+          classList.push("fixed-cell");
+          classList.push("fixed-cell--" + fixed);
         }
         if (showShadow) {
-          classObj["fixed-cell--shadow"] = true;
+          classList.push("fixed-cell--shadow");
         }
-        colMap.set(colKey(col), classObj);
+        colMap.set(colKey(col), classList);
       });
     });
     return colMap;
@@ -686,7 +708,7 @@ function useHighlight({ props, stkTableId, tableContainerRef }) {
   }
   function setHighlightDimCell(rowKeyValue, colKeyValue, option = {}) {
     var _a;
-    const cellEl = (_a = tableContainerRef.value) == null ? void 0 : _a.querySelector(`[data-cell-key="${pureCellKeyGen(rowKeyValue, colKeyValue)}"]`);
+    const cellEl = (_a = tableContainerRef.value) == null ? void 0 : _a.querySelector(`[data-row-key="${rowKeyValue}"] [data-col-key="${colKeyValue}"]`);
     if (!cellEl) return;
     const { className, method, duration, keyframe } = {
       className: HIGHLIGHT_CELL_CLASS,
@@ -917,17 +939,19 @@ function useMergeCells({ rowActiveProp, tableHeaderLast, rowKeyGen, colKeyGen, v
     hiddenCellMap.value = {};
     hoverRowMap.value = {};
   });
-  function hideCells(rowKey, startIndex, count, isSelfRow = false, mergeCellKey) {
-    for (let i = startIndex; i < startIndex + count; i++) {
-      if (!isSelfRow || i !== startIndex) {
-        const nextCol = tableHeaderLast.value[i];
-        if (!nextCol) break;
-        const nextColKey = colKeyGen.value(nextCol);
-        if (!hiddenCellMap.value[rowKey]) hiddenCellMap.value[rowKey] = /* @__PURE__ */ new Set();
-        hiddenCellMap.value[rowKey].add(nextColKey);
-      }
+  function hideCells(rowKey, colKey, colspan, isSelfRow = false, mergeCellKey) {
+    const startIndex = tableHeaderLast.value.findIndex((item) => colKeyGen.value(item) === colKey);
+    for (let i = startIndex; i < startIndex + colspan; i++) {
       if (!hoverRowMap.value[rowKey]) hoverRowMap.value[rowKey] = /* @__PURE__ */ new Set();
       hoverRowMap.value[rowKey].add(mergeCellKey);
+      if (isSelfRow && i === startIndex) {
+        continue;
+      }
+      const nextCol = tableHeaderLast.value[i];
+      if (!nextCol) break;
+      const nextColKey = colKeyGen.value(nextCol);
+      if (!hiddenCellMap.value[rowKey]) hiddenCellMap.value[rowKey] = /* @__PURE__ */ new Set();
+      hiddenCellMap.value[rowKey].add(nextColKey);
     }
   }
   function mergeCellsWrapper(row, col, rowIndex, colIndex) {
@@ -937,26 +961,25 @@ function useMergeCells({ rowActiveProp, tableHeaderLast, rowKeyGen, colKeyGen, v
     rowspan = rowspan || 1;
     if (colspan === 1 && rowspan === 1) return;
     const rowKey = rowKeyGen(row);
-    const colKey = colKeyGen.value(col);
-    const curColIndex = tableHeaderLast.value.findIndex((item) => colKeyGen.value(item) === colKey);
     const curRowIndex = virtual_dataSourcePart.value.findIndex((item) => rowKeyGen(item) === rowKey);
-    const mergedCellKey = pureCellKeyGen(rowKey, colKey);
     if (curRowIndex === -1) return;
+    const colKey = colKeyGen.value(col);
+    const mergedCellKey = pureCellKeyGen(rowKey, colKey);
     for (let i = curRowIndex; i < curRowIndex + rowspan; i++) {
       const row2 = virtual_dataSourcePart.value[i];
       if (!row2) break;
-      hideCells(rowKeyGen(row2), curColIndex, colspan, i === curRowIndex, mergedCellKey);
+      hideCells(rowKeyGen(row2), colKey, colspan, i === curRowIndex, mergedCellKey);
     }
     return { colspan, rowspan };
   }
+  const emptySet = /* @__PURE__ */ new Set();
   function updateHoverMergedCells(rowKey) {
-    const set = rowKey === void 0 ? null : hoverRowMap.value[rowKey];
-    hoverMergedCells.value = set || /* @__PURE__ */ new Set();
+    hoverMergedCells.value = rowKey === void 0 ? emptySet : hoverRowMap.value[rowKey] || emptySet;
   }
   function updateActiveMergedCells(clear, rowKey) {
     if (!rowActiveProp.value.enabled) return;
     if (clear) {
-      activeMergedCells.value.clear();
+      activeMergedCells.value = /* @__PURE__ */ new Set();
       return;
     }
     activeMergedCells.value = rowKey !== void 0 && hoverRowMap.value[rowKey] || new Set(hoverMergedCells.value);
@@ -1029,10 +1052,36 @@ function useRowExpand({ dataSourceCopy, rowKeyGen, emits }) {
   };
 }
 function useScrollRowByRow({ props, tableContainerRef }) {
-  let isMouseDown = false;
   let isAddListeners = false;
-  let lastScrollTop = 0;
-  const isDragScroll = ref(false);
+  const isDragScroll = customRef((track, trigger) => {
+    let value = false;
+    let debounceTimer = 0;
+    return {
+      get() {
+        track();
+        return value;
+      },
+      set(newValue) {
+        if (value && !newValue) {
+          if (debounceTimer) {
+            window.clearTimeout(debounceTimer);
+          }
+          debounceTimer = window.setTimeout(() => {
+            value = newValue;
+            trigger();
+            debounceTimer = 0;
+          }, 300);
+        } else {
+          if (debounceTimer) {
+            window.clearTimeout(debounceTimer);
+            debounceTimer = 0;
+          }
+          value = newValue;
+          trigger();
+        }
+      }
+    };
+  });
   const onlyDragScroll = computed(() => props.scrollRowByRow === "scrollbar");
   const isSRBRActive = computed(() => {
     if (onlyDragScroll.value) {
@@ -1059,7 +1108,6 @@ function useScrollRowByRow({ props, tableContainerRef }) {
     if (!container) return;
     container.addEventListener("mousedown", handleMouseDown);
     container.addEventListener("mouseup", handleMouseUp);
-    container.addEventListener("scroll", handleScroll);
     isAddListeners = true;
   }
   function removeEventListener() {
@@ -1067,22 +1115,16 @@ function useScrollRowByRow({ props, tableContainerRef }) {
     if (!container) return;
     container.removeEventListener("mousedown", handleMouseDown);
     container.removeEventListener("mouseup", handleMouseUp);
-    container.removeEventListener("scroll", handleScroll);
     isAddListeners = false;
   }
   function handleMouseDown(e) {
-    isMouseDown = true;
-    lastScrollTop = e.target.scrollTop;
+    const el = e.target;
+    if (el.classList.contains("stk-table")) {
+      isDragScroll.value = true;
+    }
   }
   function handleMouseUp() {
-    isMouseDown = false;
     isDragScroll.value = false;
-    lastScrollTop = 0;
-  }
-  function handleScroll(e) {
-    const scrollTop = e.target.scrollTop;
-    if (!isMouseDown || scrollTop === lastScrollTop) return;
-    isDragScroll.value = true;
   }
   return { isSRBRActive, isDragScroll };
 }
@@ -1165,11 +1207,6 @@ function useTrDrag({ props, emits, dataSourceCopy }) {
   const dragRowConfig = computed(() => {
     return { mode: "insert", ...props.dragRowConfig };
   });
-  function getClosestTr(e) {
-    const target = e.target;
-    const tr = target == null ? void 0 : target.closest("tr");
-    return tr;
-  }
   function onTrDragStart(e, rowIndex) {
     var _a;
     const tr = getClosestTr(e);
@@ -1706,7 +1743,7 @@ function useVirtualScroll({
   };
 }
 const _hoisted_1 = { key: 0 };
-const _hoisted_2 = ["data-col-key", "draggable", "rowspan", "colspan", "title", "onClick"];
+const _hoisted_2 = ["onClick"];
 const _hoisted_3 = ["onMousedown"];
 const _hoisted_4 = { class: "table-header-title" };
 const _hoisted_5 = ["onMousedown"];
@@ -1714,15 +1751,18 @@ const _hoisted_6 = {
   key: 0,
   class: "vt-x-left"
 };
-const _hoisted_7 = ["id", "data-row-key", "onClick", "onDblclick", "onContextmenu", "onMouseover", "onDrop"];
+const _hoisted_7 = ["onDrop"];
 const _hoisted_8 = {
   key: 0,
   class: "vt-x-left"
 };
 const _hoisted_9 = ["colspan"];
 const _hoisted_10 = { class: "table-cell-wrapper" };
-const _hoisted_11 = ["data-cell-key", "onClick", "onMousedown", "onMouseenter", "onMouseleave", "onMouseover"];
-const _hoisted_12 = ["title"];
+const _hoisted_11 = ["title"];
+const _hoisted_12 = {
+  key: 3,
+  class: "vt-x-right"
+};
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "StkTable",
   props: {
@@ -2114,7 +2154,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       };
     });
     function getRowIndex(rowIndex) {
-      return rowIndex + (virtual_on.value ? virtualScroll.value.startIndex : 0);
+      return rowIndex + virtualScroll.value.startIndex;
     }
     function getHeaderTitle(col) {
       const colKey = colKeyGen.value(col);
@@ -2123,6 +2163,83 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       return col.title || "";
     }
+    function getTRProps(row, index) {
+      var _a, _b;
+      const rowIndex = getRowIndex(index);
+      const rowKey = rowKeyGen(row);
+      let classStr = props.rowClassName(row, rowIndex) || " " + ((row == null ? void 0 : row.__EXP__) ? "expanded" : "") + " " + ((row == null ? void 0 : row.__EXP_R__) ? "expanded-row" : "");
+      if (currentRowKey.value === rowKey || row === currentRow.value) {
+        classStr += " active";
+      }
+      if (props.showTrHoverClass && (rowKey === currentHoverRowKey.value || row === currentHoverRow)) {
+        classStr += " hover";
+      }
+      const result = {
+        id: stkTableId + "-" + rowKey,
+        "data-row-key": rowKey,
+        "data-row-i": rowIndex,
+        class: classStr,
+        style: ""
+      };
+      const needRowHeight = (row == null ? void 0 : row.__EXP_R__) && props.virtual && ((_a = props.expandConfig) == null ? void 0 : _a.height);
+      if (needRowHeight) {
+        result.style = `--row-height: ${(_b = props.expandConfig) == null ? void 0 : _b.height}px`;
+      }
+      return result;
+    }
+    function getTHProps(col) {
+      const colKey = colKeyGen.value(col);
+      return {
+        "data-col-key": colKey,
+        draggable: Boolean(isHeaderDraggable(col)),
+        rowspan: virtualX_on.value ? 1 : col.__R_SP__,
+        colspan: col.__C_SP__,
+        style: cellStyleMap.value[TagType.TH].get(colKey),
+        title: getHeaderTitle(col),
+        class: [
+          col.sorter ? "sortable" : "",
+          colKey === sortCol.value && sortOrderIndex.value !== 0 && "sorter-" + sortSwitchOrder[sortOrderIndex.value],
+          col.headerClassName,
+          fixedColClassMap.value.get(colKey)
+        ]
+      };
+    }
+    function getTDProps(row, col, rowIndex, colIndex) {
+      const colKey = colKeyGen.value(col);
+      if (!row) {
+        return {
+          style: cellStyleMap.value[TagType.TD].get(colKey)
+        };
+      }
+      const cellKey = cellKeyGen(row, col);
+      const classList = [col.className, fixedColClassMap.value.get(colKey)];
+      if (col.mergeCells) {
+        if (hoverMergedCells.value.has(cellKey)) {
+          classList.push("cell-hover");
+        }
+        if (activeMergedCells.value.has(cellKey)) {
+          classList.push("cell-active");
+        }
+      }
+      if (props.cellActive && currentSelectedCellKey.value === cellKey) {
+        classList.push("active");
+      }
+      if (col.type === "seq") {
+        classList.push("seq-column");
+      } else if (col.type === "expand" && (row.__EXP__ ? colKeyGen.value(row.__EXP__) === colKey : false)) {
+        classList.push("expanded");
+      } else if (row.__T_EXP__ && col.type === "tree-node") {
+        classList.push("tree-expanded");
+      } else if (col.type === "dragRow") {
+        classList.push("drag-row-cell");
+      }
+      return {
+        "data-col-key": colKey,
+        style: cellStyleMap.value[TagType.TD].get(colKey),
+        class: classList,
+        ...mergeCellsWrapper(row, col, rowIndex, colIndex)
+      };
+    }
     function onColumnSort(col, click = true, options = {}) {
       if (!col) {
         console.warn("onColumnSort: not found col:", col);
@@ -2178,8 +2295,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         emits("sort-change", col, order, toRaw(dataSourceTemp), sortConfig);
       }
     }
-    function onRowClick(e, row, rowIndex) {
+    function onRowClick(e) {
       var _a, _b;
+      const rowIndex = getClosestTrIndex(e);
+      const row = dataSourceCopy.value[rowIndex];
+      if (!row) return;
       emits("row-click", e, row, { rowIndex });
       if ((_b = (_a = rowActiveProp.value).disabled) == null ? void 0 : _b.call(_a, row)) return;
       const isCurrentRow = props.rowKey ? currentRowKey.value === rowKeyGen(row) : currentRow.value === row;
@@ -2193,13 +2313,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       emits("current-change", e, row, { select: !isCurrentRow });
     }
-    function onRowDblclick(e, row, rowIndex) {
+    function onRowDblclick(e) {
+      const rowIndex = getClosestTrIndex(e);
+      const row = dataSourceCopy.value[rowIndex];
+      if (!row) return;
       emits("row-dblclick", e, row, { rowIndex });
     }
     function onHeaderMenu(e) {
       emits("header-row-menu", e);
     }
-    function onRowMenu(e, row, rowIndex) {
+    function onRowMenu(e) {
+      const rowIndex = getClosestTrIndex(e);
+      const row = dataSourceCopy.value[rowIndex];
+      if (!row) return;
       emits("row-menu", e, row, { rowIndex });
     }
     function triangleClick(e, row, col) {
@@ -2209,7 +2335,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         toggleTreeNode(row, col);
       }
     }
-    function onCellClick(e, row, col, rowIndex) {
+    function onCellClick(e) {
+      const rowIndex = getClosestTrIndex(e);
+      const row = dataSourceCopy.value[rowIndex];
+      if (!row) return;
+      const colKey = getClosestColKey(e);
+      const col = tableHeaderLast.value.find((item) => colKeyGen.value(item) === colKey);
+      if (!col) return;
       if (props.cellActive) {
         const cellKey = cellKeyGen(row, col);
         const result = { row, col, select: false, rowIndex };
@@ -2223,19 +2355,31 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       emits("cell-click", e, row, col, { rowIndex });
     }
+    function getCellEventData(e) {
+      const rowIndex = getClosestTrIndex(e) || 0;
+      const row = dataSourceCopy.value[rowIndex];
+      const colKey = getClosestColKey(e);
+      const col = tableHeaderLast.value.find((item) => colKeyGen.value(item) === colKey);
+      return { row, col, rowIndex };
+    }
     function onHeaderCellClick(e, col) {
+      onColumnSort(col);
       emits("header-cell-click", e, col);
     }
-    function onCellMouseEnter(e, row, col) {
+    function onCellMouseEnter(e) {
+      const { row, col } = getCellEventData(e);
       emits("cell-mouseenter", e, row, col);
     }
-    function onCellMouseLeave(e, row, col) {
+    function onCellMouseLeave(e) {
+      const { row, col } = getCellEventData(e);
       emits("cell-mouseleave", e, row, col);
     }
-    function onCellMouseOver(e, row, col) {
+    function onCellMouseOver(e) {
+      const { row, col } = getCellEventData(e);
       emits("cell-mouseover", e, row, col);
     }
-    function onCellMouseDown(e, row, col, rowIndex) {
+    function onCellMouseDown(e) {
+      const { row, col, rowIndex } = getCellEventData(e);
       emits("cell-mousedown", e, row, col, { rowIndex });
     }
     function onTableWheel(e) {
@@ -2247,20 +2391,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         return;
       }
       const dom = tableContainerRef.value;
-      if (!dom) return;
-      if (!virtual_on.value && !virtualX_on.value) return;
-      const { containerHeight, scrollTop, scrollHeight } = virtualScroll.value;
-      const { containerWidth, scrollLeft, scrollWidth } = virtualScrollX.value;
-      const isScrollBottom = scrollHeight - containerHeight - scrollTop < 10;
-      const isScrollRight = scrollWidth - containerWidth - scrollLeft < 10;
+      if (!virtual_on.value && !virtualX_on.value || !dom) return;
       const { deltaY, deltaX, shiftKey } = e;
       if (virtual_on.value && deltaY && !shiftKey) {
+        const { containerHeight, scrollTop, scrollHeight } = virtualScroll.value;
+        const isScrollBottom = scrollHeight - containerHeight - scrollTop < 10;
         if (deltaY > 0 && !isScrollBottom || deltaY < 0 && scrollTop > 0) {
           e.preventDefault();
         }
         dom.scrollTop += deltaY;
       }
       if (virtualX_on.value) {
+        const { containerWidth, scrollLeft, scrollWidth } = virtualScrollX.value;
+        const isScrollRight = scrollWidth - containerWidth - scrollLeft < 10;
         let distance = deltaX;
         if (shiftKey && deltaY) {
           distance = deltaY;
@@ -2297,12 +2440,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         emits("scroll-x", e);
       }
     }
-    function onTrMouseOver(_e, row) {
+    function onTrMouseOver(e) {
+      const tr = getClosestTr(e);
+      if (!tr) return;
+      const rowIndex = Number(tr.dataset.rowI);
+      const row = dataSourceCopy.value[rowIndex];
       if (currentHoverRow === row) return;
       currentHoverRow = row;
-      const rowKey = rowKeyGen(row);
+      const rowKey = tr.dataset.rowKey;
       if (props.showTrHoverClass) {
-        currentHoverRowKey.value = rowKey;
+        currentHoverRowKey.value = rowKey || null;
       }
       if (props.rowHover) {
         updateHoverMergedCells(rowKey);
@@ -2579,7 +2726,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           class: normalizeClass(["stk-table-main", {
             "fixed-mode": props.fixedMode
           }]),
-          style: normalizeStyle({ width: __props.width, minWidth: __props.minWidth, maxWidth: __props.maxWidth })
+          style: normalizeStyle({ width: __props.width, minWidth: __props.minWidth, maxWidth: __props.maxWidth }),
+          onDragover: _cache[4] || (_cache[4] = //@ts-ignore
+          (...args) => unref(onTrDragOver) && unref(onTrDragOver)(...args)),
+          onDragenter: _cache[5] || (_cache[5] = //@ts-ignore
+          (...args) => unref(onTrDragEnter) && unref(onTrDragEnter)(...args)),
+          onDragend: _cache[6] || (_cache[6] = //@ts-ignore
+          (...args) => unref(onTrDragEnd) && unref(onTrDragEnd)(...args)),
+          onClick: onRowClick,
+          onDblclick: onRowDblclick,
+          onContextmenu: onRowMenu,
+          onMouseover: onTrMouseOver
         }, [
           !__props.headless ? (openBlock(), createElementBlock("thead", _hoisted_1, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(tableHeaders.value, (row, rowIndex) => {
@@ -2593,31 +2750,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   style: normalizeStyle(`min-width:${unref(virtualScrollX).offsetLeft}px;width:${unref(virtualScrollX).offsetLeft}px`)
                 }, null, 4)) : createCommentVNode("", true),
                 (openBlock(true), createElementBlock(Fragment, null, renderList(unref(virtualX_on) && rowIndex === tableHeaders.value.length - 1 ? unref(virtualX_columnPart) : row, (col, colIndex) => {
-                  return openBlock(), createElementBlock("th", {
-                    key: colKeyGen.value(col),
-                    "data-col-key": colKeyGen.value(col),
-                    draggable: unref(isHeaderDraggable)(col) ? "true" : "false",
-                    rowspan: unref(virtualX_on) ? 1 : col.__R_SP__,
-                    colspan: col.__C_SP__,
-                    style: normalizeStyle(cellStyleMap.value[unref(TagType).TH].get(colKeyGen.value(col))),
-                    title: getHeaderTitle(col),
-                    class: normalizeClass([
-                      col.sorter ? "sortable" : "",
-                      colKeyGen.value(col) === unref(sortCol) && unref(sortOrderIndex) !== 0 && "sorter-" + sortSwitchOrder[unref(sortOrderIndex)],
-                      col.headerClassName,
-                      unref(fixedColClassMap).get(colKeyGen.value(col))
-                    ]),
-                    onClick: (e) => {
-                      onColumnSort(col);
-                      onHeaderCellClick(e, col);
-                    },
-                    onDragstart: _cache[0] || (_cache[0] = //@ts-ignore
-                    (...args) => unref(onThDragStart) && unref(onThDragStart)(...args)),
-                    onDrop: _cache[1] || (_cache[1] = //@ts-ignore
-                    (...args) => unref(onThDrop) && unref(onThDrop)(...args)),
-                    onDragover: _cache[2] || (_cache[2] = //@ts-ignore
-                    (...args) => unref(onThDragOver) && unref(onThDragOver)(...args))
-                  }, [
+                  return openBlock(), createElementBlock("th", mergeProps({
+                    key: colKeyGen.value(col)
+                  }, { ref_for: true }, getTHProps(col), {
+                    onClick: (e) => onHeaderCellClick(e, col),
+                    onDragstart: _cache[0] || (_cache[0] = ($event) => __props.headerDrag ? unref(onThDragStart) : void 0),
+                    onDrop: _cache[1] || (_cache[1] = ($event) => __props.headerDrag ? unref(onThDrop) : void 0),
+                    onDragover: _cache[2] || (_cache[2] = ($event) => __props.headerDrag ? unref(onThDragOver) : void 0)
+                  }), [
                     unref(colResizeOn)(col) && colIndex > 0 ? (openBlock(), createElementBlock("div", {
                       key: 0,
                       class: "table-header-resizer left",
@@ -2625,7 +2765,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     }, null, 40, _hoisted_3)) : createCommentVNode("", true),
                     createElementVNode("div", {
                       class: "table-header-cell-wrapper",
-                      style: normalizeStyle({ "--row-span": unref(virtualX_on) ? 1 : col.__R_SP__ })
+                      style: normalizeStyle(`--row-span:${unref(virtualX_on) ? 1 : col.__R_SP__}`)
                     }, [
                       col.customHeaderCell ? (openBlock(), createBlock(resolveDynamicComponent(col.customHeaderCell), {
                         key: 0,
@@ -2648,7 +2788,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       class: "table-header-resizer right",
                       onMousedown: ($event) => unref(onThResizeMouseDown)($event, col)
                     }, null, 40, _hoisted_5)) : createCommentVNode("", true)
-                  ], 46, _hoisted_2);
+                  ], 16, _hoisted_2);
                 }), 128)),
                 unref(virtualX_on) ? (openBlock(), createElementBlock("th", {
                   key: 1,
@@ -2660,12 +2800,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ])) : createCommentVNode("", true),
           createElementVNode("tbody", {
             class: "stk-tbody-main",
-            onDragover: _cache[5] || (_cache[5] = //@ts-ignore
-            (...args) => unref(onTrDragOver) && unref(onTrDragOver)(...args)),
-            onDragenter: _cache[6] || (_cache[6] = //@ts-ignore
-            (...args) => unref(onTrDragEnter) && unref(onTrDragEnter)(...args)),
-            onDragend: _cache[7] || (_cache[7] = //@ts-ignore
-            (...args) => unref(onTrDragEnd) && unref(onTrDragEnd)(...args))
+            onClick: onCellClick,
+            onMousedown: onCellMouseDown,
+            onMouseover: onCellMouseOver
           }, [
             unref(virtual_on) && !unref(isSRBRActive) ? (openBlock(), createElementBlock("tr", {
               key: 0,
@@ -2681,31 +2818,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               }), 128)) : createCommentVNode("", true)
             ], 4)) : createCommentVNode("", true),
             (openBlock(true), createElementBlock(Fragment, null, renderList(unref(virtual_dataSourcePart), (row, rowIndex) => {
-              var _a, _b;
-              return openBlock(), createElementBlock("tr", {
-                id: unref(stkTableId) + "-" + (__props.rowKey ? rowKeyGen(row) : getRowIndex(rowIndex)),
+              return openBlock(), createElementBlock("tr", mergeProps({
                 ref_for: true,
                 ref_key: "trRef",
                 ref: trRef,
-                key: __props.rowKey ? rowKeyGen(row) : getRowIndex(rowIndex),
-                "data-row-key": __props.rowKey ? rowKeyGen(row) : getRowIndex(rowIndex),
-                class: normalizeClass({
-                  active: __props.rowKey ? rowKeyGen(row) === currentRowKey.value : row === currentRow.value,
-                  hover: props.showTrHoverClass && (__props.rowKey ? rowKeyGen(row) === currentHoverRowKey.value : row === currentHoverRowKey.value),
-                  [__props.rowClassName(row, getRowIndex(rowIndex)) || ""]: true,
-                  expanded: row && row.__EXP__,
-                  "expanded-row": row && row.__EXP_R__
-                }),
-                style: normalizeStyle({
-                  "--row-height": row && row.__EXP_R__ && props.virtual && ((_a = props.expandConfig) == null ? void 0 : _a.height) && ((_b = props.expandConfig) == null ? void 0 : _b.height) + "px"
-                }),
-                onClick: ($event) => onRowClick($event, row, getRowIndex(rowIndex)),
-                onDblclick: ($event) => onRowDblclick($event, row, getRowIndex(rowIndex)),
-                onContextmenu: ($event) => onRowMenu($event, row, getRowIndex(rowIndex)),
-                onMouseover: ($event) => onTrMouseOver($event, row),
-                onMouseleave: _cache[4] || (_cache[4] = ($event) => onTrMouseLeave($event)),
-                onDrop: ($event) => unref(onTrDrop)($event, getRowIndex(rowIndex))
-              }, [
+                key: rowKeyGen(row)
+              }, { ref_for: true }, getTRProps(row, rowIndex), {
+                onDrop: ($event) => unref(onTrDrop)($event, getRowIndex(rowIndex)),
+                onMouseleave: onTrMouseLeave
+              }), [
                 unref(virtualX_on) ? (openBlock(), createElementBlock("td", _hoisted_8)) : createCommentVNode("", true),
                 row && row.__EXP_R__ ? (openBlock(), createElementBlock("td", {
                   key: 1,
@@ -2716,38 +2837,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       row: row.__EXP_R__,
                       col: row.__EXP_C__
                     }, () => {
-                      var _a2;
+                      var _a;
                       return [
-                        createTextVNode(toDisplayString(((_a2 = row.__EXP_R__) == null ? void 0 : _a2[row.__EXP_C__.dataIndex]) ?? ""), 1)
+                        createTextVNode(toDisplayString(((_a = row.__EXP_R__) == null ? void 0 : _a[row.__EXP_C__.dataIndex]) ?? ""), 1)
                       ];
                     })
                   ])
                 ], 8, _hoisted_9)) : (openBlock(true), createElementBlock(Fragment, { key: 2 }, renderList(unref(virtualX_columnPart), (col, colIndex) => {
-                  var _a2;
+                  var _a;
                   return openBlock(), createElementBlock(Fragment, null, [
-                    !((_a2 = unref(hiddenCellMap)[rowKeyGen(row)]) == null ? void 0 : _a2.has(colKeyGen.value(col))) ? (openBlock(), createElementBlock("td", mergeProps({
-                      key: colKeyGen.value(col),
-                      "data-cell-key": cellKeyGen(row, col),
-                      style: cellStyleMap.value[unref(TagType).TD].get(colKeyGen.value(col)),
-                      class: [
-                        col.className,
-                        unref(fixedColClassMap).get(colKeyGen.value(col)),
-                        {
-                          "cell-hover": col.mergeCells && unref(hoverMergedCells).has(cellKeyGen(row, col)),
-                          "cell-active": col.mergeCells && unref(activeMergedCells).has(cellKeyGen(row, col)),
-                          "seq-column": col.type === "seq",
-                          active: props.cellActive && currentSelectedCellKey.value === cellKeyGen(row, col),
-                          expanded: col.type === "expand" && (row.__EXP__ ? colKeyGen.value(row.__EXP__) === colKeyGen.value(col) : false),
-                          "tree-expanded": col.type === "tree-node" && row.__T_EXP__,
-                          "drag-row-cell": col.type === "dragRow"
-                        }
-                      ]
-                    }, { ref_for: true }, unref(mergeCellsWrapper)(row, col, rowIndex, colIndex), {
-                      onClick: ($event) => onCellClick($event, row, col, getRowIndex(rowIndex)),
-                      onMousedown: ($event) => onCellMouseDown($event, row, col, getRowIndex(rowIndex)),
-                      onMouseenter: ($event) => onCellMouseEnter($event, row, col),
-                      onMouseleave: ($event) => onCellMouseLeave($event, row, col),
-                      onMouseover: ($event) => onCellMouseOver($event, row, col)
+                    !((_a = unref(hiddenCellMap)[rowKeyGen(row)]) == null ? void 0 : _a.has(colKeyGen.value(col))) ? (openBlock(), createElementBlock("td", mergeProps({
+                      key: colKeyGen.value(col)
+                    }, { ref_for: true }, getTDProps(row, col, rowIndex, colIndex), {
+                      onMouseenter: onCellMouseEnter,
+                      onMouseleave: onCellMouseLeave
                     }), [
                       col.customCell ? (openBlock(), createBlock(resolveDynamicComponent(col.customCell), {
                         key: 0,
@@ -2775,7 +2878,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         key: 1,
                         class: "table-cell-wrapper",
                         title: col.type !== "seq" ? row == null ? void 0 : row[col.dataIndex] : "",
-                        style: normalizeStyle(col.type === "tree-node" ? { paddingLeft: row.__T_LV__ && row.__T_LV__ * 16 + "px" } : {})
+                        style: normalizeStyle(col.type === "tree-node" && row.__T_LV__ ? `padding-left:${row.__T_LV__ * 16}px` : "")
                       }, [
                         col.type === "seq" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
                           createTextVNode(toDisplayString((props.seqConfig.startIndex || 0) + getRowIndex(rowIndex) + 1), 1)
@@ -2795,11 +2898,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 3 }, [
                           createTextVNode(toDisplayString((row == null ? void 0 : row[col.dataIndex]) ?? getEmptyCellText.value(col, row)), 1)
                         ], 64))
-                      ], 12, _hoisted_12))
-                    ], 16, _hoisted_11)) : createCommentVNode("", true)
+                      ], 12, _hoisted_11))
+                    ], 16)) : createCommentVNode("", true)
                   ], 64);
-                }), 256))
-              ], 46, _hoisted_7);
+                }), 256)),
+                unref(virtualX_on) ? (openBlock(), createElementBlock("td", _hoisted_12)) : createCommentVNode("", true)
+              ], 16, _hoisted_7);
             }), 128)),
             unref(virtual_on) && !unref(isSRBRActive) ? (openBlock(), createElementBlock("tr", {
               key: 1,
@@ -2810,13 +2914,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               style: normalizeStyle(`height: ${SRBRBottomHeight.value}px`)
             }, null, 4)) : createCommentVNode("", true)
           ], 32)
-        ], 6),
+        ], 38),
         (!dataSourceCopy.value || !dataSourceCopy.value.length) && __props.showNoData ? (openBlock(), createElementBlock("div", {
           key: 2,
           class: normalizeClass(["stk-table-no-data", { "no-data-full": __props.noDataFull }])
         }, [
           renderSlot(_ctx.$slots, "empty", {}, () => [
-            _cache[8] || (_cache[8] = createTextVNode("暂无数据", -1))
+            _cache[7] || (_cache[7] = createTextVNode("暂无数据", -1))
           ])
         ], 2)) : createCommentVNode("", true),
         renderSlot(_ctx.$slots, "customBottom")