stk-table-vue 1.0.1 → 1.0.3

package/README.md

@@ -24,6 +24,8 @@ Support Vue3 and Vue2.7
 ## Documentation
 ### [Stk Table Vue Official](https://ja-plus.github.io/stk-table-vue/)
 ### [Stk Table React Official](https://ja-plus.github.io/stk-table-react/)
+### [Stk Table Svelte Official](https://ja-plus.github.io/stk-table-svelte/)
+### [Stk Table Solid Official](https://ja-plus.github.io/stk-table-solid/)
 
 
 ## Repo: 

package/lib/{Dropdown-wEI6qpCx.js → Dropdown-gzfyZN4Y.js}

@@ -1,12 +1,12 @@
 /**
  * name: stk-table-vue
- * version: v1.0.0
+ * version: v1.0.2
  * 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-BK4VNsvG.js";
+import { t as StkTable_default } from "./StkTable-CoLDxW4i.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-BK4VNsvG.js → StkTable-CoLDxW4i.js}

@@ -1,6 +1,6 @@
 /**
  * name: stk-table-vue
- * version: v1.0.0
+ * version: v1.0.2
  * description: High performance realtime virtual table for vue3 and vue2.7
  * author: japlus
  * homepage: https://ja-plus.github.io/stk-table-vue/
@@ -1312,11 +1312,11 @@ var TagType = {
 /**
 * 窗口变化自动重置虚拟滚动
 * @param tableContainerRef
-* @param initVirtualScroll
+* @param onResize 容器尺寸变化后的重算逻辑（虚拟滚动、固定列等）
 * @param props
 * @param debounceMs
 */
-function useAutoResize(tableContainerRef, initVirtualScroll, props, debounceMs) {
+function useAutoResize(tableContainerRef, onResize, props, debounceMs) {
 	let resizeObserver = null;
 	let isObserved = false;
 	watch(() => props.virtual, (v) => {
@@ -1361,7 +1361,7 @@ function useAutoResize(tableContainerRef, initVirtualScroll, props, debounceMs)
 		if (debounceTime) window.clearTimeout(debounceTime);
 		debounceTime = window.setTimeout(() => {
 			if (props.autoResize) {
-				initVirtualScroll();
+				onResize();
 				if (typeof props.autoResize === "function") props.autoResize();
 			}
 			debounceTime = 0;
@@ -1519,11 +1519,17 @@ function useFixedCol(props, colKeyGen, getFixedColPosition, tableHeaders, tableH
 	const fixedShadowCols = shallowRef([]);
 	/** 正在被固定的列 */
 	const fixedCols = shallowRef([]);
+	/**
+	* 需要自行绘制左边框的右固定列。
+	* 单元格的左边框由左侧相邻单元格的 border-right 提供，右固定列吸附遮挡内容后两者不再相邻，因此需要自行绘制。
+	*/
+	const fixedBorderLeftCols = shallowRef([]);
 	/** 固定列的class */
 	const fixedColClassMap = computed(() => {
 		const colMap = /* @__PURE__ */ new Map();
 		const fixedShadowColsValue = fixedShadowCols.value;
 		const fixedColsValue = fixedCols.value;
+		const fixedBorderLeftColsValue = fixedBorderLeftCols.value;
 		const colKeyFn = colKeyGen.value;
 		const fixedColShadow = props.fixedColShadow;
 		const headers = tableHeaders.value;
@@ -1540,6 +1546,7 @@ function useFixedCol(props, colKeyGen, getFixedColPosition, tableHeaders, tableH
 					classList.push("fixed-cell--" + fixed);
 				}
 				if (showShadow) classList.push("fixed-cell--shadow");
+				if (fixed === "right" && fixedBorderLeftColsValue.includes(col)) classList.push("fixed-cell--border-left");
 				colMap.set(colKeyFn(col), classList);
 			}
 		}
@@ -1576,6 +1583,13 @@ function useFixedCol(props, colKeyGen, getFixedColPosition, tableHeaders, tableH
 		for (let level = 0; level < len; level++) {
 			const row = tableHeadersForCalc.value[level];
 			/**
+			* 最右侧连续 fixed:right 列的起始下标。
+			* 这些列的固定偏移只由其右侧固定列宽度决定，不依赖中间列的声明宽度，
+			* 且 sticky/relative 在无横向溢出时偏移为0无副作用，因此无需判断滚动位置，始终固定。
+			*/
+			let rightSuffixStart = row.length;
+			while (rightSuffixStart > 0 && row[rightSuffixStart - 1].fixed === "right") rightSuffixStart--;
+			/**
 			* 左侧第n个fixed:left 计算要加上前面所有left 的列宽。
 			*/
 			let left = 0;
@@ -1589,13 +1603,16 @@ function useFixedCol(props, colKeyGen, getFixedColPosition, tableHeaders, tableH
 					leftShadowCol[level] = col;
 				}
 				left += getCalculatedColWidth(col);
-				if (isFixedRight && scrollLeft + clientWidth - left < position) {
-					fixedColsTemp.push(col);
-					if (!rightShadowCol[level]) rightShadowCol[level] = col;
+				if (isFixedRight) {
+					/** 是否需要固定。依赖列声明宽度累加，声明宽度与实际渲染宽度不一致时会失真 */
+					const needFix = scrollLeft + clientWidth - left < position;
+					if (i >= rightSuffixStart || needFix) fixedColsTemp.push(col);
+					if (needFix && !rightShadowCol[level]) rightShadowCol[level] = col;
 				}
 			}
 		}
 		if (props.fixedColShadow) fixedShadowCols.value = leftShadowCol.concat(rightShadowCol).filter(Boolean);
+		fixedBorderLeftCols.value = rightShadowCol.filter(Boolean);
 		fixedCols.value = fixedColsTemp;
 	}
 	return [
@@ -3558,33 +3575,34 @@ function useWheeling(resetDelay = 500) {
 var _hoisted_1 = ["tabindex"];
 var _hoisted_2 = { class: "stk-table-scroll-container" };
 var _hoisted_3 = { key: 0 };
-var _hoisted_4 = ["onClick"];
-var _hoisted_5 = ["onMousedown"];
-var _hoisted_6 = { class: "table-header-title" };
-var _hoisted_7 = ["onMousedown"];
-var _hoisted_8 = ["colspan"];
-var _hoisted_9 = ["title"];
-var _hoisted_10 = { key: 0 };
-var _hoisted_11 = ["colspan"];
+var _hoisted_4 = { key: 1 };
+var _hoisted_5 = ["onClick"];
+var _hoisted_6 = ["onMousedown"];
+var _hoisted_7 = { class: "table-header-title" };
+var _hoisted_8 = ["onMousedown"];
+var _hoisted_9 = ["colspan"];
+var _hoisted_10 = ["title"];
+var _hoisted_11 = { key: 0 };
 var _hoisted_12 = ["colspan"];
-var _hoisted_13 = {
+var _hoisted_13 = ["colspan"];
+var _hoisted_14 = {
 	class: "table-cell-wrapper",
 	tabindex: "-1"
 };
-var _hoisted_14 = {
+var _hoisted_15 = {
 	key: 0,
 	class: "vt-x-left"
 };
-var _hoisted_15 = ["colspan"];
-var _hoisted_16 = ["title"];
-var _hoisted_17 = {
+var _hoisted_16 = ["colspan"];
+var _hoisted_17 = ["title"];
+var _hoisted_18 = {
 	key: 2,
 	class: "table-cell-wrapper",
 	tabindex: "-1"
 };
-var _hoisted_18 = ["title"];
-var _hoisted_19 = { key: 2 };
-var _hoisted_20 = {
+var _hoisted_19 = ["title"];
+var _hoisted_20 = { key: 2 };
+var _hoisted_21 = {
 	key: 1,
 	class: "vt-x-right"
 };
@@ -3897,7 +3915,6 @@ var StkTable_default = /* @__PURE__ */ defineComponent({
 		const getFixedColPosition = useGetFixedColPosition(tableHeadersForCalc, colKeyGen);
 		const getFixedStyle = useFixedStyle(props, isRelativeMode, getFixedColPosition, virtualScroll, virtualScrollX, virtualX_on, virtualX_offsetRight);
 		const [highlightSteps, setHighlightDimRow, setHighlightDimCell] = useHighlight(props, stkTableId, tableContainerRef);
-		if (props.autoResize) useAutoResize(tableContainerRef, initVirtualScroll, props, 200);
 		function getRowIndex(row) {
 			const targetKey = rowKeyGen(row);
 			return dataSourceCopy.value.findIndex((item) => rowKeyGen(item) === targetKey);
@@ -3911,6 +3928,10 @@ var StkTable_default = /* @__PURE__ */ defineComponent({
 		useKeyboardArrowScroll(tableContainerRef, props, scrollTo, virtualScroll, virtualScrollX, tableHeaders, virtual_on, areaSelectionConfig);
 		/** 固定列处理 */
 		const [fixedCols, fixedColClassMap, updateFixedShadow] = useFixedCol(props, colKeyGen, getFixedColPosition, tableHeaders, tableHeadersForCalc, tableContainerRef);
+		if (props.autoResize) useAutoResize(tableContainerRef, () => {
+			initVirtualScroll();
+			updateFixedShadow();
+		}, props, 200);
 		const [colResizeOn, isColResizing, onThResizeMouseDown] = useColResize(props, emits, tableContainerRef, tableHeaderLast, colResizeIndicatorRef, colKeyGen, fixedCols, clearColWidthCache);
 		const [toggleExpandRow, setRowExpand] = useRowExpand(emits, dataSourceCopy, rowKeyGen, onDataSourceChange);
 		const [toggleTreeNode, setTreeExpand, flatTreeData] = useTree(props, dataSourceCopy, rowKeyGen, emits, onDataSourceChange);
@@ -4055,6 +4076,15 @@ var StkTable_default = /* @__PURE__ */ defineComponent({
 				[TagType.TF]: tfMap
 			};
 		});
+		/**
+		* fixed 模式下 colgroup 中单个 col 的样式。
+		* 仅取叶子列的 width（与 cellStyleMap 中 --cw 保持一致）；未设置 width 的列不声明宽度，
+		* 由 table-layout:fixed 将剩余空间平分，符合“一列固定、其余列平分”的预期。
+		*/
+		function getColGroupColStyle(col) {
+			const width = transformWidthToStr(col.width);
+			return width ? `width:${width}` : null;
+		}
 		function getAbsoluteRowIndex(rowIndex) {
 			return rowIndex + virtualScroll.value.startIndex;
 		}
@@ -4672,7 +4702,13 @@ var StkTable_default = /* @__PURE__ */ defineComponent({
 					onContextmenu: onRowMenu,
 					onMouseover: onTrMouseOver
 				}, [
-					!__props.headless ? (openBlock(), createElementBlock("thead", _hoisted_3, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(virtualX_on) ? unref(virtualX_tableHeaders) : unref(tableHeaders), (row, rowIndex) => {
+					props.fixedMode && !unref(virtualX_on) ? (openBlock(), createElementBlock("colgroup", _hoisted_3, [(openBlock(true), createElementBlock(Fragment, null, renderList(tableHeaderLast.value, (col) => {
+						return openBlock(), createElementBlock("col", {
+							key: colKeyGen.value(col),
+							style: normalizeStyle(getColGroupColStyle(col))
+						}, null, 4);
+					}), 128))])) : createCommentVNode("", true),
+					!__props.headless ? (openBlock(), createElementBlock("thead", _hoisted_4, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(virtualX_on) ? unref(virtualX_tableHeaders) : unref(tableHeaders), (row, rowIndex) => {
 						return openBlock(), createElementBlock("tr", {
 							key: rowIndex,
 							onContextmenu: _cache[3] || (_cache[3] = ($event) => onHeaderMenu($event))
@@ -4693,7 +4729,7 @@ var StkTable_default = /* @__PURE__ */ defineComponent({
 										key: 0,
 										class: "table-header-resizer left",
 										onMousedown: ($event) => unref(onThResizeMouseDown)($event, col, true)
-									}, null, 40, _hoisted_5)) : createCommentVNode("", true),
+									}, null, 40, _hoisted_6)) : createCommentVNode("", true),
 									createElementVNode("div", {
 										class: "table-header-cell-wrapper",
 										style: normalizeStyle(col.__R_SP__ ? `--row-span:${col.__R_SP__}` : null)
@@ -4709,7 +4745,7 @@ var StkTable_default = /* @__PURE__ */ defineComponent({
 									])) : renderSlot(_ctx.$slots, "tableHeader", {
 										key: 1,
 										col
-									}, () => [createElementVNode("span", _hoisted_6, toDisplayString(col.title), 1)]), col.sorter ? (openBlock(), createBlock(SortIcon_default, {
+									}, () => [createElementVNode("span", _hoisted_7, toDisplayString(col.title), 1)]), col.sorter ? (openBlock(), createBlock(SortIcon_default, {
 										key: 2,
 										class: "table-header-sorter"
 									})) : createCommentVNode("", true)], 4),
@@ -4717,8 +4753,8 @@ var StkTable_default = /* @__PURE__ */ defineComponent({
 										key: 1,
 										class: "table-header-resizer right",
 										onMousedown: ($event) => unref(onThResizeMouseDown)($event, col)
-									}, null, 40, _hoisted_7)) : createCommentVNode("", true)
-								], 16, _hoisted_4);
+									}, null, 40, _hoisted_8)) : createCommentVNode("", true)
+								], 16, _hoisted_5);
 							}), 128)),
 							unref(virtualX_on) ? (openBlock(), createElementBlock("th", {
 								key: 1,
@@ -4728,7 +4764,7 @@ var StkTable_default = /* @__PURE__ */ defineComponent({
 						], 32);
 					}), 128))])) : createCommentVNode("", true),
 					__props.footerData && __props.footerData.length > 0 ? (openBlock(), createBlock(resolveDynamicComponent(footerTagName.value), {
-						key: 1,
+						key: 2,
 						class: "stk-footer",
 						style: normalizeStyle(isFooterTop.value ? `top:${unref(tableHeaderHeight)}px` : "")
 					}, {
@@ -4744,7 +4780,7 @@ var StkTable_default = /* @__PURE__ */ defineComponent({
 										key: 0,
 										class: "vt-x-spacer",
 										colspan: col.__VT_C_SP__
-									}, null, 8, _hoisted_8)) : (openBlock(), createElementBlock("td", mergeProps({
+									}, null, 8, _hoisted_9)) : (openBlock(), createElementBlock("td", mergeProps({
 										key: 1,
 										ref_for: true
 									}, getTFProps(col)), [col.customFooterCell ? (openBlock(), createBlock(resolveDynamicComponent(col.customFooterCell), {
@@ -4764,7 +4800,7 @@ var StkTable_default = /* @__PURE__ */ defineComponent({
 										class: "table-cell-wrapper",
 										tabindex: "-1",
 										title: footRow[col.dataIndex] || ""
-									}, [footRow[col.dataIndex] != null ? (openBlock(), createElementBlock("span", _hoisted_10, toDisplayString(footRow[col.dataIndex]), 1)) : createCommentVNode("", true)], 8, _hoisted_9)], 16))], 64);
+									}, [footRow[col.dataIndex] != null ? (openBlock(), createElementBlock("span", _hoisted_11, toDisplayString(footRow[col.dataIndex]), 1)) : createCommentVNode("", true)], 8, _hoisted_10)], 16))], 64);
 								}), 128)),
 								unref(virtualX_on) ? (openBlock(), createElementBlock("td", {
 									key: 1,
@@ -4799,7 +4835,7 @@ var StkTable_default = /* @__PURE__ */ defineComponent({
 									key: 0,
 									class: "vt-x-spacer",
 									colspan: col.__VT_C_SP__
-								}, null, 8, _hoisted_11)) : (openBlock(), createElementBlock("td", {
+								}, null, 8, _hoisted_12)) : (openBlock(), createElementBlock("td", {
 									key: 1,
 									style: normalizeStyle(cellStyleMap.value[unref(TagType).TD].get(colKeyGen.value(col)))
 								}, null, 4))], 64);
@@ -4819,17 +4855,17 @@ var StkTable_default = /* @__PURE__ */ defineComponent({
 							}, { ref_for: true }, getTRProps(row, rowIndex)), [row && row.__EXP_R__ ? (openBlock(), createElementBlock("td", {
 								key: 0,
 								colspan: unref(expandRowColspan)
-							}, [createElementVNode("div", _hoisted_13, [renderSlot(_ctx.$slots, "expand", {
+							}, [createElementVNode("div", _hoisted_14, [renderSlot(_ctx.$slots, "expand", {
 								row: row.__EXP_R__,
 								col: row.__EXP_C__
-							}, () => [createTextVNode(toDisplayString(row.__EXP_R__ && row.__EXP_C__ && row.__EXP_R__[row.__EXP_C__.dataIndex] || ""), 1)])])], 8, _hoisted_12)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-								unref(virtualX_on) ? (openBlock(), createElementBlock("td", _hoisted_14)) : createCommentVNode("", true),
+							}, () => [createTextVNode(toDisplayString(row.__EXP_R__ && row.__EXP_C__ && row.__EXP_R__[row.__EXP_C__.dataIndex] || ""), 1)])])], 8, _hoisted_13)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+								unref(virtualX_on) ? (openBlock(), createElementBlock("td", _hoisted_15)) : createCommentVNode("", true),
 								(openBlock(true), createElementBlock(Fragment, null, renderList(unref(virtualX_columnPart), (col, _colIdx) => {
 									return openBlock(), createElementBlock(Fragment, { key: col.__VT_C_SP__ ? `spacer-${_colIdx}` : colKeyGen.value(col) }, [col.__VT_C_SP__ ? (openBlock(), createElementBlock("td", {
 										key: 0,
 										class: "vt-x-spacer",
 										colspan: col.__VT_C_SP__
-									}, null, 8, _hoisted_15)) : !shouldHideCell(row, col) ? (openBlock(), createElementBlock("td", mergeProps({
+									}, null, 8, _hoisted_16)) : !shouldHideCell(row, col) ? (openBlock(), createElementBlock("td", mergeProps({
 										key: 1,
 										ref_for: true
 									}, getTDProps(row, col, rowIndex, col.__LF_S__ ?? 0)), [col.customCell ? (openBlock(), createBlock(resolveDynamicComponent(col.customCell), {
@@ -4860,7 +4896,7 @@ var StkTable_default = /* @__PURE__ */ defineComponent({
 										class: "table-cell-wrapper",
 										tabindex: "-1",
 										title: row[col.dataIndex] || ""
-									}, toDisplayString((row && row[col.dataIndex]) != null ? row && row[col.dataIndex] : getEmptyCellText.value(col, row)), 9, _hoisted_16)) : col.type === "seq" ? (openBlock(), createElementBlock("div", _hoisted_17, toDisplayString((props.seqConfig.startIndex || 0) + getAbsoluteRowIndex(rowIndex) + 1), 1)) : col.type === "tree-node" ? (openBlock(), createBlock(TreeNodeCell_default, {
+									}, toDisplayString((row && row[col.dataIndex]) != null ? row && row[col.dataIndex] : getEmptyCellText.value(col, row)), 9, _hoisted_17)) : col.type === "seq" ? (openBlock(), createElementBlock("div", _hoisted_18, toDisplayString((props.seqConfig.startIndex || 0) + getAbsoluteRowIndex(rowIndex) + 1), 1)) : col.type === "tree-node" ? (openBlock(), createBlock(TreeNodeCell_default, {
 										key: 3,
 										class: "table-cell-wrapper",
 										tabindex: "-1",
@@ -4874,9 +4910,9 @@ var StkTable_default = /* @__PURE__ */ defineComponent({
 									}, [col.type === "dragRow" ? (openBlock(), createBlock(DragHandle_default, {
 										key: 0,
 										onDragstart: ($event) => unref(onTrDragStart)($event, getAbsoluteRowIndex(rowIndex))
-									}, null, 8, ["onDragstart"])) : col.type === "expand" ? (openBlock(), createBlock(TriangleIcon_default, { key: 1 })) : createCommentVNode("", true), row[col.dataIndex] != null ? (openBlock(), createElementBlock("span", _hoisted_19, toDisplayString(row[col.dataIndex]), 1)) : createCommentVNode("", true)], 8, _hoisted_18))], 16)) : createCommentVNode("", true)], 64);
+									}, null, 8, ["onDragstart"])) : col.type === "expand" ? (openBlock(), createBlock(TriangleIcon_default, { key: 1 })) : createCommentVNode("", true), row[col.dataIndex] != null ? (openBlock(), createElementBlock("span", _hoisted_20, toDisplayString(row[col.dataIndex]), 1)) : createCommentVNode("", true)], 8, _hoisted_19))], 16)) : createCommentVNode("", true)], 64);
 								}), 128)),
-								unref(virtualX_on) ? (openBlock(), createElementBlock("td", _hoisted_20)) : createCommentVNode("", true)
+								unref(virtualX_on) ? (openBlock(), createElementBlock("td", _hoisted_21)) : createCommentVNode("", true)
 							], 64))], 16);
 						}), 128)),
 						!isExperimentalScrollY.value ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [unref(virtual_on) && !unref(isSRBRActive) ? (openBlock(), createElementBlock("tr", {

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

@@ -3,8 +3,8 @@ import { Ref } from 'vue';
 /**
  * 窗口变化自动重置虚拟滚动
  * @param tableContainerRef
- * @param initVirtualScroll
+ * @param onResize 容器尺寸变化后的重算逻辑（虚拟滚动、固定列等）
  * @param props
  * @param debounceMs
  */
-export declare function useAutoResize(tableContainerRef: Ref<HTMLElement | undefined>, initVirtualScroll: () => void, props: any, debounceMs: number): void;
+export declare function useAutoResize(tableContainerRef: Ref<HTMLElement | undefined>, onResize: () => void, props: any, debounceMs: number): void;

package/lib/stk-table-vue.js

@@ -1,12 +1,12 @@
 /**
  * name: stk-table-vue
- * version: v1.0.0
+ * version: v1.0.2
  * 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-BK4VNsvG.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-CoLDxW4i.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-wEI6qpCx.js").then((module) => module.default)).mount(div);
+		DropdownIns = createApp(await import("./Dropdown-gzfyZN4Y.js").then((module) => module.default)).mount(div);
 	}
 	return DropdownIns;
 }

package/lib/style.css

@@ -1,6 +1,6 @@
 /**
  * name: stk-table-vue
- * version: v1.0.0
+ * version: v1.0.2
  * description: High performance realtime virtual table for vue3 and vue2.7
  * author: japlus
  * homepage: https://ja-plus.github.io/stk-table-vue/
@@ -291,6 +291,13 @@
 .stk-table.bordered thead tr:first-child th{
   background-image:var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
 }
+.stk-table.bordered th.fixed-cell--border-left,
+.stk-table.bordered td.fixed-cell--border-left{
+  background-image:var(--bg-border-left), var(--bg-border-right), var(--bg-border-bottom);
+}
+.stk-table.bordered thead tr:first-child th.fixed-cell--border-left{
+  background-image:var(--bg-border-left), var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
+}
 .stk-table.bordered-h{
   border-left:none;
   --bg-border-right:linear-gradient(transparent, transparent);
@@ -305,6 +312,7 @@
 }
 .stk-table.bordered-body-h tbody{
   --bg-border-right:linear-gradient(transparent, transparent);
+  --bg-border-left:linear-gradient(transparent, transparent);
 }
 .stk-table.stripe:not(.vt-on) .stk-tbody-main tr:nth-child(even){
   background-color:var(--stripe-bgc);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stk-table-vue",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "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

@@ -61,6 +61,11 @@
                 @contextmenu="onRowMenu"
                 @mouseover="onTrMouseOver"
             >
+                <!-- table-layout:fixed 下浏览器仅依据首行/colgroup 决定列宽，多级表头时子列宽度位于非首行会被忽略。
+                     故固定模式下通过 colgroup 显式声明每个叶子列宽度，保证子列 width 生效。 -->
+                <colgroup v-if="props.fixedMode && !virtualX_on">
+                    <col v-for="col in tableHeaderLast" :key="colKeyGen(col)" :style="getColGroupColStyle(col)" />
+                </colgroup>
                 <thead v-if="!headless">
                     <tr
                         v-for="(row, rowIndex) in virtualX_on ? virtualX_tableHeaders : tableHeaders"
@@ -911,10 +916,6 @@ const getFixedStyle = useFixedStyle<DT>(props, isRelativeMode, getFixedColPositi
 
 const [highlightSteps, setHighlightDimRow, setHighlightDimCell] = useHighlight(props, stkTableId, tableContainerRef);
 
-if (props.autoResize) {
-    useAutoResize(tableContainerRef, initVirtualScroll, props, 200);
-}
-
 function getRowIndex(row: DT): number {
     const targetKey = rowKeyGen(row);
     return dataSourceCopy.value.findIndex(item => rowKeyGen(item) === targetKey);
@@ -963,6 +964,19 @@ const [fixedCols, fixedColClassMap, updateFixedShadow] = useFixedCol(
     tableContainerRef,
 );
 
+if (props.autoResize) {
+    useAutoResize(
+        tableContainerRef,
+        () => {
+            initVirtualScroll();
+            // 容器宽度变化后，需重新计算固定列状态
+            updateFixedShadow();
+        },
+        props,
+        200,
+    );
+}
+
 const [colResizeOn, isColResizing, onThResizeMouseDown] = useColResize(
     props,
     emits,
@@ -1190,6 +1204,16 @@ const cellStyleMap = computed(() => {
     };
 });
 
+/**
+ * fixed 模式下 colgroup 中单个 col 的样式。
+ * 仅取叶子列的 width（与 cellStyleMap 中 --cw 保持一致）；未设置 width 的列不声明宽度，
+ * 由 table-layout:fixed 将剩余空间平分，符合“一列固定、其余列平分”的预期。
+ */
+function getColGroupColStyle(col: PrivateStkTableColumn<DT>) {
+    const width = transformWidthToStr(col.width);
+    return width ? `width:${width}` : null;
+}
+
 function getAbsoluteRowIndex(rowIndex: number) {
     return rowIndex + virtualScroll.value.startIndex;
 }

package/src/StkTable/style.less

@@ -184,6 +184,19 @@
         thead tr:first-child th {
             background-image: var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
         }
+
+        /**
+        * 单元格的左边框由左侧相邻单元格的 border-right 提供。
+        * 右固定列吸附遮挡内容后，与左侧单元格不再相邻，因此需要自行绘制 border-left。
+        */
+        th.fixed-cell--border-left,
+        td.fixed-cell--border-left {
+            background-image: var(--bg-border-left), var(--bg-border-right), var(--bg-border-bottom);
+        }
+
+        thead tr:first-child th.fixed-cell--border-left {
+            background-image: var(--bg-border-left), var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
+        }
     }
 
     &.bordered-h {
@@ -206,6 +219,7 @@
     &.bordered-body-h {
         tbody {
             --bg-border-right: linear-gradient(transparent, transparent);
+            --bg-border-left: linear-gradient(transparent, transparent);
         }
     }
 

package/src/StkTable/useAutoResize.ts

@@ -3,11 +3,11 @@ import { Ref, onBeforeUnmount, onMounted, watch } from 'vue';
 /**
  * 窗口变化自动重置虚拟滚动
  * @param tableContainerRef
- * @param initVirtualScroll
+ * @param onResize 容器尺寸变化后的重算逻辑（虚拟滚动、固定列等）
  * @param props
  * @param debounceMs
  */
-export function useAutoResize(tableContainerRef: Ref<HTMLElement | undefined>, initVirtualScroll: () => void, props: any, debounceMs: number) {
+export function useAutoResize(tableContainerRef: Ref<HTMLElement | undefined>, onResize: () => void, props: any, debounceMs: number) {
     let resizeObserver: ResizeObserver | null = null;
     let isObserved = false;
     watch(
@@ -76,7 +76,7 @@ export function useAutoResize(tableContainerRef: Ref<HTMLElement | undefined>, i
         }
         debounceTime = window.setTimeout(() => {
             if (props.autoResize) {
-                initVirtualScroll();
+                onResize();
                 if (typeof props.autoResize === 'function') {
                     props.autoResize();
                 }

package/src/StkTable/useFixedCol.ts

@@ -21,11 +21,18 @@ export function useFixedCol<DT extends Record<string, any>>(
     /** 正在被固定的列 */
     const fixedCols = shallowRef<StkTableColumn<DT>[]>([]);
 
+    /**
+     * 需要自行绘制左边框的右固定列。
+     * 单元格的左边框由左侧相邻单元格的 border-right 提供，右固定列吸附遮挡内容后两者不再相邻，因此需要自行绘制。
+     */
+    const fixedBorderLeftCols = shallowRef<StkTableColumn<DT>[]>([]);
+
     /** 固定列的class */
     const fixedColClassMap = computed(() => {
         const colMap = new Map();
         const fixedShadowColsValue = fixedShadowCols.value;
         const fixedColsValue = fixedCols.value;
+        const fixedBorderLeftColsValue = fixedBorderLeftCols.value;
         const colKeyFn = colKeyGen.value;
         const fixedColShadow = props.fixedColShadow;
         const headers = tableHeaders.value;
@@ -49,6 +56,9 @@ export function useFixedCol<DT extends Record<string, any>>(
                 if (showShadow) {
                     classList.push('fixed-cell--shadow');
                 }
+                if (fixed === 'right' && fixedBorderLeftColsValue.includes(col)) {
+                    classList.push('fixed-cell--border-left');
+                }
                 colMap.set(colKeyFn(col), classList);
             }
         }
@@ -104,6 +114,15 @@ export function useFixedCol<DT extends Record<string, any>>(
         const len = tableHeadersForCalc.value.length;
         for (let level = 0; level < len; level++) {
             const row = tableHeadersForCalc.value[level];
+            /**
+             * 最右侧连续 fixed:right 列的起始下标。
+             * 这些列的固定偏移只由其右侧固定列宽度决定，不依赖中间列的声明宽度，
+             * 且 sticky/relative 在无横向溢出时偏移为0无副作用，因此无需判断滚动位置，始终固定。
+             */
+            let rightSuffixStart = row.length;
+            while (rightSuffixStart > 0 && row[rightSuffixStart - 1].fixed === 'right') {
+                rightSuffixStart--;
+            }
             /**
              * 左侧第n个fixed:left 计算要加上前面所有left 的列宽。
              */
@@ -121,10 +140,14 @@ export function useFixedCol<DT extends Record<string, any>>(
 
                 left += getCalculatedColWidth(col);
 
-                if (isFixedRight && scrollLeft + clientWidth - left < position) {
-                    fixedColsTemp.push(col);
-                    // 右固定列阴影，只要第一列
-                    if (!rightShadowCol[level]) {
+                if (isFixedRight) {
+                    /** 是否需要固定。依赖列声明宽度累加，声明宽度与实际渲染宽度不一致时会失真 */
+                    const needFix = scrollLeft + clientWidth - left < position;
+                    if (i >= rightSuffixStart || needFix) {
+                        fixedColsTemp.push(col);
+                    }
+                    // 右固定列阴影，只要第一列。阴影仍按滚动位置判断，避免未遮挡时也显示阴影
+                    if (needFix && !rightShadowCol[level]) {
                         rightShadowCol[level] = col;
                     }
                 }
@@ -135,6 +158,9 @@ export function useFixedCol<DT extends Record<string, any>>(
             fixedShadowCols.value = leftShadowCol.concat(rightShadowCol).filter(Boolean) as StkTableColumn<DT>[];
         }
 
+        // rightShadowCol 是每层最靠左的、已遮挡内容的右固定列，正是需要绘制左边框的列
+        fixedBorderLeftCols.value = rightShadowCol.filter(Boolean) as StkTableColumn<DT>[];
+
         fixedCols.value = fixedColsTemp;
     }