stk-table-vue 0.6.4 → 0.6.5

package/README.md

@@ -1,9 +1,17 @@
 # StkTable (Sticky Table)
+![NPM License](https://img.shields.io/npm/l/stk-table-vue)
+![NPM Version](https://img.shields.io/npm/v/stk-table-vue)
+![NPM Type Definitions](https://img.shields.io/npm/types/stk-table-vue)
+![NPM Downloads](https://img.shields.io/npm/dw/stk-table-vue)
 
 Vue3 简易虚拟滚动表格。用于实时数据展示，新数据行高亮渐暗动效。
 
 Vue2.7支持引入源码(**ts**)使用。
 
+[Stk Table Vue 文档](https://ja-plus.github.io/stk-table-vue/)
+
+## License
+MIT
 repo: 
 - [Github](https://github.com/ja-plus/stk-table-vue)
 - [Gitee](https://gitee.com/japlus/stk-table-vue) 🇨🇳
@@ -227,7 +235,7 @@ export type StkProps = {
    * 列宽拖动时，每一列都必须要有width，且minWidth/maxWidth不生效。table width会变为"fit-content"。
    * - 会自动更新props.columns中的with属性
    */
-  colResizable?: boolean;
+  colResizable?: boolean | ColResizableConfig;
   /** 可拖动至最小的列宽 */
   colMinWidth?: number;
   /**
@@ -281,7 +289,7 @@ export type StkProps = {
   expandConfig?: {
     height?: number;
   };
-  /** 列拖动配置 */
+  /** 行拖动配置 */
   dragRowConfig?: {
     mode?: 'none' | 'insert' | 'swap';
   };

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

@@ -1,4 +1,4 @@
-import { AutoRowHeightConfig, DragRowConfig, ExpandConfig, HeaderDragConfig, HighlightConfig, Order, PrivateRowDT, SeqConfig, SortConfig, SortOption, StkTableColumn, UniqKeyProp } from './types/index';
+import { AutoRowHeightConfig, DragRowConfig, ExpandConfig, HeaderDragConfig, HighlightConfig, Order, PrivateRowDT, SeqConfig, SortConfig, SortOption, StkTableColumn, UniqKeyProp, ColResizableConfig } from './types/index';
 /** Generic stands for DataType */
 type DT = any & PrivateRowDT;
 /**
@@ -138,7 +138,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
      * 列宽拖动时，每一列都必须要有width，且minWidth/maxWidth不生效。table width会变为"fit-content"。
      * - 会自动更新props.columns中的with属性
      */
-    colResizable?: boolean | undefined;
+    colResizable?: boolean | ColResizableConfig<any> | undefined;
     /** 可拖动至最小的列宽 */
     colMinWidth?: number | undefined;
     /**
@@ -169,7 +169,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
     seqConfig?: SeqConfig | undefined;
     /** 展开行配置 */
     expandConfig?: ExpandConfig | undefined;
-    /** 列拖动配置 */
+    /** 行拖动配置 */
     dragRowConfig?: DragRowConfig | undefined;
     /**
      * 固定头，固定列实现方式。(非响应式)
@@ -383,7 +383,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
      * 列宽拖动时，每一列都必须要有width，且minWidth/maxWidth不生效。table width会变为"fit-content"。
      * - 会自动更新props.columns中的with属性
      */
-    colResizable?: boolean | undefined;
+    colResizable?: boolean | ColResizableConfig<any> | undefined;
     /** 可拖动至最小的列宽 */
     colMinWidth?: number | undefined;
     /**
@@ -414,7 +414,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
     seqConfig?: SeqConfig | undefined;
     /** 展开行配置 */
     expandConfig?: ExpandConfig | undefined;
-    /** 列拖动配置 */
+    /** 行拖动配置 */
     dragRowConfig?: DragRowConfig | undefined;
     /**
      * 固定头，固定列实现方式。(非响应式)
@@ -471,7 +471,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
     selectedCellRevokable: boolean;
     headerDrag: HeaderDragConfig;
     rowClassName: (row: any, i: number) => string;
-    colResizable: boolean;
+    colResizable: boolean | ColResizableConfig<any>;
     colMinWidth: number;
     bordered: boolean | "h" | "v" | "body-v";
     autoResize: boolean | (() => void);

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

@@ -185,6 +185,7 @@ export type SeqConfig = {
 };
 /** Configuration options for the expand column  */
 export type ExpandConfig = {
+    /** worked in virtual mode */
     height?: number;
 };
 export type ExpandedRow = PrivateRowDT & {
@@ -211,4 +212,7 @@ export type AutoRowHeightConfig<DT> = {
     /** Estimated row height */
     expectedHeight?: number | ((row: DT, index: number) => number);
 };
+export type ColResizableConfig<DT extends Record<string, any>> = {
+    disabled: (col: StkTableColumn<DT>) => boolean;
+};
 export {};

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

@@ -11,6 +11,7 @@ type Params<DT extends Record<string, any>> = {
 };
 /** 列宽拖动 */
 export declare function useColResize<DT extends Record<string, any>>({ tableContainerRef, tableHeaderLast, colResizeIndicatorRef, props, emits, colKeyGen, fixedCols, }: Params<DT>): {
+    colResizeOn: ComputedRef<((col: StkTableColumn<DT>) => boolean) | (() => any)>;
     isColResizing: Ref<boolean, boolean>;
     onThResizeMouseDown: (e: MouseEvent, col: StkTableColumn<DT>, leftHandle?: boolean) => void;
 };

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

@@ -6,14 +6,14 @@ type Params<T extends Record<string, any>> = {
     colKeyGen: ComputedRef<(col: StkTableColumn<T>) => UniqKey>;
     getFixedColPosition: ComputedRef<(col: StkTableColumn<T>) => number>;
     tableHeaders: ShallowRef<StkTableColumn<T>[][]>;
-    tableHeaderLast: ShallowRef<StkTableColumn<T>[]>;
+    tableHeadersForCalc: ShallowRef<StkTableColumn<T>[][]>;
     tableContainerRef: Ref<HTMLDivElement | undefined>;
 };
 /**
  * 固定列处理
  * @returns
  */
-export declare function useFixedCol<DT extends Record<string, any>>({ props, colKeyGen, getFixedColPosition, tableHeaders, tableHeaderLast, tableContainerRef, }: Params<DT>): {
+export declare function useFixedCol<DT extends Record<string, any>>({ props, colKeyGen, getFixedColPosition, tableHeaders, tableHeadersForCalc, tableContainerRef, }: Params<DT>): {
     /** 正在被固定的列 */
     fixedCols: ShallowRef<StkTableColumn<DT>[], StkTableColumn<DT>[]>;
     /** 固定列class */

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

@@ -1,4 +1,6 @@
 import { Order, SortConfig, SortOption, SortState, StkTableColumn } from '../types';
+/** 是否空值 */
+export declare function isEmptyValue(val: any, isNumber?: boolean): boolean;
 /**
  * 对有序数组插入新数据
  *
@@ -37,5 +39,5 @@ export declare function tableSort<T extends Record<string, any>>(sortOption: Sor
 /** 多级表头深度 从0开始为一级*/
 export declare function howDeepTheHeader(arr: StkTableColumn<any>[], level?: number): number;
 /** number width +px */
-export declare function transformWidthToStr(width?: string | number): string;
+export declare function transformWidthToStr(width?: string | number): string | undefined;
 export declare function getBrowsersVersion(browserName: string): number;

package/lib/stk-table-vue.js

@@ -1,4 +1,4 @@
-import { openBlock, createElementBlock, createElementVNode, watch, onMounted, onBeforeUnmount, ref, shallowRef, computed, defineComponent, nextTick, toRaw, normalizeClass, unref, normalizeStyle, createCommentVNode, Fragment, renderList, createBlock, resolveDynamicComponent, toDisplayString, renderSlot, createVNode, createTextVNode } from "vue";
+import { openBlock, createElementBlock, createElementVNode, watch, onMounted, onBeforeUnmount, ref, computed, shallowRef, defineComponent, nextTick, toRaw, normalizeClass, unref, normalizeStyle, createCommentVNode, Fragment, renderList, createBlock, resolveDynamicComponent, toDisplayString, renderSlot, createVNode, createTextVNode } from "vue";
 import { interpolateRgb } from "d3-interpolate";
 const _export_sfc = (sfc, props) => {
   const target = sfc.__vccOpts || sfc;
@@ -48,7 +48,7 @@ function _sfc_render(_ctx, _cache) {
 }
 const SortIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render]]);
 function isEmptyValue(val, isNumber) {
-  let isEmpty = val === null || val === "" || val === void 0;
+  let isEmpty = val === null || val === void 0;
   if (isNumber) {
     isEmpty = isEmpty || typeof val === "boolean" || Number.isNaN(+val);
   }
@@ -158,6 +158,7 @@ function howDeepTheHeader(arr, level = 0) {
   return Math.max(...levels);
 }
 function transformWidthToStr(width) {
+  if (width === void 0) return;
   const numberWidth = Number(width);
   return width + (!Number.isNaN(numberWidth) ? "px" : "");
 }
@@ -303,6 +304,12 @@ function useColResize({
     startOffsetTableX: 0,
     revertMoveX: false
   };
+  const colResizeOn = computed(() => {
+    if (Object.prototype.toString.call(props.colResizable) === "[object Object]") {
+      return (col) => !props.colResizable.disabled(col);
+    }
+    return () => props.colResizable;
+  });
   onMounted(() => {
     initColResizeEvent();
   });
@@ -411,6 +418,7 @@ function useColResize({
     return column;
   }
   return {
+    colResizeOn,
     isColResizing,
     onThResizeMouseDown
   };
@@ -420,7 +428,7 @@ function useFixedCol({
   colKeyGen,
   getFixedColPosition,
   tableHeaders,
-  tableHeaderLast,
+  tableHeadersForCalc,
   tableContainerRef
 }) {
   const fixedShadowCols = shallowRef([]);
@@ -443,23 +451,8 @@ function useFixedCol({
     });
     return colMap;
   });
-  function getColAndParentCols(col, type = 1) {
-    if (!col) return [];
-    const colsTemp = [];
-    let node = { __PARENT__: col };
-    while (node = node.__PARENT__) {
-      if (type === 1 && node.fixed) {
-        colsTemp.push(node);
-      }
-      if (type === 2) {
-        colsTemp.push(node);
-      }
-    }
-    return colsTemp;
-  }
   function updateFixedShadow(virtualScrollX) {
     const fixedColsTemp = [];
-    const fixedShadowColsTemp = [];
     let clientWidth, scrollLeft;
     if (virtualScrollX == null ? void 0 : virtualScrollX.value) {
       const {
@@ -478,26 +471,29 @@ function useFixedCol({
       clientWidth = cw;
       scrollLeft = sl;
     }
-    let leftShadowCol = null;
-    let rightShadowCol = null;
-    let left = 0;
-    tableHeaderLast.value.forEach((col) => {
-      const position = getFixedColPosition.value(col);
-      if (col.fixed === "left" && position + scrollLeft > left) {
-        leftShadowCol = col;
-        fixedColsTemp.push(...getColAndParentCols(col, 2));
-      }
-      left += getCalculatedColWidth(col);
-      if (!rightShadowCol && col.fixed === "right" && scrollLeft + clientWidth - left < position) {
-        rightShadowCol = col;
-      }
-      if (rightShadowCol && col.fixed === "right") {
-        fixedColsTemp.push(...getColAndParentCols(col, 2));
-      }
+    const leftShadowCol = [];
+    const rightShadowCol = [];
+    tableHeadersForCalc.value.forEach((row, level) => {
+      let left = 0;
+      row.forEach((col) => {
+        const position = getFixedColPosition.value(col);
+        const isFixedLeft = col.fixed === "left";
+        const isFixedRight = col.fixed === "right";
+        if (isFixedLeft && position + scrollLeft > left) {
+          fixedColsTemp.push(col);
+          leftShadowCol[level] = col;
+        }
+        left += getCalculatedColWidth(col);
+        if (isFixedRight && scrollLeft + clientWidth - left < position) {
+          fixedColsTemp.push(col);
+          if (!rightShadowCol[level]) {
+            rightShadowCol[level] = col;
+          }
+        }
+      });
     });
     if (props.fixedColShadow) {
-      fixedShadowColsTemp.push(...getColAndParentCols(leftShadowCol), ...getColAndParentCols(rightShadowCol));
-      fixedShadowCols.value = fixedShadowColsTemp.filter(Boolean);
+      fixedShadowCols.value = [...leftShadowCol, ...rightShadowCol].filter(Boolean);
     }
     fixedCols.value = fixedColsTemp;
   }
@@ -633,7 +629,7 @@ function useHighlight({ props, stkTableId, tableContainerRef }) {
             const { ts, duration } = store;
             const timeOffset = nowTs - ts;
             if (nowTs - ts < duration) {
-              updateRowBgc(rowKeyValue, store, timeOffset);
+              updateRowAnimation(rowKeyValue, store, timeOffset);
             } else {
               highlightDimRowsAnimation.delete(rowKeyValue);
             }
@@ -708,7 +704,7 @@ function useHighlight({ props, stkTableId, tableContainerRef }) {
           const rowKeyValue = rowKeyValues[i];
           const store = { ts: nowTs, visible: false, keyframe, duration };
           highlightDimRowsAnimation.set(rowKeyValue, store);
-          updateRowBgc(rowKeyValue, store, 0);
+          updateRowAnimation(rowKeyValue, store, 0);
         }
         calcRowHighlightLoop();
       } else {
@@ -770,7 +766,7 @@ function useHighlight({ props, stkTableId, tableContainerRef }) {
       }, duration)
     );
   }
-  function updateRowBgc(rowKeyValue, store, timeOffset) {
+  function updateRowAnimation(rowKeyValue, store, timeOffset) {
     const rowEl = document.getElementById(stkTableId + "-" + String(rowKeyValue));
     const { visible, keyframe, duration: initialDuration } = store;
     if (!rowEl) {
@@ -916,7 +912,7 @@ function useThDrag({ props, emits, colKeyGen }) {
     emits("th-drop", th.dataset.colKey);
   }
   function handleColOrderChange(dragStartKey, dragEndKey) {
-    if (!dragStartKey || !dragEndKey) return;
+    if (isEmptyValue(dragStartKey) || isEmptyValue(dragEndKey)) return;
     if (dragConfig.value.mode !== "none") {
       const columns = [...props.columns];
       const dragStartIndex = columns.findIndex((col) => colKeyGen.value(col) === dragStartKey);
@@ -1064,6 +1060,9 @@ function useVirtualScroll({
     offsetLeft: 0,
     scrollLeft: 0
   });
+  const hasExpandCol = computed(() => {
+    return tableHeaderLast.value.some((col) => col.type === "expand");
+  });
   const virtual_on = computed(() => {
     return props.virtual && dataSourceCopy.value.length > virtualScroll.value.pageSize * 2;
   });
@@ -1170,7 +1169,8 @@ function useVirtualScroll({
     let expectedHeight;
     if (storedHeight) {
       return storedHeight;
-    } else if (expectedHeight = (_a = props.autoRowHeight) == null ? void 0 : _a.expectedHeight) {
+    }
+    if (expectedHeight = (_a = props.autoRowHeight) == null ? void 0 : _a.expectedHeight) {
       if (typeof expectedHeight === "function") {
         return expectedHeight(row);
       } else {
@@ -1179,6 +1179,18 @@ function useVirtualScroll({
     }
     return props.rowHeight || DEFAULT_ROW_HEIGHT;
   };
+  const createGetRowHeightFn = () => {
+    var _a;
+    if (props.autoRowHeight) {
+      return (row) => getAutoRowHeight(row);
+    }
+    if (hasExpandCol.value) {
+      const { rowHeight } = virtualScroll.value;
+      const expandedRowHeight = ((_a = props.expandConfig) == null ? void 0 : _a.height) || rowHeight;
+      return (row) => row.__EXPANDED_ROW__ ? expandedRowHeight : rowHeight;
+    }
+    return () => props.rowHeight || DEFAULT_ROW_HEIGHT;
+  };
   function updateVirtualScrollY(sTop = 0) {
     var _a;
     const { rowHeight, pageSize, scrollTop, startIndex: oldStartIndex, endIndex: oldEndIndex } = virtualScroll.value;
@@ -1186,21 +1198,27 @@ function useVirtualScroll({
     if (!virtual_on.value) {
       return;
     }
+    const dataSourceCopyTemp = dataSourceCopy.value;
     const { autoRowHeight, stripe, optimizeVue2Scroll } = props;
     let startIndex = 0;
     let autoRowHeightTop = 0;
-    if (autoRowHeight) {
-      (_a = trRef.value) == null ? void 0 : _a.forEach((tr) => {
-        const { rowKey } = tr.dataset;
-        if (!rowKey || autoRowHeightMap.has(rowKey)) return;
-        autoRowHeightMap.set(rowKey, tr.offsetHeight);
-      });
-      for (let i = 0; i < dataSourceCopy.value.length; i++) {
-        const height = getAutoRowHeight(dataSourceCopy.value[i]);
+    let getRowHeight = null;
+    const dataLength = dataSourceCopyTemp.length;
+    if (autoRowHeight || hasExpandCol.value) {
+      if (autoRowHeight) {
+        (_a = trRef.value) == null ? void 0 : _a.forEach((tr) => {
+          const { rowKey } = tr.dataset;
+          if (!rowKey || autoRowHeightMap.has(rowKey)) return;
+          autoRowHeightMap.set(rowKey, tr.offsetHeight);
+        });
+      }
+      getRowHeight = createGetRowHeightFn();
+      for (let i = 0; i < dataLength; i++) {
+        const height = getRowHeight(dataSourceCopyTemp[i]);
         autoRowHeightTop += height;
         if (autoRowHeightTop >= sTop) {
           startIndex = i;
-          autoRowHeightTop = autoRowHeightTop - height;
+          autoRowHeightTop -= height;
           break;
         }
       }
@@ -1210,13 +1228,13 @@ function useVirtualScroll({
     let endIndex = startIndex + pageSize;
     if (stripe && startIndex > 0 && startIndex % 2) {
       startIndex -= 1;
-      if (autoRowHeight) {
-        const height = getAutoRowHeight(dataSourceCopy.value[startIndex]);
+      if (autoRowHeight || hasExpandCol.value) {
+        const height = getRowHeight(dataSourceCopyTemp[startIndex]);
         autoRowHeightTop -= height;
       }
     }
     startIndex = Math.max(0, startIndex);
-    endIndex = Math.min(endIndex, dataSourceCopy.value.length);
+    endIndex = Math.min(endIndex, dataLength);
     if (startIndex >= endIndex) {
       startIndex = endIndex - pageSize;
     }
@@ -1224,7 +1242,7 @@ function useVirtualScroll({
       window.clearTimeout(vue2ScrollYTimeout);
     }
     let offsetTop = 0;
-    if (autoRowHeight) {
+    if (autoRowHeight || hasExpandCol.value) {
       offsetTop = autoRowHeightTop;
     } else {
       if (oldStartIndex === startIndex && oldEndIndex === endIndex) {
@@ -1473,9 +1491,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       getFixedColPosition,
       tableContainerRef,
       tableHeaders,
-      tableHeaderLast
+      tableHeadersForCalc
     });
-    const { isColResizing, onThResizeMouseDown } = useColResize({
+    const { isColResizing, onThResizeMouseDown, colResizeOn } = useColResize({
       props,
       emits,
       colKeyGen,
@@ -2175,12 +2193,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       col.sorter ? (openBlock(), createElementBlock("span", _hoisted_4, [
                         createVNode(SortIcon)
                       ])) : createCommentVNode("", true),
-                      _ctx.colResizable && colIndex > 0 ? (openBlock(), createElementBlock("div", {
+                      unref(colResizeOn)(col) && colIndex > 0 ? (openBlock(), createElementBlock("div", {
                         key: 4,
                         class: "table-header-resizer left",
                         onMousedown: (e) => unref(onThResizeMouseDown)(e, col, true)
                       }, null, 40, _hoisted_5)) : createCommentVNode("", true),
-                      _ctx.colResizable ? (openBlock(), createElementBlock("div", {
+                      unref(colResizeOn)(col) ? (openBlock(), createElementBlock("div", {
                         key: 5,
                         class: "table-header-resizer right",
                         onMousedown: (e) => unref(onThResizeMouseDown)(e, col)
@@ -2235,7 +2253,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   "expanded-row": row && row.__EXPANDED_ROW__
                 }),
                 style: normalizeStyle({
-                  "--row-height": row && row.__EXPANDED_ROW__ && unref(virtual_on) && ((_a = props.expandConfig) == null ? void 0 : _a.height) && ((_b = props.expandConfig) == null ? void 0 : _b.height) + "px"
+                  "--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"
                 }),
                 onClick: (e) => onRowClick(e, row),
                 onDblclick: (e) => onRowDblclick(e, row),

package/lib/style.css

@@ -38,8 +38,6 @@
   display:flex;
   flex-direction:column;
   box-sizing:border-box;
-  background-image:linear-gradient(180deg, #e8e8f4 1px, transparent 1px), linear-gradient(270deg, #e8e8f4 1px, transparent 1px), linear-gradient(0deg, #e8e8f4 1px, transparent 1px);
-  background-image:var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
 }
 .stk-table.dark{
   --th-bgc:#202029;
@@ -63,21 +61,22 @@
   --drag-handle-hover-color:#5d6064;
   color:#d1d1e0;
 }
-.stk-table.headless{
+.stk-table.headless.border{
   border-top:1px solid var(--border-color);
   background-image:var(--bg-border-right), var(--bg-border-bottom);
 }
 .stk-table.col-resizable .stk-table-main{
-  width:-moz-fit-content !important;
-  width:fit-content !important;
-  min-width:-moz-min-content !important;
-  min-width:min-content !important;
+  width:-moz-fit-content;
+  width:fit-content;
+  min-width:-moz-min-content;
+  min-width:min-content;
 }
 .stk-table.is-col-resizing th{
   pointer-events:none;
 }
 .stk-table.border{
   border-left:1px solid var(--border-color);
+  background-image:var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
 }
 .stk-table.border th,
 .stk-table.border td{
@@ -104,13 +103,13 @@
 .stk-table.stripe.vt-on .stk-tbody-main tr:nth-child(odd){
   background-color:var(--stripe-bgc);
 }
-.stk-table.stripe.row-hover .stk-tbody-main tr:hover{
+.stk-table.stripe.row-hover .stk-table-main .stk-tbody-main tr:hover{
   background-color:var(--tr-hover-bgc);
 }
-.stk-table.stripe.row-active .stk-tbody-main tr.active{
+.stk-table.stripe.row-active .stk-table-main .stk-tbody-main tr.active{
   background-color:var(--tr-active-bgc);
 }
-.stk-table.row-hover .stk-tbody-main tr:hover{
+.stk-table.row-hover .stk-table-main .stk-tbody-main tr:hover{
   background-color:var(--tr-hover-bgc);
 }
 .stk-table.row-active .stk-tbody-main tr.active{
@@ -142,6 +141,9 @@
   max-height:calc(var(--header-row-height) * 1);
   max-height:calc(var(--header-row-height) * var(--row-span, 1));
 }
+.stk-table.virtual .table-header-cell-wrapper .table-header-title{
+  max-height:inherit;
+}
 .stk-table.virtual tbody td{
   height:var(--row-height);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stk-table-vue",
-  "version": "0.6.4",
+  "version": "0.6.5",
   "description": "Simple realtime virtual table for vue3 and vue2.7",
   "main": "./lib/stk-table-vue.js",
   "types": "./lib/src/StkTable/index.d.ts",
@@ -13,9 +13,10 @@
     "dev": "vite",
     "build": "vite build",
     "test": "vitest",
-    "docs:dev": "vitepress dev docs",
-    "docs:build": "vitepress build docs",
-    "docs:preview": "vitepress preview docs"
+    "docs:dev": "vitepress dev docs-src",
+    "docs:build": "vitepress build docs-src",
+    "docs:preview": "vitepress preview docs-src",
+    "docs:update": "cp -rf ./docs-src/.vitepress/dist/* ./docs"
   },
   "keywords": [
     "virtual table",
@@ -40,6 +41,7 @@
   "license": "MIT",
   "devDependencies": {
     "@types/d3-interpolate": "^3.0.4",
+    "@types/mockjs": "^1.0.10",
     "@types/node": "^20.12.10",
     "@typescript-eslint/eslint-plugin": "^7.7.0",
     "@typescript-eslint/parser": "^7.7.0",
@@ -52,6 +54,8 @@
     "eslint-plugin-vue": "^9.25.0",
     "happy-dom": "^12.10.3",
     "less": "^4.2.0",
+    "mitt": "^3.0.1",
+    "mockjs": "^1.1.0",
     "postcss": "^8.4.47",
     "postcss-discard-comments": "^6.0.2",
     "postcss-preset-env": "^9.5.11",
@@ -60,7 +64,7 @@
     "vite": "^5.4.10",
     "vite-plugin-dts": "^4.3.0",
     "vitepress": "^1.5.0",
-    "vitepress-demo-plugin": "^1.1.1",
+    "vitepress-demo-plugin": "^1.2.2",
     "vitest": "^2.1.3",
     "vue": "^3.5.12",
     "vue-eslint-parser": "^9.4.2"

package/src/StkTable/StkTable.vue

@@ -102,11 +102,11 @@
                             </span>
                             <!-- 列宽拖动handler -->
                             <div
-                                v-if="colResizable && colIndex > 0"
+                                v-if="colResizeOn(col) && colIndex > 0"
                                 class="table-header-resizer left"
                                 @mousedown="e => onThResizeMouseDown(e, col, true)"
                             ></div>
-                            <div v-if="colResizable" class="table-header-resizer right" @mousedown="e => onThResizeMouseDown(e, col)"></div>
+                            <div v-if="colResizeOn(col)" class="table-header-resizer right" @mousedown="e => onThResizeMouseDown(e, col)"></div>
                         </div>
                     </th>
                     <!-- 这个th用于横向虚拟滚动表格右边距 width、maxWidth 用于兼容低版本浏览器-->
@@ -139,7 +139,8 @@
                         'expanded-row': row && row.__EXPANDED_ROW__,
                     }"
                     :style="{
-                        '--row-height': row && row.__EXPANDED_ROW__ && virtual_on && props.expandConfig?.height && props.expandConfig?.height + 'px',
+                        '--row-height':
+                            row && row.__EXPANDED_ROW__ && props.virtual && props.expandConfig?.height && props.expandConfig?.height + 'px',
                     }"
                     @click="e => onRowClick(e, row)"
                     @dblclick="e => onRowDblclick(e, row)"
@@ -253,6 +254,7 @@ import {
     StkTableColumn,
     TagType,
     UniqKeyProp,
+    ColResizableConfig,
 } from './types/index';
 import { useAutoResize } from './useAutoResize';
 import { useColResize } from './useColResize';
@@ -354,7 +356,7 @@ const props = withDefaults(
          * 列宽拖动时，每一列都必须要有width，且minWidth/maxWidth不生效。table width会变为"fit-content"。
          * - 会自动更新props.columns中的with属性
          */
-        colResizable?: boolean;
+        colResizable?: boolean | ColResizableConfig<DT>;
         /** 可拖动至最小的列宽 */
         colMinWidth?: number;
         /**
@@ -385,7 +387,7 @@ const props = withDefaults(
         seqConfig?: SeqConfig;
         /** 展开行配置 */
         expandConfig?: ExpandConfig;
-        /** 列拖动配置 */
+        /** 行拖动配置 */
         dragRowConfig?: DragRowConfig;
         /**
          * 固定头，固定列实现方式。(非响应式)
@@ -747,10 +749,10 @@ const { fixedCols, fixedColClassMap, updateFixedShadow } = useFixedCol({
     getFixedColPosition,
     tableContainerRef,
     tableHeaders,
-    tableHeaderLast,
+    tableHeadersForCalc,
 });
 
-const { isColResizing, onThResizeMouseDown } = useColResize({
+const { isColResizing, onThResizeMouseDown, colResizeOn } = useColResize({
     props,
     emits,
     colKeyGen,

package/src/StkTable/style.less

@@ -50,9 +50,6 @@
     flex-direction: column;
     box-sizing: border-box;
 
-    /* 下面border用于表格内容不满高度时，绘制表格边界线 */
-    background-image: var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
-
     /**深色模式 */
     &.dark {
         --th-bgc: #202029;
@@ -85,17 +82,20 @@
         /* ⭐这里加background-color会导致表格出滚动白屏*/
         color: #d1d1e0;
     }
+       
 
     &.headless {
-        border-top: 1px solid var(--border-color);
-        background-image: var(--bg-border-right), var(--bg-border-bottom);
+        &.border {
+            border-top: 1px solid var(--border-color);
+            background-image: var(--bg-border-right), var(--bg-border-bottom);
+        }
     }
 
     /* 调整列宽的话，表格宽度应当自适应 */
     &.col-resizable {
         .stk-table-main {
-            width: fit-content !important;
-            min-width: min-content !important;
+            width: fit-content;
+            min-width: min-content;
         }
     }
 
@@ -115,6 +115,8 @@
         * - sticky 定位方案需要占用位置。高度为0。
         */
         border-left: 1px solid var(--border-color);
+        /* 下面border用于表格内容不满高度时，绘制表格边界线 */
+        background-image: var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
 
         th,
         td {
@@ -155,17 +157,18 @@
             background-color: var(--stripe-bgc);
         }
 
-        &.row-hover .stk-tbody-main tr:hover {
+        &.row-hover .stk-table-main .stk-tbody-main tr:hover {
             background-color: var(--tr-hover-bgc);
         }
 
-        &.row-active .stk-tbody-main tr.active {
+        &.row-active .stk-table-main .stk-tbody-main tr.active {
             background-color: var(--tr-active-bgc);
         }
     }
 
 
-    &.row-hover .stk-tbody-main tr:hover {
+    /** more weight for custom row background*/
+    &.row-hover .stk-table-main .stk-tbody-main tr:hover {
         background-color: var(--tr-hover-bgc);
     }
 
@@ -213,6 +216,10 @@
         .table-header-cell-wrapper {
             overflow: hidden;
             max-height: calc(var(--header-row-height) * var(--row-span, 1));
+
+            .table-header-title {
+                max-height: inherit;
+            }
         }
 
         tbody td {

package/src/StkTable/types/index.ts

@@ -200,6 +200,7 @@ export type SeqConfig = {
 
 /** Configuration options for the expand column  */
 export type ExpandConfig = {
+    /** worked in virtual mode */
     height?: number;
 };
 
@@ -232,3 +233,7 @@ export type AutoRowHeightConfig<DT> = {
     /** Estimated row height */
     expectedHeight?: number | ((row: DT, index: number) => number);
 };
+
+export type ColResizableConfig<DT extends Record<string, any>> = {
+    disabled: (col: StkTableColumn<DT>) => boolean;
+};

package/src/StkTable/useColResize.ts

@@ -1,4 +1,4 @@
-import { ComputedRef, Ref, ShallowRef, onBeforeUnmount, onMounted, ref } from 'vue';
+import { ComputedRef, Ref, ShallowRef, computed, onBeforeUnmount, onMounted, ref } from 'vue';
 import { StkTableColumn, UniqKey } from './types';
 import { getCalculatedColWidth } from './utils/constRefUtils';
 
@@ -47,6 +47,14 @@ export function useColResize<DT extends Record<string, any>>({
         revertMoveX: false,
     };
 
+    /** 是否可拖动 */
+    const colResizeOn = computed(() => {
+        if (Object.prototype.toString.call(props.colResizable) === '[object Object]') {
+            return (col: StkTableColumn<DT>) => !props.colResizable.disabled(col);
+        }
+        return () => props.colResizable;
+    });
+
     onMounted(() => {
         initColResizeEvent();
     });
@@ -93,7 +101,7 @@ export function useColResize<DT extends Record<string, any>>({
                 // 对于固定右侧的列，拖动左侧的把，需要反向计算
                 revertMoveX = true;
             } else {
-                // 默认拖动右侧的把，取上一列
+                // 取上一列
                 if (colIndex - 1 >= 0) {
                     col = tableHeaderLastValue[colIndex - 1];
                 }
@@ -198,6 +206,7 @@ export function useColResize<DT extends Record<string, any>>({
     }
 
     return {
+        colResizeOn,
         isColResizing,
         onThResizeMouseDown,
     };

package/src/StkTable/useFixedCol.ts

@@ -8,7 +8,7 @@ type Params<T extends Record<string, any>> = {
     colKeyGen: ComputedRef<(col: StkTableColumn<T>) => UniqKey>;
     getFixedColPosition: ComputedRef<(col: StkTableColumn<T>) => number>;
     tableHeaders: ShallowRef<StkTableColumn<T>[][]>;
-    tableHeaderLast: ShallowRef<StkTableColumn<T>[]>;
+    tableHeadersForCalc: ShallowRef<StkTableColumn<T>[][]>;
     tableContainerRef: Ref<HTMLDivElement | undefined>;
 };
 
@@ -21,7 +21,7 @@ export function useFixedCol<DT extends Record<string, any>>({
     colKeyGen,
     getFixedColPosition,
     tableHeaders,
-    tableHeaderLast,
+    tableHeadersForCalc,
     tableContainerRef,
 }: Params<DT>) {
     /** 保存需要出现阴影的列 */
@@ -56,27 +56,26 @@ export function useFixedCol<DT extends Record<string, any>>({
      * @param type 1-shadow（阴影） 2-active(被固定的列)
      *
      */
-    function getColAndParentCols(col: StkTableColumn<DT> | null, type: 1 | 2 = 1) {
-        if (!col) return [];
-        const colsTemp: StkTableColumn<DT>[] = [];
-        let node: any = { __PARENT__: col };
-        while ((node = node.__PARENT__)) {
-            if (type === 1 && node.fixed) {
-                // shadow
-                colsTemp.push(node);
-            }
-            if (type === 2) {
-                // active
-                colsTemp.push(node);
-            }
-        }
-        return colsTemp;
-    }
+    // function getColAndParentCols(col: StkTableColumn<DT> | null, type: 1 | 2 = 1) {
+    //     if (!col) return [];
+    //     const colsTemp: StkTableColumn<DT>[] = [];
+    //     let node: any = { __PARENT__: col };
+    //     while ((node = node.__PARENT__)) {
+    //         if (type === 1 && node.fixed) {
+    //             // shadow
+    //             colsTemp.push(node);
+    //         }
+    //         if (type === 2) {
+    //             // active
+    //             colsTemp.push(node);
+    //         }
+    //     }
+    //     return colsTemp;
+    // }
 
     /** 滚动条变化时，更新需要展示阴影的列 */
     function updateFixedShadow(virtualScrollX?: Ref<VirtualScrollXStore>) {
         const fixedColsTemp: StkTableColumn<DT>[] = [];
-        const fixedShadowColsTemp: (StkTableColumn<DT> | null)[] = [];
         let clientWidth, /* scrollWidth, */ scrollLeft;
 
         if (virtualScrollX?.value) {
@@ -95,31 +94,38 @@ export function useFixedCol<DT extends Record<string, any>>({
          * 根据横向滚动位置，计算出哪个列需要展示阴影
          *****/
         /** 左侧需要展示阴影的列 */
-        let leftShadowCol: StkTableColumn<DT> | null = null;
+        const leftShadowCol: StkTableColumn<DT>[] = [];
         /** 右侧展示阴影的列 */
-        let rightShadowCol: StkTableColumn<DT> | null = null;
-        let left = 0;
-        /**
-         * 左侧第n个fixed:left 计算要加上前面所有left 的列宽。
-         */
-        tableHeaderLast.value.forEach(col => {
-            const position = getFixedColPosition.value(col);
-            if (col.fixed === 'left' && position + scrollLeft > left) {
-                leftShadowCol = col;
-                fixedColsTemp.push(...getColAndParentCols(col, 2));
-            }
-            left += getCalculatedColWidth(col);
-            if (!rightShadowCol && col.fixed === 'right' && scrollLeft + clientWidth - left < position) {
-                rightShadowCol = col;
-            }
-            if (rightShadowCol && col.fixed === 'right') {
-                fixedColsTemp.push(...getColAndParentCols(col, 2));
-            }
+        const rightShadowCol: StkTableColumn<DT>[] = [];
+        tableHeadersForCalc.value.forEach((row, level) => {
+            /**
+             * 左侧第n个fixed:left 计算要加上前面所有left 的列宽。
+             */
+            let left = 0;
+            row.forEach(col => {
+                const position = getFixedColPosition.value(col);
+                const isFixedLeft = col.fixed === 'left';
+                const isFixedRight = col.fixed === 'right';
+
+                if (isFixedLeft && position + scrollLeft > left) {
+                    fixedColsTemp.push(col);
+                    leftShadowCol[level] = col;
+                }
+
+                left += getCalculatedColWidth(col);
+
+                if (isFixedRight && scrollLeft + clientWidth - left < position) {
+                    fixedColsTemp.push(col);
+                    // 右固定列阴影，只要第一列
+                    if (!rightShadowCol[level]) {
+                        rightShadowCol[level] = col;
+                    }
+                }
+            });
         });
 
         if (props.fixedColShadow) {
-            fixedShadowColsTemp.push(...getColAndParentCols(leftShadowCol), ...getColAndParentCols(rightShadowCol));
-            fixedShadowCols.value = (fixedShadowColsTemp as (StkTableColumn<DT> | null)[]).filter(Boolean) as StkTableColumn<DT>[];
+            fixedShadowCols.value = [...leftShadowCol, ...rightShadowCol].filter(Boolean) as StkTableColumn<DT>[];
         }
 
         fixedCols.value = fixedColsTemp;

package/src/StkTable/useHighlight.ts

@@ -89,7 +89,7 @@ export function useHighlight({ props, stkTableId, tableContainerRef }: Params) {
                         const { ts, duration } = store;
                         const timeOffset = nowTs - ts;
                         if (nowTs - ts < duration) {
-                            updateRowBgc(rowKeyValue, store, timeOffset);
+                            updateRowAnimation(rowKeyValue, store, timeOffset);
                         } else {
                             highlightDimRowsAnimation.delete(rowKeyValue);
                         }
@@ -197,7 +197,7 @@ export function useHighlight({ props, stkTableId, tableContainerRef }: Params) {
                     const rowKeyValue = rowKeyValues[i];
                     const store: HighlightDimRowStore = { ts: nowTs, visible: false, keyframe, duration };
                     highlightDimRowsAnimation.set(rowKeyValue, store);
-                    updateRowBgc(rowKeyValue, store, 0);
+                    updateRowAnimation(rowKeyValue, store, 0);
                 }
                 calcRowHighlightLoop();
             } else {
@@ -279,7 +279,7 @@ export function useHighlight({ props, stkTableId, tableContainerRef }: Params) {
      * @param store highlightDimRowStore 的引用对象
      * @param timeOffset 距动画开始经过的时长
      */
-    function updateRowBgc(rowKeyValue: UniqKey, store: HighlightDimRowStore, timeOffset: number) {
+    function updateRowAnimation(rowKeyValue: UniqKey, store: HighlightDimRowStore, timeOffset: number) {
         const rowEl = document.getElementById(stkTableId + '-' + String(rowKeyValue));
         const { visible, keyframe, duration: initialDuration } = store;
         if (!rowEl) {

package/src/StkTable/useThDrag.ts

@@ -1,5 +1,6 @@
 import { computed, ComputedRef } from 'vue';
 import { StkTableColumn, UniqKey } from './types';
+import { isEmptyValue } from './utils';
 
 type Params<T extends Record<string, any>> = {
     props: any;
@@ -57,7 +58,6 @@ export function useThDrag<DT extends Record<string, any>>({ props, emits, colKey
         const th = findParentTH(e);
         if (!th) return;
         const dragStartKey = e.dataTransfer?.getData('text');
-
         if (dragStartKey !== th.dataset.colKey) {
             handleColOrderChange(dragStartKey, th.dataset.colKey);
         }
@@ -66,7 +66,7 @@ export function useThDrag<DT extends Record<string, any>>({ props, emits, colKey
 
     /** 列拖动交换顺序 */
     function handleColOrderChange(dragStartKey: string | undefined, dragEndKey: string | undefined) {
-        if (!dragStartKey || !dragEndKey) return;
+        if (isEmptyValue(dragStartKey) || isEmptyValue(dragEndKey)) return;
 
         if (dragConfig.value.mode !== 'none') {
             const columns = [...props.columns];

package/src/StkTable/useVirtualScroll.ts

@@ -79,6 +79,8 @@ export function useVirtualScroll<DT extends Record<string, any>>({
         scrollHeight: 0,
     });
 
+    // TODO: init pageSize
+
     const virtualScrollX = ref<VirtualScrollXStore>({
         containerWidth: 0,
         scrollWidth: 0,
@@ -88,6 +90,10 @@ export function useVirtualScroll<DT extends Record<string, any>>({
         scrollLeft: 0,
     });
 
+    const hasExpandCol = computed(() => {
+        return tableHeaderLast.value.some(col => col.type === 'expand');
+    });
+
     /** 是否虚拟滚动标志 */
     const virtual_on = computed(() => {
         return props.virtual && dataSourceCopy.value.length > virtualScroll.value.pageSize * 2;
@@ -198,10 +204,9 @@ export function useVirtualScroll<DT extends Record<string, any>>({
             const headerToBodyRowHeightCount = Math.floor(headerHeight / rowHeight);
             pageSize -= headerToBodyRowHeightCount; //减去表头行数
         }
-        /** 最大的scrollTop */
         const maxScrollTop = dataSourceCopy.value.length * rowHeight + tableHeaderHeight.value - containerHeight;
         if (scrollTop > maxScrollTop) {
-            /** 用于修复： 滚动条不在顶部时，表格数据变少，导致滚动条位置有误 */
+            /** fix： 滚动条不在顶部时，表格数据变少，导致滚动条位置有误 */
             scrollTop = maxScrollTop;
         }
         Object.assign(virtualScroll.value, { containerHeight, pageSize, scrollHeight });
@@ -237,7 +242,8 @@ export function useVirtualScroll<DT extends Record<string, any>>({
         let expectedHeight;
         if (storedHeight) {
             return storedHeight;
-        } else if ((expectedHeight = props.autoRowHeight?.expectedHeight)) {
+        }
+        if ((expectedHeight = props.autoRowHeight?.expectedHeight)) {
             if (typeof expectedHeight === 'function') {
                 return expectedHeight(row);
             } else {
@@ -247,6 +253,18 @@ export function useVirtualScroll<DT extends Record<string, any>>({
         return props.rowHeight || DEFAULT_ROW_HEIGHT;
     };
 
+    const createGetRowHeightFn: () => (row: DT) => number = () => {
+        if (props.autoRowHeight) {
+            return (row: DT) => getAutoRowHeight(row);
+        }
+        if (hasExpandCol.value) {
+            const { rowHeight } = virtualScroll.value;
+            const expandedRowHeight: number = props.expandConfig?.height || rowHeight;
+            return (row: DT) => (row.__EXPANDED_ROW__ ? expandedRowHeight : rowHeight);
+        }
+        return () => props.rowHeight || (DEFAULT_ROW_HEIGHT as number);
+    };
+
     /** 通过滚动条位置，计算虚拟滚动的参数 */
     function updateVirtualScrollY(sTop = 0) {
         const { rowHeight, pageSize, scrollTop, startIndex: oldStartIndex, endIndex: oldEndIndex } = virtualScroll.value;
@@ -257,24 +275,32 @@ export function useVirtualScroll<DT extends Record<string, any>>({
         if (!virtual_on.value) {
             return;
         }
+
+        const dataSourceCopyTemp = dataSourceCopy.value;
         const { autoRowHeight, stripe, optimizeVue2Scroll } = props;
 
         let startIndex = 0;
-
         let autoRowHeightTop = 0;
-        if (autoRowHeight) {
-            trRef.value?.forEach(tr => {
-                const { rowKey } = tr.dataset;
-                if (!rowKey || autoRowHeightMap.has(rowKey)) return;
-                autoRowHeightMap.set(rowKey, tr.offsetHeight);
-            });
-
-            for (let i = 0; i < dataSourceCopy.value.length; i++) {
-                const height = getAutoRowHeight(dataSourceCopy.value[i]);
+        let getRowHeight: ReturnType<typeof createGetRowHeightFn> | null = null;
+        const dataLength = dataSourceCopyTemp.length;
+
+        if (autoRowHeight || hasExpandCol.value) {
+            if (autoRowHeight) {
+                trRef.value?.forEach(tr => {
+                    const { rowKey } = tr.dataset;
+                    if (!rowKey || autoRowHeightMap.has(rowKey)) return;
+                    autoRowHeightMap.set(rowKey, tr.offsetHeight);
+                });
+            }
+
+            getRowHeight = createGetRowHeightFn();
+
+            for (let i = 0; i < dataLength; i++) {
+                const height = getRowHeight(dataSourceCopyTemp[i]);
                 autoRowHeightTop += height;
                 if (autoRowHeightTop >= sTop) {
                     startIndex = i;
-                    autoRowHeightTop = autoRowHeightTop - height;
+                    autoRowHeightTop -= height;
                     break;
                 }
             }
@@ -287,8 +313,8 @@ export function useVirtualScroll<DT extends Record<string, any>>({
         if (stripe && startIndex > 0 && startIndex % 2) {
             // 斑马纹情况下，每滚动偶数行才加载。防止斑马纹错位。
             startIndex -= 1; // 奇数-1变成偶数
-            if (autoRowHeight) {
-                const height = getAutoRowHeight(dataSourceCopy.value[startIndex]);
+            if (autoRowHeight || hasExpandCol.value) {
+                const height = getRowHeight!(dataSourceCopyTemp[startIndex]);
                 autoRowHeightTop -= height;
             }
         }
@@ -296,7 +322,7 @@ export function useVirtualScroll<DT extends Record<string, any>>({
         startIndex = Math.max(0, startIndex);
 
         // 溢出修正
-        endIndex = Math.min(endIndex, dataSourceCopy.value.length);
+        endIndex = Math.min(endIndex, dataLength);
 
         if (startIndex >= endIndex) {
             // 兜底，不一定会执行到这里
@@ -308,7 +334,7 @@ export function useVirtualScroll<DT extends Record<string, any>>({
         }
 
         let offsetTop = 0;
-        if (autoRowHeight) {
+        if (autoRowHeight || hasExpandCol.value) {
             offsetTop = autoRowHeightTop;
         } else {
             if (oldStartIndex === startIndex && oldEndIndex === endIndex) {

package/src/StkTable/utils/index.ts

@@ -1,8 +1,8 @@
 import { Order, SortConfig, SortOption, SortState, StkTableColumn } from '../types';
 
 /** 是否空值 */
-function isEmptyValue(val: any, isNumber?: boolean) {
-    let isEmpty = val === null || val === '' || val === void 0;
+export function isEmptyValue(val: any, isNumber?: boolean) {
+    let isEmpty = val === null || val === void 0;
     if (isNumber) {
         isEmpty = isEmpty || typeof val === 'boolean' || Number.isNaN(+val);
     }
@@ -182,6 +182,7 @@ export function howDeepTheHeader(arr: StkTableColumn<any>[], level = 0) {
 
 /** number width +px */
 export function transformWidthToStr(width?: string | number) {
+    if (width === void 0) return;
     const numberWidth = Number(width);
     return width + (!Number.isNaN(numberWidth) ? 'px' : '');
 }