stk-table-vue 1.2.4 → 1.2.5

package/lib/{Dropdown-D_9cB0rD.js → Dropdown-C4c7Nmgf.js}

@@ -1,12 +1,12 @@
 /**
  * name: stk-table-vue
- * version: v1.2.4
+ * version: v1.2.5
  * description: High performance realtime virtual table for vue3 and vue2.7
  * author: japlus
  * homepage: https://ja-plus.github.io/stk-table-vue/
  * license: MIT
  */
-import { t as StkTable_default } from "./StkTable-CVcmlZi9.js";
+import { t as StkTable_default } from "./StkTable-CzktjLlV.js";
 import { createElementBlock, createElementVNode, createVNode, defineComponent, h, nextTick, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, reactive, ref, withModifiers } from "vue";
 //#region src/StkTable/custom-cells/FilterCell/Dropdown/index.vue?vue&type=script&setup=true&lang.ts
 var DROPDOWN_DEFAULT_WIDTH = 300;

package/lib/{StkTable-CVcmlZi9.js → StkTable-CzktjLlV.js}

@@ -1,6 +1,6 @@
 /**
  * name: stk-table-vue
- * version: v1.2.4
+ * version: v1.2.5
  * description: High performance realtime virtual table for vue3 and vue2.7
  * author: japlus
  * homepage: https://ja-plus.github.io/stk-table-vue/
@@ -4093,6 +4093,7 @@ function useVirtualScroll(props, tableContainerRef, trRef, dataSourceCopy, table
  /** fix： 滚动条不在顶部时，表格数据变少，导致滚动条位置有误 */
 		scrollTop = maxScrollTop;
 		assignVs(virtualScroll, {
+			rowHeight,
 			containerHeight,
 			pageSize,
 			scrollHeight
@@ -4953,7 +4954,21 @@ var StkTable_default = /* @__PURE__ */ defineComponent({
 		watch(() => props.virtual, () => {
 			nextTick(initVirtualScrollY);
 		});
-		watch(() => props.rowHeight, initVirtualScrollY);
+		/**
+		* 行高类配置变化后重算虚拟滚动几何。
+		* 合并为一个 watcher：同一 tick 内多项同时变化只重算一次。
+		* 必须无参调用 initVirtualScrollY（其首参是虚拟滚动容器高度，不能把行高值传入），
+		* 且需 nextTick 等新的 --row-height / 表头行高等样式应用到 DOM 后再测量。
+		*
+		* 监听值拼接为单个原始值（字符串）而非返回数组：getter 返回数组时每次求值都是新数组，
+		* 身份比较必然变化，父组件传入内联对象字面量（如 :expand-config="{ height: 40 }"，官方示例即如此写法）
+		* 会让本 watcher 在父组件每次重渲染时误触发；展开行/变高大表下误触发一次会连带行高树 O(n) 重建
+		* （实测 50K 行每次父重渲染多付 ~10ms）。拼接为原始值后仅在值真正变化时触发，且兼容 Vue 2.7。
+		*/
+		watch(() => {
+			var _props$expandConfig;
+			return `${props.rowHeight}|${props.headerRowHeight}|${props.footerRowHeight}|${(_props$expandConfig = props.expandConfig) === null || _props$expandConfig === void 0 ? void 0 : _props$expandConfig.height}`;
+		}, () => nextTick(initVirtualScrollY));
 		watch(() => props.virtualX, () => {
 			handleDealColumns();
 			nextTick(() => {
@@ -5168,7 +5183,7 @@ var StkTable_default = /* @__PURE__ */ defineComponent({
 			return col.title || "";
 		}
 		function getTRProps(row, index) {
-			var _props$expandConfig;
+			var _props$expandConfig2;
 			const rowIndex = getAbsoluteRowIndex(index);
 			const rowKey = rowKeyGen(row);
 			const classList = [
@@ -5185,9 +5200,9 @@ var StkTable_default = /* @__PURE__ */ defineComponent({
 				class: classList.filter(Boolean).join(" "),
 				style: null
 			};
-			if ((row === null || row === void 0 ? void 0 : row.__EXP_R__) && props.virtual && ((_props$expandConfig = props.expandConfig) === null || _props$expandConfig === void 0 ? void 0 : _props$expandConfig.height)) {
-				var _props$expandConfig2;
-				result.style = `--row-height: ${(_props$expandConfig2 = props.expandConfig) === null || _props$expandConfig2 === void 0 ? void 0 : _props$expandConfig2.height}px`;
+			if ((row === null || row === void 0 ? void 0 : row.__EXP_R__) && props.virtual && ((_props$expandConfig2 = props.expandConfig) === null || _props$expandConfig2 === void 0 ? void 0 : _props$expandConfig2.height)) {
+				var _props$expandConfig3;
+				result.style = `--row-height: ${(_props$expandConfig3 = props.expandConfig) === null || _props$expandConfig3 === void 0 ? void 0 : _props$expandConfig3.height}px`;
 			}
 			return result;
 		}

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

@@ -20,6 +20,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<im
     /**
      * 行高
      * - `props.autoRowHeight` 为 `true` 时，将表示为期望行高，用于计算。不再影响实际行高。
+     * - 支持动态修改，修改后自动重算可视区行数与滚动高度，并与 `--row-height` 保持同步。
      */
     rowHeight?: number;
     /**
@@ -35,9 +36,15 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<im
      * @deprecated
      */
     rowCurrentRevokable?: boolean;
-    /** 表头行高。default = rowHeight */
+    /**
+     * 表头行高。default = rowHeight
+     * - 支持动态修改，表头占用的表体行数（pageSize）随之重算。
+     */
     headerRowHeight?: number | string;
-    /** 表尾行高。default = rowHeight */
+    /**
+     * 表尾行高。default = rowHeight
+     * - 支持动态修改。表尾行悬浮于滚动区底部，不计入虚拟滚动的总高度。
+     */
     footerRowHeight?: number | string;
     /** 虚拟滚动 */
     virtual?: boolean;
@@ -510,6 +517,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<im
     /**
      * 行高
      * - `props.autoRowHeight` 为 `true` 时，将表示为期望行高，用于计算。不再影响实际行高。
+     * - 支持动态修改，修改后自动重算可视区行数与滚动高度，并与 `--row-height` 保持同步。
      */
     rowHeight?: number;
     /**
@@ -525,9 +533,15 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<im
      * @deprecated
      */
     rowCurrentRevokable?: boolean;
-    /** 表头行高。default = rowHeight */
+    /**
+     * 表头行高。default = rowHeight
+     * - 支持动态修改，表头占用的表体行数（pageSize）随之重算。
+     */
     headerRowHeight?: number | string;
-    /** 表尾行高。default = rowHeight */
+    /**
+     * 表尾行高。default = rowHeight
+     * - 支持动态修改。表尾行悬浮于滚动区底部，不计入虚拟滚动的总高度。
+     */
     footerRowHeight?: number | string;
     /** 虚拟滚动 */
     virtual?: boolean;

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

@@ -297,7 +297,10 @@ export type SeqConfig = {
 };
 /** Configuration options for the expand column  */
 export type ExpandConfig = {
-    /** worked in virtual mode */
+    /**
+     * worked in virtual mode
+     * 展开行的行高，支持动态修改（修改后行高累计与虚拟滚动会一同重算）
+     */
     height?: number;
 };
 /** drag row config */

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

@@ -13,7 +13,12 @@ export type VirtualScrollStore = {
     startIndex: number;
     /** 数组结束位置 */
     endIndex: number;
-    /** 行高 */
+    /**
+     * 基准行高（px）。
+     * 由 initVirtualScrollY 随 props.rowHeight 同步（模板中的 --row-height 亦取此值，二者同源），
+     * 因此行高配置动态变化后此处不会是旧快照。
+     * 仅记录统一基准行高：变高模式（autoRowHeight）与展开行的行级高度不写入此字段。
+     */
     rowHeight: number;
     /** 表格定位上边距 */
     offsetTop: number;

package/lib/stk-table-vue.js

@@ -1,12 +1,12 @@
 /**
  * name: stk-table-vue
- * version: v1.2.4
+ * version: v1.2.5
  * description: High performance realtime virtual table for vue3 and vue2.7
  * author: japlus
  * homepage: https://ja-plus.github.io/stk-table-vue/
  * license: MIT
  */
-import { a as insertToOrderedArray, i as binarySearch, n as registerFeature, o as strCompare, r as useAreaSelection, s as tableSort, t as StkTable_default } from "./StkTable-CVcmlZi9.js";
+import { a as insertToOrderedArray, i as binarySearch, n as registerFeature, o as strCompare, r as useAreaSelection, s as tableSort, t as StkTable_default } from "./StkTable-CzktjLlV.js";
 import { Fragment, computed, createApp, createBlock, createElementBlock, createElementVNode, createTextVNode, defineComponent, getCurrentInstance, h, markRaw, nextTick, normalizeClass, openBlock, ref, renderSlot, resolveDynamicComponent, toDisplayString, watch, withModifiers } from "vue";
 //#region src/StkTable/custom-cells/FilterCell/Dropdown/index.ts
 var DropdownIns = null;
@@ -15,7 +15,7 @@ async function getDropdownIns() {
 		const div = document.createElement("div");
 		div.classList.add("stk-filter-dropdown-wrapper");
 		document.body.appendChild(div);
-		DropdownIns = createApp(await import("./Dropdown-D_9cB0rD.js").then((module) => module.default)).mount(div);
+		DropdownIns = createApp(await import("./Dropdown-C4c7Nmgf.js").then((module) => module.default)).mount(div);
 	}
 	return DropdownIns;
 }

package/lib/style.css

@@ -1,6 +1,6 @@
 /**
  * name: stk-table-vue
- * version: v1.2.4
+ * version: v1.2.5
  * description: High performance realtime virtual table for vue3 and vue2.7
  * author: japlus
  * homepage: https://ja-plus.github.io/stk-table-vue/

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stk-table-vue",
-  "version": "1.2.4",
+  "version": "1.2.5",
   "description": "High performance realtime virtual table for vue3 and vue2.7",
   "main": "./lib/stk-table-vue.js",
   "types": "./lib/src/StkTable/index.d.ts",

package/src/StkTable/StkTable.vue

@@ -430,6 +430,7 @@ const props = withDefaults(
         /**
          * 行高
          * - `props.autoRowHeight` 为 `true` 时，将表示为期望行高，用于计算。不再影响实际行高。
+         * - 支持动态修改，修改后自动重算可视区行数与滚动高度，并与 `--row-height` 保持同步。
          */
         rowHeight?: number;
         /**
@@ -445,9 +446,15 @@ const props = withDefaults(
          * @deprecated
          */
         rowCurrentRevokable?: boolean;
-        /** 表头行高。default = rowHeight */
+        /**
+         * 表头行高。default = rowHeight
+         * - 支持动态修改，表头占用的表体行数（pageSize）随之重算。
+         */
         headerRowHeight?: number | string;
-        /** 表尾行高。default = rowHeight */
+        /**
+         * 表尾行高。default = rowHeight
+         * - 支持动态修改。表尾行悬浮于滚动区底部，不计入虚拟滚动的总高度。
+         */
         footerRowHeight?: number | string;
         /** 虚拟滚动 */
         virtual?: boolean;
@@ -1214,7 +1221,21 @@ watch(
     },
 );
 
-watch(() => props.rowHeight, initVirtualScrollY);
+/**
+ * 行高类配置变化后重算虚拟滚动几何。
+ * 合并为一个 watcher：同一 tick 内多项同时变化只重算一次。
+ * 必须无参调用 initVirtualScrollY（其首参是虚拟滚动容器高度，不能把行高值传入），
+ * 且需 nextTick 等新的 --row-height / 表头行高等样式应用到 DOM 后再测量。
+ *
+ * 监听值拼接为单个原始值（字符串）而非返回数组：getter 返回数组时每次求值都是新数组，
+ * 身份比较必然变化，父组件传入内联对象字面量（如 :expand-config="{ height: 40 }"，官方示例即如此写法）
+ * 会让本 watcher 在父组件每次重渲染时误触发；展开行/变高大表下误触发一次会连带行高树 O(n) 重建
+ * （实测 50K 行每次父重渲染多付 ~10ms）。拼接为原始值后仅在值真正变化时触发，且兼容 Vue 2.7。
+ */
+watch(
+    () => `${props.rowHeight}|${props.headerRowHeight}|${props.footerRowHeight}|${props.expandConfig?.height}`,
+    () => nextTick(initVirtualScrollY),
+);
 
 watch(
     () => props.virtualX,

package/src/StkTable/features/useAreaSelection.ts

@@ -1027,6 +1027,7 @@ function useAreaSelectionImpl<DT extends Record<string, any>>(
         const isScrollRowByRow = props.scrollRowByRow;
 
         // 计算目标行的位置（基于虚拟滚动数据）
+        // vs.rowHeight 由 initVirtualScrollY 随 props.rowHeight 同步，动态改行高后此处即新值
         const rowHeight = vs.rowHeight;
         const targetRowTop = rowIndex * rowHeight;
         const targetRowBottom = targetRowTop + rowHeight;

package/src/StkTable/types/index.ts

@@ -314,7 +314,10 @@ export type SeqConfig = {
 
 /** Configuration options for the expand column  */
 export type ExpandConfig = {
-    /** worked in virtual mode */
+    /**
+     * worked in virtual mode
+     * 展开行的行高，支持动态修改（修改后行高累计与虚拟滚动会一同重算）
+     */
     height?: number;
 };
 

package/src/StkTable/useVirtualScroll.ts

@@ -17,7 +17,12 @@ export type VirtualScrollStore = {
     startIndex: number;
     /** 数组结束位置 */
     endIndex: number;
-    /** 行高 */
+    /**
+     * 基准行高（px）。
+     * 由 initVirtualScrollY 随 props.rowHeight 同步（模板中的 --row-height 亦取此值，二者同源），
+     * 因此行高配置动态变化后此处不会是旧快照。
+     * 仅记录统一基准行高：变高模式（autoRowHeight）与展开行的行级高度不写入此字段。
+     */
     rowHeight: number;
     /** 表格定位上边距 */
     offsetTop: number;
@@ -602,7 +607,9 @@ export function useVirtualScroll(
             /** fix： 滚动条不在顶部时，表格数据变少，导致滚动条位置有误 */
             scrollTop = maxScrollTop;
         }
-        assignVs(virtualScroll, { containerHeight, pageSize, scrollHeight });
+        // rowHeight 必须随 props.rowHeight 变化同步：模板的 --row-height 与 SRBR/区域选取均读此字段，
+        // 若只在 shallowRef 初始化时求值一次，改行高后会出现「计算已用新行高、渲染仍是旧行高」的不一致。
+        assignVs(virtualScroll, { rowHeight, containerHeight, pageSize, scrollHeight });
         updateVirtualScrollY(scrollTop);
     }