stk-table-vue 0.8.10 → 0.8.12

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会使表格行一直执行空函数，是否有影响
@@ -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会使表格行一直执行空函数，是否有影响
@@ -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,7 +710,7 @@ 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;

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

@@ -19,6 +19,8 @@ export type CustomCellProps<T extends Record<string, any>> = {
      * - 展开: 返回column配置
      */
     expanded?: PrivateRowDT['__EXP__'];
+    /** if tree expanded */
+    treeExpanded?: PrivateRowDT['__T_EXP__'];
 };
 export type CustomHeaderCellProps<T extends Record<string, any>> = {
     col: StkTableColumn<T>;
@@ -142,7 +144,7 @@ export type PrivateRowDT = {
      * if row expanded
      * @private
      */
-    __EXP__?: StkTableColumn<any> | null;
+    __EXP__?: StkTableColumn<any>;
     /**
      * if tree node row expanded
      * @private
@@ -158,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'> & {
@@ -225,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 = {};
@@ -1003,20 +1003,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 +1252,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 +1302,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 +1466,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;
   });
@@ -1719,7 +1723,6 @@ const _hoisted_9 = ["colspan"];
 const _hoisted_10 = { class: "table-cell-wrapper" };
 const _hoisted_11 = ["data-cell-key", "onClick", "onMousedown", "onMouseenter", "onMouseleave", "onMouseover"];
 const _hoisted_12 = ["title"];
-const _hoisted_13 = ["title"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "StkTable",
   props: {
@@ -1731,9 +1734,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 },
@@ -1752,9 +1755,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 },
@@ -1952,27 +1955,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     );
     watch(
       () => props.dataSource,
-      (val) => {
-        if (!Array.isArray(val)) {
-          console.warn("invalid dataSource");
-          return;
-        }
-        let needInitVirtualScrollY = false;
-        if (dataSourceCopy.value.length !== val.length) {
-          needInitVirtualScrollY = true;
-        }
-        initDataSource(val);
-        updateMaxRowSpan();
-        if (needInitVirtualScrollY) {
-          nextTick(() => initVirtualScrollY());
-        }
-        const sortColValue = sortCol.value;
-        if (!isEmptyValue(sortColValue) && !props.sortRemote) {
-          const colKey = colKeyGen.value;
-          const column = tableHeaderLast.value.find((it) => colKey(it) === sortColValue);
-          onColumnSort(column, false);
-        }
-      }
+      (val) => updateDataSource(val)
     );
     watch(
       () => props.fixedColShadow,
@@ -2067,13 +2050,34 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       tableHeaders.value = tableHeadersTemp;
       tableHeadersForCalc.value = tableHeadersForCalcTemp;
     }
+    function updateDataSource(val) {
+      if (!Array.isArray(val)) {
+        console.warn("invalid dataSource");
+        return;
+      }
+      let needInitVirtualScrollY = false;
+      if (dataSourceCopy.value.length !== val.length) {
+        needInitVirtualScrollY = true;
+      }
+      initDataSource(val);
+      updateMaxRowSpan();
+      if (needInitVirtualScrollY) {
+        nextTick(() => initVirtualScrollY());
+      }
+      const sortColValue = sortCol.value;
+      if (!isEmptyValue(sortColValue) && !props.sortRemote) {
+        const colKey = colKeyGen.value;
+        const column = tableHeaderLast.value.find((it) => colKey(it) === sortColValue);
+        onColumnSort(column, false);
+      }
+    }
     function rowKeyGen(row) {
       if (!row) return row;
       let key = rowKeyGenCache.get(row) || row.__ROW_K__;
       if (!key) {
         key = rowKeyGenComputed.value(row);
         if (key === void 0) {
-          key = Math.random().toString();
+          key = Math.random().toString(36).slice(2);
         }
         rowKeyGenCache.set(row, key);
       }
@@ -2530,18 +2534,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 +2569,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 +2579,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 +2672,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 +2683,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 +2707,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)
                       ];
                     })
                   ])
@@ -2747,27 +2749,42 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       onMouseleave: ($event) => onCellMouseLeave($event, row, col),
                       onMouseover: ($event) => onCellMouseOver($event, row, col)
                     }), [
-                      col.type === "expand" || col.type === "tree-node" ? (openBlock(), createElementBlock("div", {
+                      col.customCell ? (openBlock(), createBlock(resolveDynamicComponent(col.customCell), {
                         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,
+                        row,
+                        rowIndex: getRowIndex(rowIndex),
+                        colIndex,
+                        cellValue: row && row[col.dataIndex],
+                        expanded: row && row.__EXP__,
+                        "tree-expanded": row && row.__T_EXP__
+                      }, {
+                        stkFoldIcon: withCtx(() => [
+                          createVNode(TriangleIcon, {
+                            onClick: ($event) => triangleClick($event, row, col)
+                          }, null, 8, ["onClick"])
+                        ]),
+                        stkDragIcon: withCtx(() => [
+                          createVNode(DragHandle, {
+                            onDragstart: ($event) => unref(onTrDragStart)($event, getRowIndex(rowIndex))
+                          }, null, 8, ["onDragstart"])
+                        ]),
+                        _: 2
+                      }, 1032, ["col", "row", "rowIndex", "colIndex", "cellValue", "expanded", "tree-expanded"])) : (openBlock(), createElementBlock("div", {
+                        key: 1,
+                        class: "table-cell-wrapper",
+                        title: col.type !== "seq" ? row == null ? void 0 : row[col.dataIndex] : "",
+                        style: normalizeStyle(col.type === "tree-node" ? { paddingLeft: row.__T_LV__ && row.__T_LV__ * 16 + "px" } : {})
                       }, [
-                        col.customCell ? (openBlock(), createBlock(resolveDynamicComponent(col.customCell), {
-                          key: 0,
-                          col,
-                          row,
-                          rowIndex: getRowIndex(rowIndex),
-                          colIndex,
-                          cellValue: row && row[col.dataIndex],
-                          expanded: row && row.__EXP__ || null,
-                          "tree-expanded": row && row.__T_EXP__ || null
-                        }, {
-                          stkFoldIcon: withCtx(() => [
-                            createVNode(TriangleIcon)
-                          ]),
-                          _: 2
-                        }, 1032, ["col", "row", "rowIndex", "colIndex", "cellValue", "expanded", "tree-expanded"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                        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)) : col.type === "expand" || col.type === "tree-node" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
                           col.type === "expand" || col.type === "tree-node" && row.children !== void 0 ? (openBlock(), createBlock(TriangleIcon, {
                             key: 0,
                             onClick: ($event) => triangleClick($event, row, col)
@@ -2775,43 +2792,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                           createElementVNode("span", {
                             style: normalizeStyle(col.type === "tree-node" && !row.children ? "padding-left: 16px;" : "")
                           }, toDisplayString((row == null ? void 0 : row[col.dataIndex]) ?? ""), 5)
+                        ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 3 }, [
+                          createTextVNode(toDisplayString((row == null ? void 0 : row[col.dataIndex]) ?? getEmptyCellText.value(col, row)), 1)
                         ], 64))
-                      ], 12, _hoisted_12)) : (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]
-                        }, {
-                          stkFoldIcon: withCtx(() => [
-                            createVNode(TriangleIcon)
-                          ]),
-                          stkDragIcon: withCtx(() => [
-                            createVNode(DragHandle, {
-                              onDragstart: ($event) => unref(onTrDragStart)($event, getRowIndex(rowIndex))
-                            }, null, 8, ["onDragstart"])
-                          ]),
-                          _: 2
-                        }, 1032, ["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_13))
-                      ], 64))
+                      ], 12, _hoisted_12))
                     ], 16, _hoisted_11)) : createCommentVNode("", true)
                   ], 64);
                 }), 256))
@@ -2827,12 +2811,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,7 +1,7 @@
 {
   "name": "stk-table-vue",
-  "version": "0.8.10",
-  "description": "Simple realtime virtual table for vue3 and vue2.7",
+  "version": "0.8.12",
+  "description": "High performance realtime virtual table for vue3 and vue2.7",
   "main": "./lib/stk-table-vue.js",
   "types": "./lib/src/StkTable/index.d.ts",
   "packageManager": "pnpm@10.7.0",
@@ -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>
@@ -164,71 +161,53 @@
                                 @mouseleave="onCellMouseLeave($event, row, col)"
                                 @mouseover="onCellMouseOver($event, row, col)"
                             >
-                                <template v-if="col.type === 'expand' || col.type === 'tree-node'">
-                                    <div
-                                        class="table-cell-wrapper"
-                                        :title="row?.[col.dataIndex]"
-                                        :style="{ paddingLeft: row.__T_LV__ && row.__T_LV__ * 16 + 'px' }"
-                                    >
-                                        <component
-                                            :is="col.customCell"
-                                            v-if="col.customCell"
-                                            :col="col"
-                                            :row="row"
-                                            :rowIndex="getRowIndex(rowIndex)"
-                                            :colIndex="colIndex"
-                                            :cellValue="row && row[col.dataIndex]"
-                                            :expanded="(row && row.__EXP__) || null"
-                                            :tree-expanded="(row && row.__T_EXP__) || null"
-                                        >
-                                            <template #stkFoldIcon>
-                                                <TriangleIcon></TriangleIcon>
-                                            </template>
-                                        </component>
-                                        <template v-else>
-                                            <TriangleIcon
-                                                v-if="col.type === 'expand' || (col.type === 'tree-node' && row.children !== void 0)"
-                                                @click="triangleClick($event, row, col)"
-                                            />
-                                            <span :style="col.type === 'tree-node' && !row.children ? 'padding-left: 16px;' : ''">
-                                                {{ row?.[col.dataIndex] ?? '' }}
-                                            </span>
-                                        </template>
-                                    </div>
-                                </template>
-                                <template v-else>
-                                    <component
-                                        :is="col.customCell"
-                                        v-if="col.customCell"
-                                        class="table-cell-wrapper"
-                                        :col="col"
-                                        :row="row"
-                                        :rowIndex="getRowIndex(rowIndex)"
-                                        :colIndex="colIndex"
-                                        :cellValue="row && row[col.dataIndex]"
-                                    >
-                                        <template #stkFoldIcon>
-                                            <TriangleIcon></TriangleIcon>
-                                        </template>
-                                        <template #stkDragIcon>
-                                            <DragHandle @dragstart="onTrDragStart($event, getRowIndex(rowIndex))" />
-                                        </template>
-                                    </component>
-                                    <div v-else class="table-cell-wrapper" :title="col.type !== 'seq' ? row?.[col.dataIndex] : ''">
-                                        <template v-if="col.type === 'seq'">
-                                            {{ (props.seqConfig.startIndex || 0) + getRowIndex(rowIndex) + 1 }}
-                                        </template>
-                                        <template v-else-if="col.type === 'dragRow'">
-                                            <DragHandle @dragstart="onTrDragStart($event, getRowIndex(rowIndex))" />
-                                            <span>
-                                                {{ row?.[col.dataIndex] ?? '' }}
-                                            </span>
-                                        </template>
-                                        <template v-else>
-                                            {{ row?.[col.dataIndex] ?? getEmptyCellText(col, row) }}
-                                        </template>
-                                    </div>
-                                </template>
+                                <component
+                                    :is="col.customCell"
+                                    v-if="col.customCell"
+                                    class="table-cell-wrapper"
+                                    :col="col"
+                                    :row="row"
+                                    :rowIndex="getRowIndex(rowIndex)"
+                                    :colIndex="colIndex"
+                                    :cellValue="row && row[col.dataIndex]"
+                                    :expanded="row && row.__EXP__"
+                                    :tree-expanded="row && row.__T_EXP__"
+                                >
+                                    <template #stkFoldIcon>
+                                        <TriangleIcon @click="triangleClick($event, row, col)"></TriangleIcon>
+                                    </template>
+                                    <template #stkDragIcon>
+                                        <DragHandle @dragstart="onTrDragStart($event, getRowIndex(rowIndex))" />
+                                    </template>
+                                </component>
+                                <div
+                                    v-else
+                                    class="table-cell-wrapper"
+                                    :title="col.type !== 'seq' ? row?.[col.dataIndex] : ''"
+                                    :style="col.type === 'tree-node' ? { paddingLeft: row.__T_LV__ && row.__T_LV__ * 16 + 'px' } : {}"
+                                >
+                                    <template v-if="col.type === 'seq'">
+                                        {{ (props.seqConfig.startIndex || 0) + getRowIndex(rowIndex) + 1 }}
+                                    </template>
+                                    <template v-else-if="col.type === 'dragRow'">
+                                        <DragHandle @dragstart="onTrDragStart($event, getRowIndex(rowIndex))" />
+                                        <span>
+                                            {{ row?.[col.dataIndex] ?? '' }}
+                                        </span>
+                                    </template>
+                                    <template v-else-if="col.type === 'expand' || col.type === 'tree-node'">
+                                        <TriangleIcon
+                                            v-if="col.type === 'expand' || (col.type === 'tree-node' && row.children !== void 0)"
+                                            @click="triangleClick($event, row, col)"
+                                        />
+                                        <span :style="col.type === 'tree-node' && !row.children ? 'padding-left: 16px;' : ''">
+                                            {{ row?.[col.dataIndex] ?? '' }}
+                                        </span>
+                                    </template>
+                                    <template v-else>
+                                        {{ row?.[col.dataIndex] ?? getEmptyCellText(col, row) }}
+                                    </template>
+                                </div>
                             </td>
                         </template>
                     </template>
@@ -375,7 +354,7 @@ const props = withDefaults(
         /** 单元格再次点击否可以取消选中 (cellActive=true)*/
         selectedCellRevokable?: boolean;
         /** 表头是否可拖动。支持回调函数。 */
-        headerDrag?: boolean | HeaderDragConfig;
+        headerDrag?: boolean | HeaderDragConfig<DT>;
         /**
          * 给行附加className<br>
          * FIXME: 是否需要优化，因为不传此prop会使表格行一直执行空函数，是否有影响
@@ -453,7 +432,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,
@@ -474,9 +453,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,
@@ -686,7 +665,7 @@ const sortSwitchOrder: Order[] = [null, 'desc', 'asc'];
  * ]
  * ```
  */
-const tableHeaders = shallowRef<PrivateStkTableColumn<DT>[][]>([]);
+const tableHeaders = shallowRef<PrivateStkTableColumn<PrivateRowDT>[][]>([]);
 
 /**
  * 用于计算多级表头的tableHeaders。模拟rowSpan 位置的辅助数组。用于计算固定列。
@@ -706,7 +685,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] || []);
@@ -904,31 +883,7 @@ watch(
 
 watch(
     () => props.dataSource,
-    val => {
-        if (!Array.isArray(val)) {
-            console.warn('invalid dataSource');
-            return;
-        }
-
-        let needInitVirtualScrollY = false;
-        if (dataSourceCopy.value.length !== val.length) {
-            needInitVirtualScrollY = true;
-        }
-        initDataSource(val);
-        updateMaxRowSpan();
-        // if data length is not change, not init virtual scroll
-        if (needInitVirtualScrollY) {
-            // wait for table render,initVirtualScrollY has get `dom` operation.
-            nextTick(() => initVirtualScrollY());
-        }
-        const sortColValue = sortCol.value;
-        if (!isEmptyValue(sortColValue) && !props.sortRemote) {
-            // sort
-            const colKey = colKeyGen.value;
-            const column = tableHeaderLast.value.find(it => colKey(it) === sortColValue);
-            onColumnSort(column, false);
-        }
-    },
+    val => updateDataSource(val),
 );
 
 watch(
@@ -966,14 +921,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);
@@ -1004,8 +959,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 */,
     ) {
         /** 所有子节点数量 */
@@ -1057,6 +1012,32 @@ function dealColumns() {
     tableHeadersForCalc.value = tableHeadersForCalcTemp;
 }
 
+function updateDataSource(val: DT[]) {
+    if (!Array.isArray(val)) {
+        console.warn('invalid dataSource');
+        return;
+    }
+
+    let needInitVirtualScrollY = false;
+    if (dataSourceCopy.value.length !== val.length) {
+        needInitVirtualScrollY = true;
+    }
+    initDataSource(val);
+    updateMaxRowSpan();
+    // if data length is not change, not init virtual scroll
+    if (needInitVirtualScrollY) {
+        // wait for table render,initVirtualScrollY has get `dom` operation.
+        nextTick(() => initVirtualScrollY());
+    }
+    const sortColValue = sortCol.value;
+    if (!isEmptyValue(sortColValue) && !props.sortRemote) {
+        // sort
+        const colKey = colKeyGen.value;
+        const column = tableHeaderLast.value.find(it => colKey(it) === sortColValue);
+        onColumnSort(column, false);
+    }
+}
+
 /**
  * 行唯一值生成
  */
@@ -1068,7 +1049,7 @@ function rowKeyGen(row: DT | null | undefined) {
 
         if (key === void 0) {
             // key为undefined时，不应该高亮行。因此重新生成key
-            key = Math.random().toString();
+            key = Math.random().toString(36).slice(2);
         }
         rowKeyGenCache.set(row, key);
     }
@@ -1151,7 +1132,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;
 
@@ -1178,7 +1159,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/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

@@ -18,6 +18,8 @@ export type CustomCellProps<T extends Record<string, any>> = {
      * - 展开: 返回column配置
      */
     expanded?: PrivateRowDT['__EXP__'];
+    /** if tree expanded */
+    treeExpanded?: PrivateRowDT['__T_EXP__']
 };
 
 export type CustomHeaderCellProps<T extends Record<string, any>> = {
@@ -147,7 +149,7 @@ export type PrivateRowDT = {
      * if row expanded
      * @private
      */
-    __EXP__?: StkTableColumn<any> | null;
+    __EXP__?: StkTableColumn<any>;
     /**
      * if tree node row expanded
      * @private
@@ -163,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'>;
@@ -239,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/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);