stk-table-vue 0.7.1 → 0.8.0

package/lib/stk-table-vue.js

@@ -1,4 +1,4 @@
-import { createElementBlock, openBlock, createElementVNode, watch, onMounted, onBeforeUnmount, ref, computed, shallowRef, defineComponent, nextTick, toRaw, normalizeStyle, normalizeClass, unref, createCommentVNode, renderSlot, Fragment, renderList, createBlock, resolveDynamicComponent, toDisplayString, createTextVNode, withCtx, createVNode } from "vue";
+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";
 const _export_sfc = (sfc, props) => {
   const target = sfc.__vccOpts || sfc;
   for (const [key, val] of props) {
@@ -189,6 +189,9 @@ function getBrowsersVersion(browserName) {
   }
   return 100;
 }
+function pureCellKeyGen(rowKey, colKey) {
+  return rowKey + CELL_KEY_SEPARATE + colKey;
+}
 const DEFAULT_COL_WIDTH = "100";
 const DEFAULT_TABLE_HEIGHT = 100;
 const DEFAULT_TABLE_WIDTH = 200;
@@ -639,7 +642,7 @@ function useHighlight({ props, stkTableId, tableContainerRef }) {
     const recursion = () => {
       window.requestAnimationFrame(
         () => {
-          const nowTs = Date.now();
+          const nowTs = performance.now();
           highlightDimRowsAnimation.forEach((store, rowKeyValue) => {
             const { ts, duration } = store;
             const timeOffset = nowTs - ts;
@@ -662,14 +665,14 @@ 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="${rowKeyValue}--${colKeyValue}"]`);
+    const cellEl = (_a = tableContainerRef.value) == null ? void 0 : _a.querySelector(`[data-cell-key="${pureCellKeyGen(rowKeyValue, colKeyValue)}"]`);
+    if (!cellEl) return;
     const { className, method, duration, keyframe } = {
       className: HIGHLIGHT_CELL_CLASS,
       method: "animation",
       ...defaultHighlightDimOption.value,
       ...option
     };
-    if (!cellEl) return;
     if (method === "animation") {
       cellEl.animate(keyframe, duration);
     } else {
@@ -678,17 +681,16 @@ function useHighlight({ props, stkTableId, tableContainerRef }) {
   }
   function setHighlightDimRow(rowKeyValues, option = {}) {
     if (!Array.isArray(rowKeyValues)) rowKeyValues = [rowKeyValues];
+    if (!rowKeyValues.length) return;
     const { className, method, keyframe, duration } = {
       className: HIGHLIGHT_ROW_CLASS,
       method: "animation",
       ...defaultHighlightDimOption.value,
       ...option
     };
-    if (method === "css") {
-      highlightRowsInCssKeyframe(rowKeyValues, className, duration);
-    } else if (method === "animation") {
+    if (method === "animation") {
       if (props.virtual) {
-        const nowTs = Date.now();
+        const nowTs = performance.now();
         for (let i = 0; i < rowKeyValues.length; i++) {
           const rowKeyValue = rowKeyValues[i];
           const store = { ts: nowTs, visible: false, keyframe, duration };
@@ -703,6 +705,8 @@ function useHighlight({ props, stkTableId, tableContainerRef }) {
           rowEl.animate(keyframe, duration);
         }
       }
+    } else {
+      highlightRowsInCssKeyframe(rowKeyValues, className, duration);
     }
   }
   function highlightRowsInCssKeyframe(rowKeyValues, className, duration) {
@@ -900,6 +904,64 @@ function useRowExpand({ dataSourceCopy, rowKeyGen, emits }) {
     setRowExpand
   };
 }
+function useScrollRowByRow({ props, tableContainerRef }) {
+  let isMouseDown = false;
+  let isAddListeners = false;
+  let lastScrollTop = 0;
+  const isDragScroll = ref(false);
+  const onlyDragScroll = computed(() => props.scrollRowByRow === "scrollbar");
+  const isSRBRActive = computed(() => {
+    if (onlyDragScroll.value) {
+      return isDragScroll.value;
+    }
+    return props.scrollRowByRow;
+  });
+  watch(onlyDragScroll, (v) => {
+    if (v) {
+      addEventListener();
+    } else {
+      removeEventListener();
+    }
+  });
+  onMounted(() => {
+    addEventListener();
+  });
+  onUnmounted(() => {
+    removeEventListener();
+  });
+  function addEventListener() {
+    if (isAddListeners || !onlyDragScroll.value) return;
+    const container = tableContainerRef.value;
+    if (!container) return;
+    container.addEventListener("mousedown", handleMouseDown);
+    container.addEventListener("mouseup", handleMouseUp);
+    container.addEventListener("scroll", handleScroll);
+    isAddListeners = true;
+  }
+  function removeEventListener() {
+    const container = tableContainerRef.value;
+    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;
+  }
+  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 };
+}
 function useThDrag({ props, emits, colKeyGen }) {
   const findParentTH = (e) => e.target.closest("th");
   const dragConfig = computed(() => {
@@ -1064,6 +1126,125 @@ function useTrDrag({ props, emits, dataSourceCopy }) {
     onTrDragEnd
   };
 }
+function useTree({ props, dataSourceCopy, rowKeyGen, emits }) {
+  const { defaultExpandAll, defaultExpandKeys, defaultExpandLevel } = props.treeConfig;
+  function toggleTreeNode(row, col) {
+    const expand = row ? !row.__T_EXPANDED__ : false;
+    privateSetTreeExpand(row, { expand, col, isClick: true });
+  }
+  function privateSetTreeExpand(row, option) {
+    const rowKeyOrRowArr = Array.isArray(row) ? row : [row];
+    const tempData = dataSourceCopy.value.slice();
+    for (let i = 0; i < rowKeyOrRowArr.length; i++) {
+      const rowKeyOrRow = rowKeyOrRowArr[i];
+      let rowKey;
+      if (typeof rowKeyOrRow === "string") {
+        rowKey = rowKeyOrRow;
+      } else {
+        rowKey = rowKeyGen(rowKeyOrRow);
+      }
+      const index = tempData.findIndex((it) => rowKeyGen(it) === rowKey);
+      if (index === -1) {
+        console.warn("treeExpandRow failed.rowKey:", rowKey);
+        return;
+      }
+      const row2 = tempData[index];
+      const level = row2.__T_LV__ || 0;
+      let expanded = option == null ? void 0 : option.expand;
+      if (expanded === void 0) {
+        expanded = !row2.__T_EXPANDED__;
+      }
+      if (expanded) {
+        const children = expandNode(row2, level);
+        tempData.splice(index + 1, 0, ...children);
+      } else {
+        const deleteCount = foldNode(index, tempData, level);
+        tempData.splice(index + 1, deleteCount);
+      }
+      setNodeExpanded(row2, expanded, level);
+      if (option.isClick) {
+        emits("toggle-tree-expand", { expanded: Boolean(expanded), row: row2, col: option.col });
+      }
+    }
+    dataSourceCopy.value = tempData;
+  }
+  function setTreeExpand(row, option) {
+    privateSetTreeExpand(row, { ...option, isClick: false });
+  }
+  function setNodeExpanded(row, expanded, level, parent) {
+    row.__T_EXPANDED__ = expanded;
+    if (level !== void 0) {
+      row.__T_LV__ = level;
+    }
+    if (parent) {
+      row.__T_PARENT_K__ = rowKeyGen(parent);
+    }
+  }
+  function flatTreeData(data) {
+    const result = [];
+    (function recursion(data2, level, parent) {
+      if (!data2) return;
+      for (let i = 0; i < data2.length; i++) {
+        const item = data2[i];
+        result.push(item);
+        const isExpanded = Boolean(item.__T_EXPANDED__);
+        setNodeExpanded(item, isExpanded, level, parent);
+        if (!isExpanded) {
+          if (defaultExpandAll) {
+            setNodeExpanded(item, true);
+          } else {
+            if (defaultExpandLevel) {
+              if (level < defaultExpandLevel) {
+                setNodeExpanded(item, true);
+              }
+            }
+            if (defaultExpandKeys) {
+              if (defaultExpandKeys.includes(rowKeyGen(item))) {
+                setNodeExpanded(item, true);
+              }
+            }
+            if (!item.__T_EXPANDED__) {
+              continue;
+            }
+          }
+        }
+        recursion(item.children, level + 1, item);
+      }
+    })(data, 0);
+    return result;
+  }
+  function expandNode(row, level) {
+    let result = [];
+    row.children && row.children.forEach((child) => {
+      result.push(child);
+      const childLv = level + 1;
+      if (child.__T_EXPANDED__ && child.children) {
+        const res = expandNode(child, childLv);
+        result = result.concat(res);
+      } else {
+        setNodeExpanded(child, false, childLv, row);
+      }
+    });
+    return result;
+  }
+  function foldNode(index, tempData, level) {
+    let deleteCount = 0;
+    for (let i = index + 1; i < tempData.length; i++) {
+      const child = tempData[i];
+      if (child.__T_LV__ && child.__T_LV__ > level) {
+        deleteCount++;
+      } else {
+        break;
+      }
+    }
+    return deleteCount;
+  }
+  return {
+    toggleTreeNode,
+    setTreeExpand,
+    flatTreeData
+  };
+}
 const VUE2_SCROLL_TIMEOUT_MS = 200;
 function useVirtualScroll({
   props,
@@ -1380,123 +1561,75 @@ function useVirtualScroll({
     clearAllAutoHeight
   };
 }
-function useTree({ props, dataSourceCopy, rowKeyGen, emits }) {
-  const { defaultExpandAll, defaultExpandKeys, defaultExpandLevel } = props.treeConfig;
-  function toggleTreeNode(row, col) {
-    const expand = row ? !row.__T_EXPANDED__ : false;
-    privateSetTreeExpand(row, { expand, col, isClick: true });
-  }
-  function privateSetTreeExpand(row, option) {
-    const rowKeyOrRowArr = Array.isArray(row) ? row : [row];
-    const tempData = dataSourceCopy.value.slice();
-    for (let i = 0; i < rowKeyOrRowArr.length; i++) {
-      const rowKeyOrRow = rowKeyOrRowArr[i];
-      let rowKey;
-      if (typeof rowKeyOrRow === "string") {
-        rowKey = rowKeyOrRow;
-      } else {
-        rowKey = rowKeyGen(rowKeyOrRow);
-      }
-      const index = tempData.findIndex((it) => rowKeyGen(it) === rowKey);
-      if (index === -1) {
-        console.warn("treeExpandRow failed.rowKey:", rowKey);
-        return;
-      }
-      const row2 = tempData[index];
-      const level = row2.__T_LV__ || 0;
-      let expanded = option == null ? void 0 : option.expand;
-      if (expanded === void 0) {
-        expanded = !row2.__T_EXPANDED__;
-      }
-      if (expanded) {
-        const children = expandNode(row2, level);
-        tempData.splice(index + 1, 0, ...children);
-      } else {
-        const deleteCount = foldNode(index, tempData, level);
-        tempData.splice(index + 1, deleteCount);
-      }
-      setNodeExpanded(row2, expanded, level);
-      if (option.isClick) {
-        emits("toggle-tree-expand", { expanded: Boolean(expanded), row: row2, col: option.col });
-      }
-    }
-    dataSourceCopy.value = tempData;
-  }
-  function setTreeExpand(row, option) {
-    privateSetTreeExpand(row, { ...option, isClick: false });
-  }
-  function setNodeExpanded(row, expanded, level, parent) {
-    row.__T_EXPANDED__ = expanded;
-    if (level !== void 0) {
-      row.__T_LV__ = level;
-    }
-    if (parent) {
-      row.__T_PARENT_K__ = rowKeyGen(parent);
+function useMergeCells({
+  props,
+  tableHeaderLast,
+  rowKeyGen,
+  colKeyGen,
+  virtual_dataSourcePart
+}) {
+  const hiddenCellMap = ref({});
+  const hoverRowMap = ref({});
+  const hoverMergedCells = ref(/* @__PURE__ */ new Set());
+  const activeMergedCells = ref(/* @__PURE__ */ new Set());
+  watch([virtual_dataSourcePart, tableHeaderLast], () => {
+    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);
+      }
+      if (!hoverRowMap.value[rowKey]) hoverRowMap.value[rowKey] = /* @__PURE__ */ new Set();
+      hoverRowMap.value[rowKey].add(mergeCellKey);
     }
   }
-  function flatTreeData(data) {
-    const result = [];
-    (function recursion(data2, level, parent) {
-      if (!data2) return;
-      for (let i = 0; i < data2.length; i++) {
-        const item = data2[i];
-        result.push(item);
-        const isExpanded = Boolean(item.__T_EXPANDED__);
-        setNodeExpanded(item, isExpanded, level, parent);
-        if (!isExpanded) {
-          if (defaultExpandAll) {
-            setNodeExpanded(item, true);
-          } else {
-            if (defaultExpandLevel) {
-              if (level < defaultExpandLevel) {
-                setNodeExpanded(item, true);
-              }
-            }
-            if (defaultExpandKeys) {
-              if (defaultExpandKeys.includes(rowKeyGen(item))) {
-                setNodeExpanded(item, true);
-              }
-            }
-            if (!item.__T_EXPANDED__) {
-              continue;
-            }
-          }
-        }
-        recursion(item.children, level + 1, item);
-      }
-    })(data, 0);
-    return result;
+  function mergeCellsWrapper(row, col, rowIndex, colIndex) {
+    if (!col.mergeCells) return;
+    let { colspan, rowspan } = col.mergeCells({ row, col, rowIndex, colIndex }) || {};
+    colspan = colspan || 1;
+    rowspan = rowspan || 1;
+    if (colspan === 1 && rowspan === 1) return;
+    const rowKey = rowKeyGen(row);
+    const colKey = colKeyGen.value(col);
+    const dataSourceSlice = virtual_dataSourcePart.value.slice();
+    const curColIndex = tableHeaderLast.value.findIndex((item) => colKeyGen.value(item) === colKey);
+    const curRowIndex = dataSourceSlice.findIndex((item) => rowKeyGen(item) === rowKey);
+    const mergedCellKey = pureCellKeyGen(rowKey, colKey);
+    if (curRowIndex === -1) return;
+    for (let i = curRowIndex; i < curRowIndex + rowspan; i++) {
+      const row2 = dataSourceSlice[i];
+      if (!row2) break;
+      const rKey = rowKeyGen(row2);
+      const isSelfRow = i === curRowIndex;
+      hideCells(rKey, curColIndex, colspan, isSelfRow, mergedCellKey);
+    }
+    return { colspan, rowspan };
   }
-  function expandNode(row, level) {
-    let result = [];
-    row.children && row.children.forEach((child) => {
-      result.push(child);
-      const childLv = level + 1;
-      if (child.__T_EXPANDED__ && child.children) {
-        const res = expandNode(child, childLv);
-        result = result.concat(res);
-      } else {
-        setNodeExpanded(child, false, childLv, row);
-      }
-    });
-    return result;
+  function updateHoverMergedCells(rowKey) {
+    const set = rowKey === void 0 ? null : hoverRowMap.value[rowKey];
+    hoverMergedCells.value = set || /* @__PURE__ */ new Set();
   }
-  function foldNode(index, tempData, level) {
-    let deleteCount = 0;
-    for (let i = index + 1; i < tempData.length; i++) {
-      const child = tempData[i];
-      if (child.__T_LV__ && child.__T_LV__ > level) {
-        deleteCount++;
-      } else {
-        break;
-      }
+  function updateActiveMergedCells(clear) {
+    if (!props.rowActive) return;
+    if (clear) {
+      activeMergedCells.value.clear();
+    } else {
+      activeMergedCells.value = new Set(hoverMergedCells.value);
     }
-    return deleteCount;
   }
   return {
-    toggleTreeNode,
-    setTreeExpand,
-    flatTreeData
+    hiddenCellMap,
+    mergeCellsWrapper,
+    hoverMergedCells,
+    updateHoverMergedCells,
+    activeMergedCells,
+    updateActiveMergedCells
   };
 }
 const _hoisted_1 = ["data-col-key", "draggable", "rowspan", "colspan", "title", "onClick"];
@@ -1538,7 +1671,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     columns: { default: () => [] },
     dataSource: { default: () => [] },
     rowKey: { type: [String, Number, Function], default: "" },
-    colKey: {},
+    colKey: { type: [String, Number, Function], default: void 0 },
     emptyCellText: { type: [String, Function], default: "--" },
     noDataFull: { type: Boolean, default: false },
     showNoData: { type: Boolean, default: true },
@@ -1569,7 +1702,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     treeConfig: { default: () => ({}) },
     cellFixedMode: { default: "sticky" },
     smoothScroll: { type: Boolean, default: DEFAULT_SMOOTH_SCROLL },
-    scrollRowByRow: { type: Boolean, default: false }
+    scrollRowByRow: { type: [Boolean, String], default: false }
   },
   emits: ["sort-change", "row-click", "current-change", "cell-selected", "row-dblclick", "header-row-menu", "row-menu", "cell-click", "cell-mouseenter", "cell-mouseleave", "cell-mouseover", "cell-mousedown", "header-cell-click", "scroll", "scroll-x", "col-order-change", "th-drag-start", "th-drop", "row-order-change", "col-resize", "toggle-row-expand", "toggle-tree-expand", "update:columns"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -1582,8 +1715,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const trRef = ref();
     const isRelativeMode = ref(IS_LEGACY_MODE ? true : props.cellFixedMode === "relative");
     const currentRow = shallowRef();
-    const currentRowKey = ref(void 0);
-    const currentSelectedCellKey = ref(void 0);
+    const currentRowKey = ref();
+    const currentSelectedCellKey = ref();
     let currentHoverRow = null;
     const currentHoverRowKey = ref(null);
     let sortCol = ref();
@@ -1623,6 +1756,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     });
     const rowKeyGenCache = /* @__PURE__ */ new WeakMap();
+    const { isSRBRActive } = useScrollRowByRow({ props, tableContainerRef });
     const { onThDragStart, onThDragOver, onThDrop, isHeaderDraggable } = useThDrag({ props, emits, colKeyGen });
     const { onTrDragStart, onTrDrop, onTrDragOver, onTrDragEnd, onTrDragEnter } = useTrDrag({ props, emits, dataSourceCopy });
     const {
@@ -1683,6 +1817,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     const { toggleExpandRow, setRowExpand } = useRowExpand({ dataSourceCopy, rowKeyGen, emits });
     const { toggleTreeNode, setTreeExpand, flatTreeData } = useTree({ props, dataSourceCopy, rowKeyGen, emits });
+    const { hiddenCellMap, mergeCellsWrapper, hoverMergedCells, updateHoverMergedCells, activeMergedCells, updateActiveMergedCells } = useMergeCells({
+      props,
+      tableHeaderLast,
+      rowKeyGen,
+      colKeyGen,
+      virtual_dataSourcePart
+    });
     watch(
       () => props.columns,
       () => {
@@ -1733,7 +1874,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           nextTick(() => initVirtualScrollY());
         }
         const sortColValue = sortCol.value;
-        if (sortColValue) {
+        if (!isEmptyValue(sortColValue) && !props.sortRemote) {
           const colKey = colKeyGen.value;
           const column = tableHeaderLast.value.find((it) => colKey(it) === sortColValue);
           onColumnSort(column, false);
@@ -1818,10 +1959,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           const rowSpan = col.children ? 1 : maxDeep - depth + 1;
           const colSpan = colChildrenLen;
           if (rowSpan > 1) {
-            col.rowSpan = rowSpan;
+            col.__R_SP__ = rowSpan;
           }
           if (colSpan > 1) {
-            col.colSpan = colSpan;
+            col.__C_SP__ = colSpan;
           }
           allChildrenLen += colChildrenLen;
           allChildrenWidthSum += colWidth;
@@ -1946,9 +2087,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         }
         currentRow.value = void 0;
         currentRowKey.value = void 0;
+        updateActiveMergedCells(true);
       } else {
         currentRow.value = row;
         currentRowKey.value = rowKeyGen(row);
+        updateActiveMergedCells();
       }
       emits("current-change", e, row, { select: !isCurrentRow });
     }
@@ -2053,7 +2196,23 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function onTrMouseOver(_e, row) {
       if (currentHoverRow === row) return;
       currentHoverRow = row;
-      currentHoverRowKey.value = rowKeyGen(row);
+      const rowKey = rowKeyGen(row);
+      if (props.showTrHoverClass) {
+        currentHoverRowKey.value = rowKey;
+      }
+      if (props.rowHover) {
+        updateHoverMergedCells(rowKey);
+      }
+    }
+    function onTrMouseLeave(e) {
+      if (e.target.tagName !== "TR") return;
+      currentHoverRow = null;
+      if (props.showTrHoverClass) {
+        currentHoverRowKey.value = null;
+      }
+      if (props.rowHover) {
+        updateHoverMergedCells(void 0);
+      }
     }
     function setCurrentRow(rowKeyOrRow, option = { silent: false }) {
       if (!dataSourceCopy.value.length) return;
@@ -2273,7 +2432,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           "header-text-overflow": props.showHeaderOverflow,
           "fixed-relative-mode": isRelativeMode.value,
           "auto-row-height": props.autoRowHeight,
-          "scroll-row-by-row": props.scrollRowByRow
+          "scroll-row-by-row": unref(isSRBRActive)
         }]),
         style: normalizeStyle({
           "--row-height": props.autoRowHeight ? void 0 : unref(virtualScroll).rowHeight + "px",
@@ -2284,7 +2443,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         onScroll: onTableScroll,
         onWheel: onTableWheel
       }, [
-        props.scrollRowByRow && _ctx.virtual ? (openBlock(), createElementBlock("div", {
+        unref(isSRBRActive) && _ctx.virtual ? (openBlock(), createElementBlock("div", {
           key: 0,
           class: "row-by-row-table-height",
           style: normalizeStyle({ height: dataSourceCopy.value.length * unref(virtualScroll).rowHeight + "px" })
@@ -2321,8 +2480,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     key: colKeyGen.value(col),
                     "data-col-key": colKeyGen.value(col),
                     draggable: unref(isHeaderDraggable)(col) ? "true" : "false",
-                    rowspan: unref(virtualX_on) ? 1 : col.rowSpan,
-                    colspan: col.colSpan,
+                    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([
@@ -2349,7 +2508,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     }, null, 40, _hoisted_2)) : createCommentVNode("", true),
                     createElementVNode("div", {
                       class: "table-header-cell-wrapper",
-                      style: normalizeStyle({ "--row-span": unref(virtualX_on) ? 1 : col.rowSpan })
+                      style: normalizeStyle({ "--row-span": unref(virtualX_on) ? 1 : col.__R_SP__ })
                     }, [
                       col.customHeaderCell ? (openBlock(), createBlock(resolveDynamicComponent(col.customHeaderCell), {
                         key: 0,
@@ -2384,14 +2543,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ], 512)) : createCommentVNode("", true),
           createElementVNode("tbody", {
             class: "stk-tbody-main",
-            onDragover: _cache[4] || (_cache[4] = //@ts-ignore
+            onDragover: _cache[5] || (_cache[5] = //@ts-ignore
             (...args) => unref(onTrDragOver) && unref(onTrDragOver)(...args)),
-            onDragenter: _cache[5] || (_cache[5] = //@ts-ignore
+            onDragenter: _cache[6] || (_cache[6] = //@ts-ignore
             (...args) => unref(onTrDragEnter) && unref(onTrDragEnter)(...args)),
-            onDragend: _cache[6] || (_cache[6] = //@ts-ignore
+            onDragend: _cache[7] || (_cache[7] = //@ts-ignore
             (...args) => unref(onTrDragEnd) && unref(onTrDragEnd)(...args))
           }, [
-            unref(virtual_on) && !props.scrollRowByRow ? (openBlock(), createElementBlock("tr", {
+            unref(virtual_on) && !unref(isSRBRActive) ? (openBlock(), createElementBlock("tr", {
               key: 0,
               style: normalizeStyle(`height:${unref(virtualScroll).offsetTop}px`),
               class: "padding-top-tr"
@@ -2427,6 +2586,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 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))
               }, [
                 unref(virtualX_on) ? (openBlock(), createElementBlock("td", _hoisted_7)) : createCommentVNode("", true),
@@ -2446,87 +2606,94 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     })
                   ])
                 ], 8, _hoisted_8)) : (openBlock(true), createElementBlock(Fragment, { key: 2 }, renderList(unref(virtualX_columnPart), (col, colIndex) => {
-                  return openBlock(), createElementBlock("td", {
-                    key: colKeyGen.value(col),
-                    "data-cell-key": cellKeyGen(row, col),
-                    style: normalizeStyle(cellStyleMap.value[unref(TagType).TD].get(colKeyGen.value(col))),
-                    class: normalizeClass([
-                      col.className,
-                      unref(fixedColClassMap).get(colKeyGen.value(col)),
-                      {
-                        "seq-column": col.type === "seq",
-                        active: currentSelectedCellKey.value === cellKeyGen(row, col),
-                        expanded: col.type === "expand" && (row.__EXPANDED__ ? colKeyGen.value(row.__EXPANDED__) === colKeyGen.value(col) : false),
-                        "tree-expanded": col.type === "tree-node" && row.__T_EXPANDED__,
-                        "drag-row-cell": col.type === "dragRow"
-                      }
-                    ]),
-                    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)
-                  }, [
-                    col.type === "expand" || col.type === "tree-node" ? (openBlock(), createElementBlock("div", {
-                      key: 0,
-                      class: "table-cell-wrapper",
-                      title: row == null ? void 0 : row[col.dataIndex],
-                      style: normalizeStyle({ paddingLeft: row.__T_LV__ && row.__T_LV__ * 16 + "px" })
-                    }, [
-                      col.customCell ? (openBlock(), createBlock(resolveDynamicComponent(col.customCell), {
+                  var _a2;
+                  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.__EXPANDED__ ? colKeyGen.value(row.__EXPANDED__) === colKeyGen.value(col) : false),
+                          "tree-expanded": col.type === "tree-node" && row.__T_EXPANDED__,
+                          "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)
+                    }), [
+                      col.type === "expand" || col.type === "tree-node" ? (openBlock(), createElementBlock("div", {
                         key: 0,
-                        col,
-                        row,
-                        rowIndex: getRowIndex(rowIndex),
-                        colIndex,
-                        cellValue: row && row[col.dataIndex],
-                        expanded: row && row.__EXPANDED__ || null,
-                        "tree-expanded": row && row.__T_EXPANDED__ || null
-                      }, {
-                        foldIcon: withCtx(() => [
-                          createVNode(TriangleIcon)
-                        ]),
-                        _: 2
-                      }, 1032, ["col", "row", "rowIndex", "colIndex", "cellValue", "expanded", "tree-expanded"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                        col.type === "expand" || col.type === "tree-node" && row.children !== void 0 ? (openBlock(), createBlock(TriangleIcon, {
-                          key: 0,
-                          onClick: ($event) => triangleClick($event, row, col)
-                        }, null, 8, ["onClick"])) : createCommentVNode("", true),
-                        createElementVNode("span", {
-                          style: normalizeStyle(col.type === "tree-node" && !row.children ? "padding-left: 16px;" : "")
-                        }, toDisplayString((row == null ? void 0 : row[col.dataIndex]) ?? ""), 5)
-                      ], 64))
-                    ], 12, _hoisted_11)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                      col.customCell ? (openBlock(), createBlock(resolveDynamicComponent(col.customCell), {
-                        key: 0,
-                        class: "table-cell-wrapper",
-                        col,
-                        row,
-                        rowIndex: getRowIndex(rowIndex),
-                        colIndex,
-                        cellValue: row && row[col.dataIndex]
-                      }, null, 8, ["col", "row", "rowIndex", "colIndex", "cellValue"])) : (openBlock(), createElementBlock("div", {
-                        key: 1,
                         class: "table-cell-wrapper",
-                        title: col.type !== "seq" ? row == null ? void 0 : row[col.dataIndex] : ""
+                        title: row == null ? void 0 : row[col.dataIndex],
+                        style: normalizeStyle({ paddingLeft: row.__T_LV__ && row.__T_LV__ * 16 + "px" })
                       }, [
-                        col.type === "seq" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                          createTextVNode(toDisplayString((props.seqConfig.startIndex || 0) + getRowIndex(rowIndex) + 1), 1)
-                        ], 64)) : col.type === "dragRow" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                          createVNode(DragHandle, {
-                            onDragstart: ($event) => unref(onTrDragStart)($event, getRowIndex(rowIndex))
-                          }, null, 8, ["onDragstart"]),
-                          createElementVNode("span", null, toDisplayString((row == null ? void 0 : row[col.dataIndex]) ?? ""), 1)
-                        ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
-                          createTextVNode(toDisplayString((row == null ? void 0 : row[col.dataIndex]) ?? getEmptyCellText.value(col, row)), 1)
+                        col.customCell ? (openBlock(), createBlock(resolveDynamicComponent(col.customCell), {
+                          key: 0,
+                          col,
+                          row,
+                          rowIndex: getRowIndex(rowIndex),
+                          colIndex,
+                          cellValue: row && row[col.dataIndex],
+                          expanded: row && row.__EXPANDED__ || null,
+                          "tree-expanded": row && row.__T_EXPANDED__ || null
+                        }, {
+                          foldIcon: withCtx(() => [
+                            createVNode(TriangleIcon)
+                          ]),
+                          _: 2
+                        }, 1032, ["col", "row", "rowIndex", "colIndex", "cellValue", "expanded", "tree-expanded"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                          col.type === "expand" || col.type === "tree-node" && row.children !== void 0 ? (openBlock(), createBlock(TriangleIcon, {
+                            key: 0,
+                            onClick: ($event) => triangleClick($event, row, col)
+                          }, null, 8, ["onClick"])) : createCommentVNode("", true),
+                          createElementVNode("span", {
+                            style: normalizeStyle(col.type === "tree-node" && !row.children ? "padding-left: 16px;" : "")
+                          }, toDisplayString((row == null ? void 0 : row[col.dataIndex]) ?? ""), 5)
                         ], 64))
-                      ], 8, _hoisted_12))
-                    ], 64))
-                  ], 46, _hoisted_10);
-                }), 128))
+                      ], 12, _hoisted_11)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                        col.customCell ? (openBlock(), createBlock(resolveDynamicComponent(col.customCell), {
+                          key: 0,
+                          class: "table-cell-wrapper",
+                          col,
+                          row,
+                          rowIndex: getRowIndex(rowIndex),
+                          colIndex,
+                          cellValue: row && row[col.dataIndex]
+                        }, null, 8, ["col", "row", "rowIndex", "colIndex", "cellValue"])) : (openBlock(), createElementBlock("div", {
+                          key: 1,
+                          class: "table-cell-wrapper",
+                          title: col.type !== "seq" ? row == null ? void 0 : row[col.dataIndex] : ""
+                        }, [
+                          col.type === "seq" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                            createTextVNode(toDisplayString((props.seqConfig.startIndex || 0) + getRowIndex(rowIndex) + 1), 1)
+                          ], 64)) : col.type === "dragRow" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                            createVNode(DragHandle, {
+                              onDragstart: ($event) => unref(onTrDragStart)($event, getRowIndex(rowIndex))
+                            }, null, 8, ["onDragstart"]),
+                            createElementVNode("span", null, toDisplayString((row == null ? void 0 : row[col.dataIndex]) ?? ""), 1)
+                          ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+                            createTextVNode(toDisplayString((row == null ? void 0 : row[col.dataIndex]) ?? getEmptyCellText.value(col, row)), 1)
+                          ], 64))
+                        ], 8, _hoisted_12))
+                      ], 64))
+                    ], 16, _hoisted_10)) : createCommentVNode("", true)
+                  ], 64);
+                }), 256))
               ], 46, _hoisted_6);
             }), 128)),
-            unref(virtual_on) && !props.scrollRowByRow ? (openBlock(), createElementBlock("tr", {
+            unref(virtual_on) && !unref(isSRBRActive) ? (openBlock(), createElementBlock("tr", {
               key: 1,
               style: normalizeStyle(`height: ${unref(virtual_offsetBottom)}px`)
             }, null, 4)) : createCommentVNode("", true)
@@ -2537,7 +2704,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           class: normalizeClass(["stk-table-no-data", { "no-data-full": _ctx.noDataFull }])
         }, [
           renderSlot(_ctx.$slots, "empty", {}, () => [
-            _cache[7] || (_cache[7] = createTextVNode("暂无数据"))
+            _cache[8] || (_cache[8] = createTextVNode("暂无数据"))
           ])
         ], 2)) : createCommentVNode("", true),
         renderSlot(_ctx.$slots, "customBottom")