stk-table-vue 0.8.11 → 0.8.13

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

@@ -56,11 +56,11 @@ declare function getSortColumns(): {
 }[];
 declare function __VLS_template(): {
     tableHeader?(_: {
-        col: PrivateStkTableColumn<any>;
+        col: PrivateStkTableColumn<PrivateRowDT>;
     }): any;
     expand?(_: {
         row: any;
-        col: any;
+        col: StkTableColumn<any> | undefined;
     }): any;
     empty?(_: {}): any;
     customBottom?(_: {}): any;
@@ -135,7 +135,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     /** 单元格再次点击否可以取消选中 (cellActive=true)*/
     selectedCellRevokable?: boolean;
     /** 表头是否可拖动。支持回调函数。 */
-    headerDrag?: boolean | HeaderDragConfig;
+    headerDrag?: boolean | HeaderDragConfig<DT>;
     /**
      * 给行附加className<br>
      * FIXME: 是否需要优化，因为不传此prop会使表格行一直执行空函数，是否有影响
@@ -157,7 +157,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
      * "v" - 仅展示竖线
      * "body-v" - 仅表体展示竖线
      */
-    bordered?: boolean | "h" | "v" | "body-v";
+    bordered?: boolean | "h" | "v" | "body-v" | "body-h";
     /**
      * 自动重新计算虚拟滚动高度宽度。默认true
      * [非响应式]
@@ -212,7 +212,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     headless: boolean;
     theme: string;
     rowHeight: number;
-    autoRowHeight: boolean;
+    autoRowHeight: () => false;
     rowHover: boolean;
     rowActive: () => Required<RowActiveOption<any>>;
     rowCurrentRevokable: boolean;
@@ -233,9 +233,9 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     cellHover: boolean;
     cellActive: boolean;
     selectedCellRevokable: boolean;
-    headerDrag: boolean;
+    headerDrag: () => false;
     rowClassName: () => "";
-    colResizable: boolean;
+    colResizable: () => false;
     colMinWidth: number;
     bordered: boolean;
     autoResize: boolean;
@@ -504,7 +504,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     /** 单元格再次点击否可以取消选中 (cellActive=true)*/
     selectedCellRevokable?: boolean;
     /** 表头是否可拖动。支持回调函数。 */
-    headerDrag?: boolean | HeaderDragConfig;
+    headerDrag?: boolean | HeaderDragConfig<DT>;
     /**
      * 给行附加className<br>
      * FIXME: 是否需要优化，因为不传此prop会使表格行一直执行空函数，是否有影响
@@ -526,7 +526,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
      * "v" - 仅展示竖线
      * "body-v" - 仅表体展示竖线
      */
-    bordered?: boolean | "h" | "v" | "body-v";
+    bordered?: boolean | "h" | "v" | "body-v" | "body-h";
     /**
      * 自动重新计算虚拟滚动高度宽度。默认true
      * [非响应式]
@@ -581,7 +581,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     headless: boolean;
     theme: string;
     rowHeight: number;
-    autoRowHeight: boolean;
+    autoRowHeight: () => false;
     rowHover: boolean;
     rowActive: () => Required<RowActiveOption<any>>;
     rowCurrentRevokable: boolean;
@@ -602,9 +602,9 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     cellHover: boolean;
     cellActive: boolean;
     selectedCellRevokable: boolean;
-    headerDrag: boolean;
+    headerDrag: () => false;
     rowClassName: () => "";
-    colResizable: boolean;
+    colResizable: () => false;
     colMinWidth: number;
     bordered: boolean;
     autoResize: boolean;
@@ -710,11 +710,11 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     cellHover: boolean;
     cellActive: boolean;
     selectedCellRevokable: boolean;
-    headerDrag: boolean | HeaderDragConfig;
+    headerDrag: boolean | HeaderDragConfig<DT>;
     rowClassName: (row: DT, i: number) => string | undefined;
     colResizable: boolean | ColResizableConfig<DT>;
     colMinWidth: number;
-    bordered: boolean | "h" | "v" | "body-v";
+    bordered: boolean | "h" | "v" | "body-v" | "body-h";
     autoResize: boolean | (() => void);
     fixedColShadow: boolean;
     hideHeaderTitle: boolean | string[];

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

@@ -18,9 +18,9 @@ export type CustomCellProps<T extends Record<string, any>> = {
      * - 不展开: null
      * - 展开: 返回column配置
      */
-    expanded: PrivateRowDT['__EXP__'];
+    expanded?: PrivateRowDT['__EXP__'];
     /** if tree expanded */
-    treeExpanded: PrivateRowDT['__T_EXP__'];
+    treeExpanded?: PrivateRowDT['__T_EXP__'];
 };
 export type CustomHeaderCellProps<T extends Record<string, any>> = {
     col: StkTableColumn<T>;
@@ -144,7 +144,7 @@ export type PrivateRowDT = {
      * if row expanded
      * @private
      */
-    __EXP__?: StkTableColumn<any> | null;
+    __EXP__?: StkTableColumn<any>;
     /**
      * if tree node row expanded
      * @private
@@ -160,6 +160,11 @@ export type PrivateRowDT = {
      * @private
      */
     __T_LV__?: number;
+    /** expanded row */
+    __EXP_R__?: any;
+    /** expanded col */
+    __EXP_C__?: StkTableColumn<any>;
+    children?: any[];
 };
 export type SortOption<T extends Record<string, any>> = Pick<StkTableColumn<T>, 'sorter' | 'dataIndex' | 'sortField' | 'sortType'>;
 export type SortState<T extends Record<string, any>> = Pick<StkTableColumn<T>, 'dataIndex' | 'sortField' | 'sortType'> & {
@@ -227,10 +232,6 @@ export type ExpandConfig = {
     /** worked in virtual mode */
     height?: number;
 };
-export type ExpandedRow = PrivateRowDT & {
-    __EXPANDED_ROW__: any;
-    __EXPANDED_COL__: any;
-};
 /** drag row config */
 export type DragRowConfig = {
     mode?: 'none' | 'insert' | 'swap';

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

@@ -1,13 +1,13 @@
 import { Ref, ShallowRef } from 'vue';
-import { PrivateStkTableColumn, RowKeyGen, UniqKey } from './types';
+import { PrivateRowDT, PrivateStkTableColumn, RowKeyGen, UniqKey } from './types';
 
 type Option<DT extends Record<string, any>> = {
     props: any;
     tableContainerRef: Ref<HTMLElement | undefined>;
     trRef: Ref<HTMLTableRowElement[] | undefined>;
-    dataSourceCopy: ShallowRef<DT[]>;
-    tableHeaderLast: ShallowRef<PrivateStkTableColumn<DT>[]>;
-    tableHeaders: ShallowRef<PrivateStkTableColumn<DT>[][]>;
+    dataSourceCopy: ShallowRef<PrivateRowDT[]>;
+    tableHeaderLast: ShallowRef<PrivateStkTableColumn<PrivateRowDT>[]>;
+    tableHeaders: ShallowRef<PrivateStkTableColumn<PrivateRowDT>[][]>;
     rowKeyGen: RowKeyGen;
     maxRowSpan: Map<UniqKey, number>;
 };
@@ -86,10 +86,10 @@ export declare function useVirtualScroll<DT extends Record<string, any>>({ props
         scrollLeft: number;
     }>;
     virtual_on: import('vue').ComputedRef<any>;
-    virtual_dataSourcePart: import('vue').ComputedRef<DT[]>;
+    virtual_dataSourcePart: import('vue').ComputedRef<PrivateRowDT[]>;
     virtual_offsetBottom: import('vue').ComputedRef<number>;
     virtualX_on: import('vue').ComputedRef<any>;
-    virtualX_columnPart: import('vue').ComputedRef<PrivateStkTableColumn<DT>[]>;
+    virtualX_columnPart: import('vue').ComputedRef<PrivateStkTableColumn<PrivateRowDT>[]>;
     virtualX_offsetRight: import('vue').ComputedRef<number>;
     tableHeaderHeight: import('vue').ComputedRef<number>;
     initVirtualScroll: (height?: number) => void;

package/lib/stk-table-vue.js

@@ -12,7 +12,7 @@ const _hoisted_1$3 = {
   draggable: "true"
 };
 function _sfc_render$2(_ctx, _cache) {
-  return openBlock(), createElementBlock("span", _hoisted_1$3, _cache[0] || (_cache[0] = [
+  return openBlock(), createElementBlock("span", _hoisted_1$3, [..._cache[0] || (_cache[0] = [
     createElementVNode("svg", {
       viewBox: "0 0 1024 1024",
       width: "16",
@@ -21,7 +21,7 @@ function _sfc_render$2(_ctx, _cache) {
     }, [
       createElementVNode("path", { d: "M640 853.3a85.3 85.3 0 1 1 85.3-85.3 85.3 85.3 0 0 1-85.3 85.3z m-256 0a85.3 85.3 0 1 1 85.3-85.3 85.3 85.3 0 0 1-85.3 85.3z m256-256a85.3 85.3 0 1 1 85.3-85.3 85.3 85.3 0 0 1-85.3 85.3z m-256 0a85.3 85.3 0 1 1 85.3-85.3 85.3 85.3 0 0 1-85.3 85.3z m256-256a85.3 85.3 0 1 1 85.3-85.3 85.3 85.3 0 0 1-85.3 85.3zM384 341.3a85.3 85.3 0 1 1 85.3-85.3 85.3 85.3 0 0 1-85.3 85.3z" })
     ], -1)
-  ]));
+  ])]);
 }
 const DragHandle = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$2]]);
 const _sfc_main$2 = {};
@@ -32,7 +32,7 @@ const _hoisted_1$2 = {
   viewBox: "0 0 16 16"
 };
 function _sfc_render$1(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1$2, _cache[0] || (_cache[0] = [
+  return openBlock(), createElementBlock("svg", _hoisted_1$2, [..._cache[0] || (_cache[0] = [
     createElementVNode("polygon", {
       class: "arrow-up",
       fill: "#757699",
@@ -43,7 +43,7 @@ function _sfc_render$1(_ctx, _cache) {
       transform: "translate(8, 12) rotate(-180) translate(-8, -12) ",
       points: "8 10 4.8 14 11.2 14"
     }, null, -1)
-  ]));
+  ])]);
 }
 const SortIcon = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$1]]);
 const _sfc_main$1 = {};
@@ -227,9 +227,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";
@@ -917,17 +917,21 @@ 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 (!isSelfRow) {
+        if (!hoverRowMap.value[rowKey]) hoverRowMap.value[rowKey] = /* @__PURE__ */ new Set();
+        hoverRowMap.value[rowKey].add(mergeCellKey);
+      }
+      if (isSelfRow && i === startIndex) {
+        continue;
       }
-      if (!hoverRowMap.value[rowKey]) hoverRowMap.value[rowKey] = /* @__PURE__ */ new Set();
-      hoverRowMap.value[rowKey].add(mergeCellKey);
+      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,21 +941,20 @@ 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;
@@ -1003,20 +1006,20 @@ function useRowExpand({ dataSourceCopy, rowKeyGen, emits }) {
       }
     }
     const row = tempData[index];
-    const col = (data == null ? void 0 : data.col) || null;
+    const col = data == null ? void 0 : data.col;
     if (expand == null) {
       expand = isExpanded(row, col);
     }
     if (expand) {
       const newExpandRow = {
         __ROW_K__: EXPANDED_ROW_KEY_PREFIX + rowKey,
-        __EXPANDED_ROW__: row,
-        __EXPANDED_COL__: col
+        __EXP_R__: row,
+        __EXP_C__: col
       };
       tempData.splice(index + 1, 0, newExpandRow);
     }
     if (row) {
-      row.__EXP__ = expand ? col : null;
+      row[expandedKey] = expand ? col : void 0;
     }
     dataSourceCopy.value = tempData;
     if (!(data == null ? void 0 : data.silent)) {
@@ -1252,6 +1255,7 @@ function useTrDrag({ props, emits, dataSourceCopy }) {
 }
 function useTree({ props, dataSourceCopy, rowKeyGen, emits }) {
   const { defaultExpandAll, defaultExpandKeys, defaultExpandLevel } = props.treeConfig;
+  let isFirstLoad = true;
   function toggleTreeNode(row, col) {
     const expand = row ? !row.__T_EXP__ : false;
     privateSetTreeExpand(row, { expand, col, isClick: true });
@@ -1301,33 +1305,36 @@ function useTree({ props, dataSourceCopy, rowKeyGen, emits }) {
       row.__T_LV__ = level;
     }
   }
-  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_EXP__);
-        setNodeExpanded(item, isExpanded, level);
-        if (!isExpanded) {
-          if (defaultExpandAll) {
+  function recursionFlat(data, level, parent) {
+    if (!data) return [];
+    let result = [];
+    for (let i = 0; i < data.length; i++) {
+      const item = data[i];
+      result.push(item);
+      const isExpanded = Boolean(item.__T_EXP__);
+      setNodeExpanded(item, isExpanded, level);
+      if (isFirstLoad && !isExpanded) {
+        if (defaultExpandAll) {
+          setNodeExpanded(item, true);
+        } else {
+          if (defaultExpandLevel && level < defaultExpandLevel) {
+            setNodeExpanded(item, true);
+          }
+          if (defaultExpandKeys == null ? void 0 : defaultExpandKeys.includes(rowKeyGen(item))) {
             setNodeExpanded(item, true);
-          } else {
-            if (defaultExpandLevel && level < defaultExpandLevel) {
-              setNodeExpanded(item, true);
-            }
-            if (defaultExpandKeys == null ? void 0 : defaultExpandKeys.includes(rowKeyGen(item))) {
-              setNodeExpanded(item, true);
-            }
-            if (!item.__T_EXP__) {
-              continue;
-            }
           }
         }
-        recursion(item.children, level + 1);
       }
-    })(data, 0);
+      if (item.__T_EXP__) {
+        const res = recursionFlat(item.children, level + 1);
+        result = result.concat(res);
+      }
+    }
+    return result;
+  }
+  function flatTreeData(data) {
+    const result = recursionFlat(data, 0);
+    isFirstLoad = false;
     return result;
   }
   function expandNode(row, level) {
@@ -1462,7 +1469,7 @@ function useVirtualScroll({
     if (hasExpandCol.value) {
       const expandedRowHeight = (_a = props.expandConfig) == null ? void 0 : _a.height;
       const tempRowHeightFn = rowHeightFn;
-      rowHeightFn = (row) => row && row.__EXPANDED_ROW__ && expandedRowHeight || tempRowHeightFn(row);
+      rowHeightFn = (row) => row && row.__EXP_R__ && expandedRowHeight || tempRowHeightFn(row);
     }
     return rowHeightFn;
   });
@@ -1717,7 +1724,7 @@ const _hoisted_8 = {
 };
 const _hoisted_9 = ["colspan"];
 const _hoisted_10 = { class: "table-cell-wrapper" };
-const _hoisted_11 = ["data-cell-key", "onClick", "onMousedown", "onMouseenter", "onMouseleave", "onMouseover"];
+const _hoisted_11 = ["onClick", "onMousedown", "onMouseenter", "onMouseleave", "onMouseover"];
 const _hoisted_12 = ["title"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "StkTable",
@@ -1730,9 +1737,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     headless: { type: Boolean, default: false },
     theme: { default: "light" },
     rowHeight: { default: DEFAULT_ROW_HEIGHT },
-    autoRowHeight: { type: Boolean, default: false },
+    autoRowHeight: { type: [Boolean, Object], default: () => false },
     rowHover: { type: Boolean, default: true },
-    rowActive: { type: Boolean, default: () => DEFAULT_ROW_ACTIVE_CONFIG },
+    rowActive: { type: [Boolean, Object], default: () => DEFAULT_ROW_ACTIVE_CONFIG },
     rowCurrentRevokable: { type: Boolean, default: true },
     headerRowHeight: { default: DEFAULT_ROW_HEIGHT },
     virtual: { type: Boolean, default: false },
@@ -1751,9 +1758,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     cellHover: { type: Boolean, default: false },
     cellActive: { type: Boolean, default: false },
     selectedCellRevokable: { type: Boolean, default: true },
-    headerDrag: { type: Boolean, default: false },
+    headerDrag: { type: [Boolean, Object], default: () => false },
     rowClassName: { type: Function, default: () => "" },
-    colResizable: { type: Boolean, default: false },
+    colResizable: { type: [Boolean, Object], default: () => false },
     colMinWidth: { default: 10 },
     bordered: { type: [Boolean, String], default: true },
     autoResize: { type: [Boolean, Function], default: true },
@@ -2119,6 +2126,41 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       return col.title || "";
     }
+    function getTDProps(row, col) {
+      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(colKeyGen.value(col))];
+      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__) === colKeyGen.value(col) : false)) {
+        classList.push("expanded");
+      } else if (col.type === "tree-node" && row.__T_EXP__) {
+        classList.push("tree-expanded");
+      } else if (col.type === "dragRow") {
+        classList.push("drag-row-cell");
+      }
+      return {
+        "data-cell-key": cellKey,
+        style: cellStyleMap.value[TagType.TD].get(colKey),
+        class: classList
+      };
+    }
     function onColumnSort(col, click = true, options = {}) {
       if (!col) {
         console.warn("onColumnSort: not found col:", col);
@@ -2530,18 +2572,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         ref_key: "tableContainerRef",
         ref: tableContainerRef,
         class: normalizeClass(["stk-table", {
-          virtual: _ctx.virtual,
-          "virtual-x": _ctx.virtualX,
+          virtual: __props.virtual,
+          "virtual-x": __props.virtualX,
           "vt-on": unref(virtual_on),
-          light: _ctx.theme === "light",
-          dark: _ctx.theme === "dark",
-          headless: _ctx.headless,
+          light: __props.theme === "light",
+          dark: __props.theme === "dark",
+          headless: __props.headless,
           "is-col-resizing": unref(isColResizing),
           "col-resizable": props.colResizable,
           bordered: props.bordered,
-          "bordered-h": props.bordered === "h",
-          "bordered-v": props.bordered === "v",
-          "bordered-body-v": props.bordered === "body-v",
+          [`bordered-${props.bordered}`]: typeof props.bordered === "string",
           stripe: props.stripe,
           "cell-hover": props.cellHover,
           "cell-active": props.cellActive,
@@ -2567,7 +2607,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           class: "row-by-row-table-height",
           style: normalizeStyle(`height: ${SRBRTotalHeight.value}px`)
         }, null, 4)) : createCommentVNode("", true),
-        _ctx.colResizable ? (openBlock(), createElementBlock("div", {
+        __props.colResizable ? (openBlock(), createElementBlock("div", {
           key: 1,
           ref_key: "colResizeIndicatorRef",
           ref: colResizeIndicatorRef,
@@ -2577,9 +2617,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           class: normalizeClass(["stk-table-main", {
             "fixed-mode": props.fixedMode
           }]),
-          style: normalizeStyle({ width: _ctx.width, minWidth: _ctx.minWidth, maxWidth: _ctx.maxWidth })
+          style: normalizeStyle({ width: __props.width, minWidth: __props.minWidth, maxWidth: __props.maxWidth })
         }, [
-          !_ctx.headless ? (openBlock(), createElementBlock("thead", _hoisted_1, [
+          !__props.headless ? (openBlock(), createElementBlock("thead", _hoisted_1, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(tableHeaders.value, (row, rowIndex) => {
               return openBlock(), createElementBlock("tr", {
                 key: rowIndex,
@@ -2670,8 +2710,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               style: normalizeStyle(`height:${unref(virtualScroll).offsetTop}px`),
               class: "padding-top-tr"
             }, [
-              unref(virtualX_on) && _ctx.fixedMode && _ctx.headless ? (openBlock(), createElementBlock("td", _hoisted_6)) : createCommentVNode("", true),
-              _ctx.fixedMode && _ctx.headless ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(unref(virtualX_columnPart), (col) => {
+              unref(virtualX_on) && __props.fixedMode && __props.headless ? (openBlock(), createElementBlock("td", _hoisted_6)) : createCommentVNode("", true),
+              __props.fixedMode && __props.headless ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(unref(virtualX_columnPart), (col) => {
                 return openBlock(), createElementBlock("td", {
                   key: colKeyGen.value(col),
                   style: normalizeStyle(cellStyleMap.value[unref(TagType).TD].get(colKeyGen.value(col)))
@@ -2681,21 +2721,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             (openBlock(true), createElementBlock(Fragment, null, renderList(unref(virtual_dataSourcePart), (row, rowIndex) => {
               var _a, _b;
               return openBlock(), createElementBlock("tr", {
-                id: unref(stkTableId) + "-" + (_ctx.rowKey ? rowKeyGen(row) : getRowIndex(rowIndex)),
+                id: unref(stkTableId) + "-" + (__props.rowKey ? rowKeyGen(row) : getRowIndex(rowIndex)),
                 ref_for: true,
                 ref_key: "trRef",
                 ref: trRef,
-                key: _ctx.rowKey ? rowKeyGen(row) : getRowIndex(rowIndex),
-                "data-row-key": _ctx.rowKey ? rowKeyGen(row) : getRowIndex(rowIndex),
+                key: __props.rowKey ? rowKeyGen(row) : getRowIndex(rowIndex),
+                "data-row-key": __props.rowKey ? rowKeyGen(row) : getRowIndex(rowIndex),
                 class: normalizeClass({
-                  active: _ctx.rowKey ? rowKeyGen(row) === currentRowKey.value : row === currentRow.value,
-                  hover: props.showTrHoverClass && (_ctx.rowKey ? rowKeyGen(row) === currentHoverRowKey.value : row === currentHoverRowKey.value),
-                  [_ctx.rowClassName(row, getRowIndex(rowIndex)) || ""]: true,
-                  expanded: row == null ? void 0 : row.__EXP__,
-                  "expanded-row": row && row.__EXPANDED_ROW__
+                  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.__EXPANDED_ROW__ && props.virtual && ((_a = props.expandConfig) == null ? void 0 : _a.height) && ((_b = props.expandConfig) == null ? void 0 : _b.height) + "px"
+                  "--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)),
@@ -2705,18 +2745,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 onDrop: ($event) => unref(onTrDrop)($event, getRowIndex(rowIndex))
               }, [
                 unref(virtualX_on) ? (openBlock(), createElementBlock("td", _hoisted_8)) : createCommentVNode("", true),
-                row && row.__EXPANDED_ROW__ ? (openBlock(), createElementBlock("td", {
+                row && row.__EXP_R__ ? (openBlock(), createElementBlock("td", {
                   key: 1,
                   colspan: unref(virtualX_columnPart).length
                 }, [
                   createElementVNode("div", _hoisted_10, [
                     renderSlot(_ctx.$slots, "expand", {
-                      row: row.__EXPANDED_ROW__,
-                      col: row.__EXPANDED_COL__
+                      row: row.__EXP_R__,
+                      col: row.__EXP_C__
                     }, () => {
                       var _a2;
                       return [
-                        createTextVNode(toDisplayString(((_a2 = row.__EXPANDED_ROW__) == null ? void 0 : _a2[row.__EXPANDED_COL__.dataIndex]) ?? ""), 1)
+                        createTextVNode(toDisplayString(((_a2 = row.__EXP_R__) == null ? void 0 : _a2[row.__EXP_C__.dataIndex]) ?? ""), 1)
                       ];
                     })
                   ])
@@ -2724,23 +2764,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   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.__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), {
+                      key: colKeyGen.value(col)
+                    }, { ref_for: true }, {
+                      ...getTDProps(row, col),
+                      ...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),
@@ -2755,8 +2783,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         rowIndex: getRowIndex(rowIndex),
                         colIndex,
                         cellValue: row && row[col.dataIndex],
-                        expanded: row ? row.__EXP_ : null,
-                        "tree-expanded": row ? row.__T_EXP__ : null
+                        expanded: row && row.__EXP__,
+                        "tree-expanded": row && row.__T_EXP__
                       }, {
                         stkFoldIcon: withCtx(() => [
                           createVNode(TriangleIcon, {
@@ -2809,12 +2837,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             }, null, 4)) : createCommentVNode("", true)
           ], 32)
         ], 6),
-        (!dataSourceCopy.value || !dataSourceCopy.value.length) && _ctx.showNoData ? (openBlock(), createElementBlock("div", {
+        (!dataSourceCopy.value || !dataSourceCopy.value.length) && __props.showNoData ? (openBlock(), createElementBlock("div", {
           key: 2,
-          class: normalizeClass(["stk-table-no-data", { "no-data-full": _ctx.noDataFull }])
+          class: normalizeClass(["stk-table-no-data", { "no-data-full": __props.noDataFull }])
         }, [
           renderSlot(_ctx.$slots, "empty", {}, () => [
-            _cache[8] || (_cache[8] = createTextVNode("暂无数据"))
+            _cache[8] || (_cache[8] = createTextVNode("暂无数据", -1))
           ])
         ], 2)) : createCommentVNode("", true),
         renderSlot(_ctx.$slots, "customBottom")

package/lib/style.css

@@ -102,6 +102,9 @@
 .stk-table.bordered-body-v tbody{
   --bg-border-bottom:linear-gradient(transparent, transparent);
 }
+.stk-table.bordered-body-h tbody{
+  --bg-border-right:linear-gradient(transparent, transparent);
+}
 .stk-table.stripe:not(.vt-on) .stk-tbody-main tr:nth-child(even){
   background-color:var(--stripe-bgc);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stk-table-vue",
-  "version": "0.8.11",
+  "version": "0.8.13",
   "description": "High performance realtime virtual table for vue3 and vue2.7",
   "main": "./lib/stk-table-vue.js",
   "types": "./lib/src/StkTable/index.d.ts",
@@ -41,10 +41,10 @@
   "license": "MIT",
   "devDependencies": {
     "@types/mockjs": "^1.0.10",
-    "@types/node": "^20.12.10",
+    "@types/node": "^22.18.10",
     "@typescript-eslint/eslint-plugin": "^7.7.0",
     "@typescript-eslint/parser": "^7.7.0",
-    "@vitejs/plugin-vue": "^6.0.0",
+    "@vitejs/plugin-vue": "^6.0.2",
     "@vue/test-utils": "^2.4.6",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
@@ -61,7 +61,7 @@
     "prettier": "^3.2.5",
     "stk-table-vue": "^0.8.7",
     "typescript": "^5.8.3",
-    "vite": "^7.1.7",
+    "vite": "^7.2.2",
     "vite-plugin-dts": "3.9.1",
     "vitepress": "^1.6.4",
     "vitepress-demo-plugin": "^1.4.7",

package/src/StkTable/StkTable.vue

@@ -13,9 +13,7 @@
             'is-col-resizing': isColResizing,
             'col-resizable': props.colResizable,
             bordered: props.bordered,
-            'bordered-h': props.bordered === 'h',
-            'bordered-v': props.bordered === 'v',
-            'bordered-body-v': props.bordered === 'body-v',
+            [`bordered-${props.bordered}`]: typeof props.bordered === 'string',
             stripe: props.stripe,
             'cell-hover': props.cellHover,
             'cell-active': props.cellActive,
@@ -115,12 +113,11 @@
                         active: rowKey ? rowKeyGen(row) === currentRowKey : row === currentRow,
                         hover: props.showTrHoverClass && (rowKey ? rowKeyGen(row) === currentHoverRowKey : row === currentHoverRowKey),
                         [rowClassName(row, getRowIndex(rowIndex)) || '']: true,
-                        expanded: row?.__EXP__,
-                        'expanded-row': row && row.__EXPANDED_ROW__,
+                        expanded: row && row.__EXP__,
+                        'expanded-row': row && row.__EXP_R__,
                     }"
                     :style="{
-                        '--row-height':
-                            row && row.__EXPANDED_ROW__ && props.virtual && props.expandConfig?.height && props.expandConfig?.height + 'px',
+                        '--row-height': row && row.__EXP_R__ && props.virtual && props.expandConfig?.height && props.expandConfig?.height + 'px',
                     }"
                     @click="onRowClick($event, row, getRowIndex(rowIndex))"
                     @dblclick="onRowDblclick($event, row, getRowIndex(rowIndex))"
@@ -130,10 +127,10 @@
                     @drop="onTrDrop($event, getRowIndex(rowIndex))"
                 >
                     <td v-if="virtualX_on" class="vt-x-left"></td>
-                    <td v-if="row && row.__EXPANDED_ROW__" :colspan="virtualX_columnPart.length">
+                    <td v-if="row && row.__EXP_R__" :colspan="virtualX_columnPart.length">
                         <div class="table-cell-wrapper">
-                            <slot name="expand" :row="row.__EXPANDED_ROW__" :col="row.__EXPANDED_COL__">
-                                {{ row.__EXPANDED_ROW__?.[row.__EXPANDED_COL__.dataIndex] ?? '' }}
+                            <slot name="expand" :row="row.__EXP_R__" :col="row.__EXP_C__">
+                                {{ row.__EXP_R__?.[row.__EXP_C__!.dataIndex] ?? '' }}
                             </slot>
                         </div>
                     </td>
@@ -142,22 +139,10 @@
                             <td
                                 v-if="!hiddenCellMap[rowKeyGen(row)]?.has(colKeyGen(col))"
                                 :key="colKeyGen(col)"
-                                :data-cell-key="cellKeyGen(row, col)"
-                                :style="cellStyleMap[TagType.TD].get(colKeyGen(col))"
-                                :class="[
-                                    col.className,
-                                    fixedColClassMap.get(colKeyGen(col)),
-                                    {
-                                        'cell-hover': col.mergeCells && hoverMergedCells.has(cellKeyGen(row, col)),
-                                        'cell-active': col.mergeCells && activeMergedCells.has(cellKeyGen(row, col)),
-                                        'seq-column': col.type === 'seq',
-                                        active: props.cellActive && currentSelectedCellKey === cellKeyGen(row, col),
-                                        expanded: col.type === 'expand' && (row.__EXP__ ? colKeyGen(row.__EXP__) === colKeyGen(col) : false),
-                                        'tree-expanded': col.type === 'tree-node' && row.__T_EXP__,
-                                        'drag-row-cell': col.type === 'dragRow',
-                                    },
-                                ]"
-                                v-bind="mergeCellsWrapper(row, col, rowIndex, colIndex)"
+                                v-bind="{
+                                    ...getTDProps(row, col),
+                                    ...mergeCellsWrapper(row, col, rowIndex, colIndex),
+                                }"
                                 @click="onCellClick($event, row, col, getRowIndex(rowIndex))"
                                 @mousedown="onCellMouseDown($event, row, col, getRowIndex(rowIndex))"
                                 @mouseenter="onCellMouseEnter($event, row, col)"
@@ -173,8 +158,8 @@
                                     :rowIndex="getRowIndex(rowIndex)"
                                     :colIndex="colIndex"
                                     :cellValue="row && row[col.dataIndex]"
-                                    :expanded="row ? row.__EXP_ : null"
-                                    :tree-expanded="row ? row.__T_EXP__ : null"
+                                    :expanded="row && row.__EXP__"
+                                    :tree-expanded="row && row.__T_EXP__"
                                 >
                                     <template #stkFoldIcon>
                                         <TriangleIcon @click="triangleClick($event, row, col)"></TriangleIcon>
@@ -357,7 +342,7 @@ const props = withDefaults(
         /** 单元格再次点击否可以取消选中 (cellActive=true)*/
         selectedCellRevokable?: boolean;
         /** 表头是否可拖动。支持回调函数。 */
-        headerDrag?: boolean | HeaderDragConfig;
+        headerDrag?: boolean | HeaderDragConfig<DT>;
         /**
          * 给行附加className<br>
          * FIXME: 是否需要优化，因为不传此prop会使表格行一直执行空函数，是否有影响
@@ -379,7 +364,7 @@ const props = withDefaults(
          * "v" - 仅展示竖线
          * "body-v" - 仅表体展示竖线
          */
-        bordered?: boolean | 'h' | 'v' | 'body-v';
+        bordered?: boolean | 'h' | 'v' | 'body-v' | 'body-h';
         /**
          * 自动重新计算虚拟滚动高度宽度。默认true
          * [非响应式]
@@ -435,7 +420,7 @@ const props = withDefaults(
         headless: false,
         theme: 'light',
         rowHeight: DEFAULT_ROW_HEIGHT,
-        autoRowHeight: false,
+        autoRowHeight: () => false,
         rowHover: true,
         rowActive: () => DEFAULT_ROW_ACTIVE_CONFIG,
         rowCurrentRevokable: true,
@@ -456,9 +441,9 @@ const props = withDefaults(
         cellHover: false,
         cellActive: false,
         selectedCellRevokable: true,
-        headerDrag: false,
+        headerDrag: () => false,
         rowClassName: () => '',
-        colResizable: false,
+        colResizable: () => false,
         colMinWidth: 10,
         bordered: true,
         autoResize: true,
@@ -668,7 +653,7 @@ const sortSwitchOrder: Order[] = [null, 'desc', 'asc'];
  * ]
  * ```
  */
-const tableHeaders = shallowRef<PrivateStkTableColumn<DT>[][]>([]);
+const tableHeaders = shallowRef<PrivateStkTableColumn<PrivateRowDT>[][]>([]);
 
 /**
  * 用于计算多级表头的tableHeaders。模拟rowSpan 位置的辅助数组。用于计算固定列。
@@ -688,7 +673,7 @@ const tableHeaders = shallowRef<PrivateStkTableColumn<DT>[][]>([]);
  * ]
  * ```
  */
-const tableHeadersForCalc = shallowRef<PrivateStkTableColumn<DT>[][]>([]);
+const tableHeadersForCalc = shallowRef<PrivateStkTableColumn<PrivateRowDT>[][]>([]);
 
 /** 最后一行的tableHeaders.内容是 props.columns 的引用集合  */
 const tableHeaderLast = computed(() => tableHeadersForCalc.value.slice(-1)[0] || []);
@@ -924,14 +909,14 @@ function dealDefaultSorter() {
  */
 function dealColumns() {
     // reset
-    const tableHeadersTemp: StkTableColumn<DT>[][] = [];
-    const tableHeadersForCalcTemp: StkTableColumn<DT>[][] = [];
-    let copyColumn = props.columns; // do not deep clone
+    const tableHeadersTemp: StkTableColumn<PrivateRowDT>[][] = [];
+    const tableHeadersForCalcTemp: StkTableColumn<PrivateRowDT>[][] = [];
+    let copyColumn: StkTableColumn<PrivateRowDT>[] = props.columns; // do not deep clone
     // relative 模式下不支持sticky列。因此就放在左右两侧。
     if (isRelativeMode.value) {
-        let leftCol: StkTableColumn<DT>[] = [];
-        let centerCol: StkTableColumn<DT>[] = [];
-        let rightCol: StkTableColumn<DT>[] = [];
+        let leftCol: StkTableColumn<PrivateRowDT>[] = [];
+        let centerCol: StkTableColumn<PrivateRowDT>[] = [];
+        let rightCol: StkTableColumn<PrivateRowDT>[] = [];
         copyColumn.forEach(col => {
             if (col.fixed === 'left') {
                 leftCol.push(col);
@@ -962,8 +947,8 @@ function dealColumns() {
      * @param parentFixed 父节点固定列继承。
      */
     function flat(
-        arr: PrivateStkTableColumn<DT>[],
-        parent: PrivateStkTableColumn<DT> | null,
+        arr: PrivateStkTableColumn<PrivateRowDT>[],
+        parent: PrivateStkTableColumn<PrivateRowDT> | null,
         depth = 0 /* , parentFixed: 'left' | 'right' | null = null */,
     ) {
         /** 所有子节点数量 */
@@ -1015,7 +1000,7 @@ function dealColumns() {
     tableHeadersForCalc.value = tableHeadersForCalcTemp;
 }
 
-function updateDataSource(val:DT[]) {
+function updateDataSource(val: DT[]) {
     if (!Array.isArray(val)) {
         console.warn('invalid dataSource');
         return;
@@ -1041,7 +1026,6 @@ function updateDataSource(val:DT[]) {
     }
 }
 
-
 /**
  * 行唯一值生成
  */
@@ -1109,6 +1093,47 @@ function getHeaderTitle(col: StkTableColumn<DT>): string {
     return col.title || '';
 }
 
+function getTDProps(row: PrivateRowDT | null | undefined, col: StkTableColumn<PrivateRowDT>) {
+    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(colKeyGen.value(col))];
+    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__) === colKeyGen.value(col) : false)) {
+        classList.push('expanded');
+    } else if (col.type === 'tree-node' && row.__T_EXP__) {
+        classList.push('tree-expanded');
+    } else if (col.type === 'dragRow') {
+        classList.push('drag-row-cell');
+    }
+
+    return {
+        'data-cell-key': cellKey,
+        style: cellStyleMap.value[TagType.TD].get(colKey),
+        class: classList,
+    };
+}
+
 /**
  * 表头点击排序
  * @param click 是否为点击表头触发
@@ -1136,7 +1161,7 @@ function onColumnSort(col: StkTableColumn<DT> | undefined | null, click = true,
     sortOrderIndex.value = sortOrderIndex.value % 3;
 
     let order = sortSwitchOrder[sortOrderIndex.value];
-    const sortConfig: SortConfig<any> = { ...DEFAULT_SORT_CONFIG, ...props.sortConfig, ...col.sortConfig };
+    const sortConfig: SortConfig<DT> = { ...DEFAULT_SORT_CONFIG, ...props.sortConfig, ...col.sortConfig };
     const { defaultSort } = sortConfig;
     const colKeyGenValue = colKeyGen.value;
 
@@ -1163,7 +1188,7 @@ function onColumnSort(col: StkTableColumn<DT> | undefined | null, click = true,
             }
         }
     }
-    let dataSourceTemp: any[] = props.dataSource.slice();
+    let dataSourceTemp: DT[] = props.dataSource.slice();
     if (!props.sortRemote || options.force) {
         const sortOption = col || defaultSort;
         if (sortOption) {

package/src/StkTable/const.ts

@@ -44,7 +44,7 @@ export const DEFAULT_SORT_CONFIG = {
 } satisfies SortConfig<any>;
 
 export const DEFAULT_ROW_ACTIVE_CONFIG: Required<RowActiveOption<any>> = {
-    enabled: false,
+    enabled: true,
     disabled: () => false,
-    revokable: false,
+    revokable: true,
 };

package/src/StkTable/style.less

@@ -151,6 +151,12 @@
         }
     }
 
+    &.bordered-body-h {
+        tbody {
+            --bg-border-right: linear-gradient(transparent, transparent);
+        }
+    }
+
     &.stripe {
         &:not(.vt-on) .stk-tbody-main tr:nth-child(even) {
             background-color: var(--stripe-bgc);

package/src/StkTable/types/index.ts

@@ -17,9 +17,9 @@ export type CustomCellProps<T extends Record<string, any>> = {
      * - 不展开: null
      * - 展开: 返回column配置
      */
-    expanded: PrivateRowDT['__EXP__'];
+    expanded?: PrivateRowDT['__EXP__'];
     /** if tree expanded */
-    treeExpanded: PrivateRowDT['__T_EXP__']
+    treeExpanded?: PrivateRowDT['__T_EXP__']
 };
 
 export type CustomHeaderCellProps<T extends Record<string, any>> = {
@@ -149,7 +149,7 @@ export type PrivateRowDT = {
      * if row expanded
      * @private
      */
-    __EXP__?: StkTableColumn<any> | null;
+    __EXP__?: StkTableColumn<any>;
     /**
      * if tree node row expanded
      * @private
@@ -165,6 +165,11 @@ export type PrivateRowDT = {
      * @private
      */
     __T_LV__?: number;
+      /** expanded row */
+    __EXP_R__?: any;
+    /** expanded col */
+    __EXP_C__?: StkTableColumn<any>;
+    children?: any[]
 };
 
 export type SortOption<T extends Record<string, any>> = Pick<StkTableColumn<T>, 'sorter' | 'dataIndex' | 'sortField' | 'sortType'>;
@@ -241,10 +246,6 @@ export type ExpandConfig = {
     height?: number;
 };
 
-export type ExpandedRow = PrivateRowDT & {
-    __EXPANDED_ROW__: any;
-    __EXPANDED_COL__: any;
-};
 
 /** drag row config */
 export type DragRowConfig = {

package/src/StkTable/useMergeCells.ts

@@ -35,20 +35,25 @@ export function useMergeCells({ rowActiveProp, tableHeaderLast, rowKeyGen, colKe
     /**
      * abstract the logic of hiding cells
      */
-    function hideCells(rowKey: UniqKey, startIndex: number, count: number, isSelfRow = false, mergeCellKey: string) {
-        for (let i = startIndex; i < startIndex + count; i++) {
-            if (!isSelfRow || i !== startIndex) {
-                // self row does not need to be hidden
-                const nextCol = tableHeaderLast.value[i];
-                if (!nextCol) break;
-                const nextColKey = colKeyGen.value(nextCol);
-                if (!hiddenCellMap.value[rowKey]) hiddenCellMap.value[rowKey] = new Set();
-                hiddenCellMap.value[rowKey].add(nextColKey);
+    function hideCells(rowKey: UniqKey, colKey: UniqKey, colspan: number, isSelfRow = false, mergeCellKey: string) {
+        const startIndex = tableHeaderLast.value.findIndex(item => colKeyGen.value(item) === colKey);
+
+        for (let i = startIndex; i < startIndex + colspan; i++) {
+            if(!isSelfRow) {
+                // if other row hovered, the rowspan cell need to be highlight
+                if (!hoverRowMap.value[rowKey]) hoverRowMap.value[rowKey] = new Set();
+                hoverRowMap.value[rowKey].add(mergeCellKey);
             }
+            if (isSelfRow && i === startIndex) {
+                // self row start cell does not need to be hidden
+                continue;
+            }
+            const nextCol = tableHeaderLast.value[i];
+            if (!nextCol) break;
+            const nextColKey = colKeyGen.value(nextCol);
+            if (!hiddenCellMap.value[rowKey]) hiddenCellMap.value[rowKey] = new Set();
+            hiddenCellMap.value[rowKey].add(nextColKey);
 
-            // if other row hovered, the rowspan cell need to be highlight
-            if (!hoverRowMap.value[rowKey]) hoverRowMap.value[rowKey] = new Set();
-            hoverRowMap.value[rowKey].add(mergeCellKey);
         }
     }
 
@@ -78,25 +83,24 @@ export function useMergeCells({ rowActiveProp, tableHeaderLast, rowKeyGen, colKe
 
         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 row = virtual_dataSourcePart.value[i];
             if (!row) break;
-            hideCells(rowKeyGen(row), curColIndex, colspan, i === curRowIndex, mergedCellKey);
+            hideCells(rowKeyGen(row), colKey, colspan, i === curRowIndex, mergedCellKey);
         }
 
         return { colspan, rowspan };
     }
 
+    const emptySet = new Set<string>();
     function updateHoverMergedCells(rowKey: UniqKey | undefined) {
-        const set = rowKey === void 0 ? null : hoverRowMap.value[rowKey];
-        hoverMergedCells.value = set || new Set();
+        hoverMergedCells.value = rowKey === void 0 ? emptySet : hoverRowMap.value[rowKey] || emptySet;
     }
 
     function updateActiveMergedCells(clear?: boolean, rowKey?: UniqKey) {

package/src/StkTable/useRowExpand.ts

@@ -1,6 +1,6 @@
 import { ShallowRef } from 'vue';
-import { ExpandedRow, PrivateRowDT, RowKeyGen, StkTableColumn, UniqKey } from './types';
 import { EXPANDED_ROW_KEY_PREFIX } from './const';
+import { PrivateRowDT, RowKeyGen, StkTableColumn, UniqKey } from './types';
 type DT = PrivateRowDT;
 type Option<DT extends Record<string, any>> = {
     rowKeyGen: RowKeyGen;
@@ -11,7 +11,7 @@ type Option<DT extends Record<string, any>> = {
 export function useRowExpand({ dataSourceCopy, rowKeyGen, emits }: Option<DT>) {
     const expandedKey = '__EXP__';
 
-    function isExpanded(row: DT, col?: StkTableColumn<DT> | null) {
+    function isExpanded(row: DT, col?: StkTableColumn<DT>) {
         return row?.[expandedKey] === col ? !row?.[expandedKey] : true;
     }
     /** click expended icon to toggle expand row */
@@ -55,7 +55,7 @@ export function useRowExpand({ dataSourceCopy, rowKeyGen, emits }: Option<DT>) {
         }
 
         const row = tempData[index];
-        const col = data?.col || null;
+        const col = data?.col;
 
         if (expand == null) {
             expand = isExpanded(row, col);
@@ -63,16 +63,16 @@ export function useRowExpand({ dataSourceCopy, rowKeyGen, emits }: Option<DT>) {
 
         if (expand) {
             // insert new expanded row
-            const newExpandRow: ExpandedRow = {
+            const newExpandRow: PrivateRowDT = {
                 __ROW_K__: EXPANDED_ROW_KEY_PREFIX + rowKey,
-                __EXPANDED_ROW__: row,
-                __EXPANDED_COL__: col,
+                __EXP_R__: row,
+                __EXP_C__: col,
             };
             tempData.splice(index + 1, 0, newExpandRow);
         }
 
         if (row) {
-            row.__EXP__ = expand ? col : null;
+            row[expandedKey] = expand ? col : void 0;
         }
 
         dataSourceCopy.value = tempData;

package/src/StkTable/useTree.ts

@@ -11,7 +11,8 @@ type Option<DT extends Record<string, any>> = {
 
 export function useTree({ props, dataSourceCopy, rowKeyGen, emits }: Option<DT>) {
     const { defaultExpandAll, defaultExpandKeys, defaultExpandLevel }: TreeConfig = props.treeConfig;
-
+    /** It used to check if it is first load. To execute defaultExpandXXX */
+    let isFirstLoad = true;
     /** click expended icon to toggle expand row */
     function toggleTreeNode(row: DT, col: any) {
         const expand = row ? !row.__T_EXP__ : false;
@@ -82,38 +83,44 @@ export function useTree({ props, dataSourceCopy, rowKeyGen, emits }: Option<DT>)
         // }
     }
 
+    function recursionFlat(data: DT[] | undefined, level: number, parent?: DT): DT[] {
+        if (!data) return [];
+        let result: DT[] = []
+        for (let i = 0; i < data.length; i++) {
+            const item = data[i];
+            result.push(item);
+            const isExpanded = Boolean(item.__T_EXP__);
+            setNodeExpanded(item, isExpanded, level, parent);
+            if (isFirstLoad && !isExpanded) {
+                // first load will expand all node if defaultExpandAll is true
+                if (defaultExpandAll) {
+                    setNodeExpanded(item, true);
+                } else {
+                    if (defaultExpandLevel && level < defaultExpandLevel) {
+                        setNodeExpanded(item, true);
+                    }
+                    if (defaultExpandKeys?.includes(rowKeyGen(item))) {
+                        setNodeExpanded(item, true);
+                    }
+                }
+            }
+            if (item.__T_EXP__) {
+                const res = recursionFlat(item.children, level + 1, item);
+                result = result.concat(res);
+            }
+        }
+        return result;
+    };
+
     /**
      * 根据保存的展开状态，深度遍历，展平树形数据。
+     * en: flatten tree data by saved expand state.
      * @param data
      * @returns
      */
     function flatTreeData(data: DT[]) {
-        const result: DT[] = [];
-        (function recursion(data: DT[] | undefined, level: number, parent?: DT) {
-            if (!data) return;
-            for (let i = 0; i < data.length; i++) {
-                const item = data[i];
-                result.push(item);
-                const isExpanded = Boolean(item.__T_EXP__);
-                setNodeExpanded(item, isExpanded, level, parent);
-                if (!isExpanded) {
-                    if (defaultExpandAll) {
-                        setNodeExpanded(item, true);
-                    } else {
-                        if (defaultExpandLevel && level < defaultExpandLevel) {
-                            setNodeExpanded(item, true);
-                        }
-                        if (defaultExpandKeys?.includes(rowKeyGen(item))) {
-                            setNodeExpanded(item, true);
-                        }
-                        if (!item.__T_EXP__) {
-                            continue;
-                        }
-                    }
-                }
-                recursion(item.children, level + 1, item);
-            }
-        })(data, 0);
+        const result = recursionFlat(data, 0);
+        isFirstLoad = false;
         return result;
     }
 

package/src/StkTable/useVirtualScroll.ts

@@ -1,15 +1,15 @@
 import { Ref, ShallowRef, computed, ref } from 'vue';
 import { DEFAULT_ROW_HEIGHT, DEFAULT_TABLE_HEIGHT, DEFAULT_TABLE_WIDTH } from './const';
-import { AutoRowHeightConfig, PrivateStkTableColumn, RowKeyGen, StkTableColumn, UniqKey } from './types';
+import { AutoRowHeightConfig, PrivateRowDT, PrivateStkTableColumn, RowKeyGen, StkTableColumn, UniqKey } from './types';
 import { getCalculatedColWidth } from './utils/constRefUtils';
 
 type Option<DT extends Record<string, any>> = {
     props: any;
     tableContainerRef: Ref<HTMLElement | undefined>;
     trRef: Ref<HTMLTableRowElement[] | undefined>;
-    dataSourceCopy: ShallowRef<DT[]>;
-    tableHeaderLast: ShallowRef<PrivateStkTableColumn<DT>[]>;
-    tableHeaders: ShallowRef<PrivateStkTableColumn<DT>[][]>;
+    dataSourceCopy: ShallowRef<PrivateRowDT[]>;
+    tableHeaderLast: ShallowRef<PrivateStkTableColumn<PrivateRowDT>[]>;
+    tableHeaders: ShallowRef<PrivateStkTableColumn<PrivateRowDT>[][]>;
     rowKeyGen: RowKeyGen;
     maxRowSpan: Map<UniqKey, number>;
 };
@@ -135,8 +135,8 @@ export function useVirtualScroll<DT extends Record<string, any>>({
         const tableHeaderLastValue = tableHeaderLast.value;
         if (virtualX_on.value) {
             // 虚拟横向滚动，固定列要一直保持存在
-            const leftCols: PrivateStkTableColumn<DT>[] = [];
-            const rightCols: PrivateStkTableColumn<DT>[] = [];
+            const leftCols: PrivateStkTableColumn<PrivateRowDT>[] = [];
+            const rightCols: PrivateStkTableColumn<PrivateRowDT>[] = [];
             /**
              * 存在问题：
              * table columns 从多到少时。比方原来的start=5,end=10，现在start=4,end=8。这时候endIndex就超出数组范围了。
@@ -176,15 +176,15 @@ export function useVirtualScroll<DT extends Record<string, any>>({
     });
 
     const getRowHeightFn = computed(() => {
-        let rowHeightFn: (row?: DT) => number = () => props.rowHeight || DEFAULT_ROW_HEIGHT;
+        let rowHeightFn: (row?: PrivateRowDT) => number = () => props.rowHeight || DEFAULT_ROW_HEIGHT;
         if (props.autoRowHeight) {
             const tempRowHeightFn = rowHeightFn;
-            rowHeightFn = (row?: DT) => getAutoRowHeight(row) || tempRowHeightFn(row);
+            rowHeightFn = (row?: PrivateRowDT) => getAutoRowHeight(row) || tempRowHeightFn(row);
         }
         if (hasExpandCol.value) {
             const expandedRowHeight = props.expandConfig?.height;
             const tempRowHeightFn = rowHeightFn;
-            rowHeightFn = (row?: DT) => (row && row.__EXPANDED_ROW__ && expandedRowHeight) || tempRowHeightFn(row);
+            rowHeightFn = (row?: PrivateRowDT) => (row && row.__EXP_R__ && expandedRowHeight) || tempRowHeightFn(row);
         }
         return rowHeightFn;
     });
@@ -252,14 +252,14 @@ export function useVirtualScroll<DT extends Record<string, any>>({
         autoRowHeightMap.clear();
     }
 
-    function getAutoRowHeight(row?: DT) {
+    function getAutoRowHeight(row?: PrivateRowDT) {
         if (!row) return;
         const rowKey = rowKeyGen(row);
         const storedHeight = autoRowHeightMap.get(String(rowKey));
         if (storedHeight) {
             return storedHeight;
         }
-        const expectedHeight: AutoRowHeightConfig<DT>['expectedHeight'] = props.autoRowHeight?.expectedHeight;
+        const expectedHeight: AutoRowHeightConfig<PrivateRowDT>['expectedHeight'] = props.autoRowHeight?.expectedHeight;
         if (expectedHeight) {
             if (typeof expectedHeight === 'function') {
                 return expectedHeight(row);