@deot/vc 1.0.66 → 1.0.67

package/dist/index.umd.cjs

@@ -115262,7 +115262,7 @@ ${r}
 				const onSuccess = async (request) => {
 					try {
 						let response = await onResponse(request, options) || request;
-						if (response === request) {
+						if (request && response === request) {
 							const text = request.responseType ? request.responseText : request.response;
 							try {
 								response = JSON.parse(text);
@@ -115297,6 +115297,10 @@ ${r}
 					}
 					emit("file-start", vFile, $mode);
 					options = await onRequest(options, instance) || options;
+					if (typeof options.url === "undefined") {
+						onSuccess();
+						return;
+					}
 					const xhr = new XMLHttpRequest();
 					xhr.open("POST", options.url);
 					options.timeout && (xhr.timeout = options.timeout);
@@ -120374,6 +120378,7 @@ ${r}
 			});
 			expose({
 				recycleListId: getUid("recycle-list"),
+				scroller,
 				store,
 				hasPlaceholder,
 				renderer,
@@ -121206,8 +121211,6 @@ ${r}
 			scrollX: false,
 			scrollY: false,
 			bodyWidth: null,
-			leftFixedWidth: null,
-			rightFixedWidth: null,
 			tableHeight: null,
 			headerHeight: 44,
 			appendHeight: 0,
@@ -121302,22 +121305,42 @@ ${r}
 				this.states.scrollX = bodyMinWidth > bodyWidth;
 				this.states.bodyWidth = bodyMinWidth;
 			}
-			const leftFixedColumns = this.store.states.leftFixedColumns;
-			if (leftFixedColumns.length > 0) {
-				let leftFixedWidth = 0;
-				leftFixedColumns.forEach(function(column) {
-					leftFixedWidth += column.realWidth || column.width;
-				});
-				this.states.leftFixedWidth = leftFixedWidth;
-			}
-			const rightFixedColumns = this.store.states.rightFixedColumns;
-			if (rightFixedColumns.length > 0) {
-				let rightFixedWidth = 0;
-				rightFixedColumns.forEach(function(column) {
-					rightFixedWidth += column.realWidth || column.width;
-				});
-				this.states.rightFixedWidth = rightFixedWidth;
-			}
+			this.syncStickyOffsets();
+		}
+		/**
+		* 提前计算固定列的 sticky 偏移并写到列对象上（包含分组列），渲染层（header /
+		* body-row / footer）从 column.stickyLeft / column.stickyRight 直接消费即可。
+		* 非固定列上的 sticky 信息一并清除，避免列从 fixed 切换为非 fixed 时残留。
+		*/
+		syncStickyOffsets() {
+			const { leftFixedColumns = [], rightFixedColumns = [], notFixedColumns = [] } = this.store.states;
+			leftFixedColumns.reduce((offset, column, index) => {
+				column.stickyOffset = offset;
+				column.stickyStyle = {
+					position: "sticky",
+					left: `${offset}px`
+				};
+				column.stickyClass = "is-fixed-left";
+				if (index === leftFixedColumns.length - 1) column.stickyClass += " is-fixed-left-tail";
+				offset += column.realWidth || column.width || 0;
+				return offset;
+			}, 0);
+			rightFixedColumns.reduceRight((offset, column, index) => {
+				column.stickyOffset = offset;
+				column.stickyStyle = {
+					position: "sticky",
+					right: `${offset}px`
+				};
+				column.stickyClass = "is-fixed-right";
+				if (index === rightFixedColumns.length - 1) column.stickyClass += " is-fixed-right-head";
+				offset += column.realWidth || column.width || 0;
+				return offset;
+			}, 0);
+			notFixedColumns.forEach((column) => {
+				delete column.stickyOffset;
+				delete column.stickyStyle;
+				delete column.stickyClass;
+			});
 		}
 	};
 	var Store$1 = class extends BaseWatcher {
@@ -121361,16 +121384,10 @@ ${r}
 				});
 			});
 			this.states.list = data.reduce((pre, row, index) => {
-				const cache = caches.get(row) || { heightMap: {} };
 				const rows = [{
 					index,
 					data: row,
-					height: cache.height || "",
-					heightMap: {
-						left: cache.heightMap.left || "",
-						main: cache.heightMap.main || "",
-						right: cache.heightMap.right || ""
-					}
+					height: (caches.get(row) || {}).height || ""
 				}];
 				const id = primaryKey ? rows.map((rowData) => getRowValue(rowData.data, primaryKey)).join(",") : index;
 				pre.push({
@@ -121747,11 +121764,7 @@ ${r}
 				type: Number,
 				required: true
 			},
-			height: { type: [Number, String] },
-			columnsHidden: {
-				type: Array,
-				required: true
-			}
+			height: { type: [Number, String] }
 		},
 		setup(props) {
 			const table = (0, vue.inject)("vc-table");
@@ -121789,8 +121802,11 @@ ${r}
 				};
 			};
 			const getCellClass = (rowIndex, columnIndex, row, column) => {
-				const classes = [column.realAlign, column.class];
-				if (props.columnsHidden[columnIndex]) classes.push("is-hidden");
+				const classes = [
+					column.realAlign,
+					column.class,
+					column.stickyClass
+				];
 				const cellClass = table.props.cellClass;
 				if (typeof cellClass === "string") classes.push(cellClass);
 				else if (typeof cellClass === "function") classes.push(cellClass.call(null, {
@@ -121893,13 +121909,13 @@ ${r}
 						width: `${realWidth}px`,
 						height: `${props.height ? `${props.height}px` : "auto"}`
 					};
-					if (props.columnsHidden[columnIndex]) return (0, vue.createVNode)("div", {
-						"key": column.id,
-						"style": [sizeStyle]
-					}, null);
 					return (0, vue.createVNode)("div", {
 						"key": column.id,
-						"style": [getCellStyle(props.index, columnIndex, props.data, column), sizeStyle],
+						"style": [
+							getCellStyle(props.index, columnIndex, props.data, column),
+							sizeStyle,
+							column.stickyStyle
+						],
 						"class": [getCellClass(props.index, columnIndex, props.data, column), "vc-table__td"],
 						"onMouseenter": (e) => handleCellMouseEnter(e, props.data, column),
 						"onMouseleave": (e) => handleCellMouseLeave(e, props.data, column)
@@ -121919,16 +121935,10 @@ ${r}
 	});
 	var TableBodyMergeRow = /* @__PURE__ */ (0, vue.defineComponent)({
 		name: "vc-table-body-merge-row",
-		props: {
-			store: {
-				type: Object,
-				required: true
-			},
-			columnsHidden: {
-				type: Array,
-				required: true
-			}
-		},
+		props: { store: {
+			type: Object,
+			required: true
+		} },
 		setup(props) {
 			const table = (0, vue.inject)("vc-table");
 			const getValueOfRow = (row, index) => {
@@ -121942,8 +121952,7 @@ ${r}
 						"key": getValueOfRow(row, row.index),
 						"data": row.data,
 						"index": row.index,
-						"height": table.props.rowHeight || row.height,
-						"columnsHidden": props.columnsHidden
+						"height": table.props.rowHeight || row.height
 					}, null);
 				})]);
 			};
@@ -121954,40 +121963,22 @@ ${r}
 	}
 	var TableBody = /* @__PURE__ */ (0, vue.defineComponent)({
 		name: "vc-table-body",
-		props: {
-			fixed: String,
-			heightStyle: [
-				Object,
-				Array,
-				String
-			]
-		},
+		props: { heightStyle: [
+			Object,
+			Array,
+			String
+		] },
 		emits: ["scroll"],
-		setup(props, { emit, expose }) {
+		setup(props, { emit, expose, slots }) {
 			const instance = (0, vue.getCurrentInstance)();
 			const table = (0, vue.inject)("vc-table");
 			const allowRender = (0, vue.ref)(false);
 			const states = useStates({
 				data: "data",
 				list: "list",
-				columns: "columns",
-				leftFixedLeafCount: "leftFixedLeafColumnsLength",
-				rightFixedLeafCount: "rightFixedLeafColumnsLength",
-				columnsCount: (states$) => states$.columns.length,
-				leftFixedCount: (states$) => states$.leftFixedColumns.length,
-				rightFixedCount: (states$) => states$.rightFixedColumns.length,
-				hasExpandColumn: (states$) => states$.columns.some(({ type }) => type === "expand"),
-				firstDefaultColumnIndex: (states$) => states$.columns.findIndex(({ type }) => type === "default")
-			});
-			const isColumnHidden = (index) => {
-				if (props.fixed === "left") return index >= states.leftFixedLeafCount;
-				else if (props.fixed === "right") return index < states.columnsCount - states.rightFixedLeafCount;
-				else return index < states.leftFixedLeafCount || index >= states.columnsCount - states.rightFixedLeafCount;
-			};
-			const columnsHidden = (0, vue.computed)(() => {
-				return states.columns.map((_, index) => isColumnHidden(index));
-			});
-			const wrapper = (0, vue.ref)();
+				columns: "columns"
+			});
+			const target = (0, vue.ref)();
 			(0, vue.watch)(() => table.store.states.hoverRowIndex, (v, oldV) => {
 				if (!table.store.states.isComplex || IS_SERVER$3) return;
 				raf(() => {
@@ -122001,37 +121992,29 @@ ${r}
 				if (table.props.rowHeight) return;
 				changes.forEach((v) => {
 					states.list[v.index].rows.forEach((row) => {
-						if (row.heightMap[props.fixed || "main"] === v.size) return;
-						row.heightMap[props.fixed || "main"] = v.size;
-						const heights = [row.heightMap.main];
-						if (states.leftFixedCount) heights.push(row.heightMap.left);
-						if (states.rightFixedCount) heights.push(row.heightMap.right);
-						if (heights.every((i) => !!i)) row.height = Math.max(row.heightMap.left, row.heightMap.main, row.heightMap.right) || "";
+						if (row.height === v.size) return;
+						row.height = v.size || "";
 					});
 				});
 			};
-			expose({
-				wrapper,
-				getRootElement: () => instance.vnode.el
-			});
+			expose({ target });
 			const layout = table.layout;
 			const scrollerOptions = (0, vue.computed)(() => ({
 				barTo: `.${table.tableId}`,
 				native: false,
 				always: false,
-				showBar: !props.fixed,
-				stopPropagation: !props.fixed,
+				showBar: true,
+				stopPropagation: true,
+				contentClass: "vc-table__tbody",
+				contentStyle: { width: layout.states.bodyWidth ? layout.states.bodyWidth + "px" : "" },
 				trackOffsetY: [
 					layout.states.headerHeight,
 					0,
-					-layout.states.headerHeight - layout.states.footerHeight + 2,
+					-layout.states.headerHeight,
 					0
 				]
 			}));
-			const renderers = { default: ({ row }) => (0, vue.createVNode)(TableBodyMergeRow, {
-				"store": row,
-				"columnsHidden": columnsHidden.value
-			}, null) };
+			const renderers = { default: ({ row }) => (0, vue.createVNode)(TableBodyMergeRow, { "store": row }, null) };
 			let timer;
 			(0, vue.onBeforeMount)(() => {
 				if (table.props.delay) timer = setTimeout(() => allowRender.value = true, table.props.delay);
@@ -122043,20 +122026,26 @@ ${r}
 			});
 			return () => {
 				if (!allowRender.value) return;
-				return (0, vue.createVNode)("div", { "class": "vc-table__body" }, [table.props.height ? (0, vue.createVNode)(RecycleList, {
-					"ref": wrapper,
+				if (table.props.height) return (0, vue.createVNode)("div", { "class": ["vc-table__body-wrapper"] }, [(0, vue.createVNode)(RecycleList, {
+					"ref": target,
 					"data": states.list,
 					"disabled": true,
-					"class": "vc-table__tbody",
 					"scrollerOptions": scrollerOptions.value,
 					"pageSize": table.props.rows,
 					"onScroll": (e) => emit("scroll", e),
 					"onRowResize": handleMergeRowResize,
 					"style": props.heightStyle
-				}, _isSlot(renderers) ? renderers : { default: () => [renderers] }) : (0, vue.createVNode)(NormalList, {
+				}, _isSlot(renderers) ? renderers : { default: () => [renderers] }), slots.default?.()]);
+				return (0, vue.createVNode)(ScrollerWheel, (0, vue.mergeProps)({
+					"ref": target,
+					"class": "vc-table__body-wrapper"
+				}, scrollerOptions.value, {
+					"style": props.heightStyle,
+					"onScroll": (e) => emit("scroll", e)
+				}), { default: () => [(0, vue.createVNode)(NormalList, {
 					"data": states.list,
 					"onRowResize": handleMergeRowResize
-				}, _isSlot(renderers) ? renderers : { default: () => [renderers] })]);
+				}, _isSlot(renderers) ? renderers : { default: () => [renderers] }), slots.default?.()] });
 			};
 		}
 	});
@@ -122083,7 +122072,6 @@ ${r}
 	var TableHeader = /* @__PURE__ */ (0, vue.defineComponent)({
 		name: "vc-table-header",
 		props: {
-			fixed: [Boolean, String],
 			border: Boolean,
 			sort: {
 				type: Object,
@@ -122110,24 +122098,8 @@ ${r}
 			const states = useStates({
 				columns: "columns",
 				isAllSelected: "isAllSelected",
-				leftFixedLeafCount: "leftFixedLeafColumnsLength",
-				rightFixedLeafCount: "rightFixedLeafColumnsLength",
 				isGroup: "isGroup",
-				headerRows: "headerRows",
-				columnsCount: ($states) => $states.columns.length,
-				leftFixedCount: ($states) => $states.leftFixedColumns.length,
-				rightFixedCount: ($states) => $states.rightFixedColumns.length
-			});
-			const isColumnHidden = (index) => {
-				let start = 0;
-				for (let i = 0; i < index; i++) start += states.columns[i].colSpan;
-				const after = start + states.columns[index].colSpan - 1;
-				if (props.fixed === true || props.fixed === "left") return after >= states.leftFixedLeafCount;
-				else if (props.fixed === "right") return start < states.columnsCount - states.rightFixedLeafCount;
-				else return after < states.leftFixedLeafCount || start >= states.columnsCount - states.rightFixedLeafCount;
-			};
-			const columnsHidden = (0, vue.computed)(() => {
-				return states.columns.map((_, index) => isColumnHidden(index));
+				headerRows: "headerRows"
 			});
 			const getHeaderRowStyle = (rowIndex) => {
 				const { headerRowStyle } = table.props;
@@ -122162,7 +122134,6 @@ ${r}
 					column.class,
 					column.labelClass
 				];
-				if (rowIndex === 0 && columnsHidden.value[columnIndex]) classes.push("is-hidden");
 				if (!column.children) classes.push("is-leaf");
 				const { headerCellClass } = table.props;
 				if (typeof headerCellClass === "string") classes.push(headerCellClass);
@@ -122282,50 +122253,56 @@ ${r}
 				return (0, vue.createVNode)("div", { "class": "vc-table__header" }, [(0, vue.createVNode)("div", { "class": [{ "is-group": states.isGroup }, "vc-table__thead"] }, [states.headerRows.map((columns, rowIndex) => (0, vue.createVNode)("div", {
 					"style": getHeaderRowStyle(rowIndex),
 					"class": [getHeaderRowClass(rowIndex), "vc-table__tr"]
-				}, [columns.map((column, columnIndex) => (0, vue.createVNode)("div", {
-					"onMousemove": (e) => handleMouseMove(e, column),
-					"onMouseout": handleMouseOut,
-					"onMousedown": (e) => handleMouseDown(e, column),
-					"onClick": (e) => handleHeaderClick(e, column),
-					"onContextmenu": (e) => handleHeaderContextMenu(e, column),
-					"style": [getHeaderCellStyle(rowIndex, columnIndex, columns, column), { width: `${column.realWidth}px` }],
-					"class": [
-						getHeaderCellClass(rowIndex, columnIndex, columns, column),
-						column.resizable && dragLineClass.value,
-						"vc-table__th"
-					],
-					"key": column.id
-				}, [(0, vue.createVNode)("div", { "class": ["vc-table__cell", column.labelClass] }, [
-					column.renderHeader ? column.renderHeader({
-						column,
-						columnIndex,
-						store: table.store
-					}) : column.label,
-					column.tooltip ? (0, vue.createVNode)(Icon, {
-						"type": "o-info",
-						"class": "vc-table__tooltip",
-						"onMouseenter": (e) => handleCellMouseEnter(e, column)
-					}, null) : null,
-					column.sortable ? (0, vue.createVNode)(TableSort, {
-						"order": column.prop === props.sort.prop ? props.sort.order : "",
-						"onClick": (order) => handleSort(column.prop, order)
-					}, null) : null,
-					column.filters ? (0, vue.createVNode)(TableFilter, {
-						"data": column.filters,
-						"value": column.filteredValue,
-						"icon": column.filterIcon,
-						"portalClass": column.filterPopupClass,
-						"multiple": column.filterMultiple,
-						"onChange": (v) => handleFilter(column, v)
-					}, null) : null
-				])]))]))])]);
+				}, [columns.map((column, columnIndex) => {
+					return (0, vue.createVNode)("div", {
+						"onMousemove": (e) => handleMouseMove(e, column),
+						"onMouseout": handleMouseOut,
+						"onMousedown": (e) => handleMouseDown(e, column),
+						"onClick": (e) => handleHeaderClick(e, column),
+						"onContextmenu": (e) => handleHeaderContextMenu(e, column),
+						"style": [
+							getHeaderCellStyle(rowIndex, columnIndex, columns, column),
+							{ width: `${column.realWidth}px` },
+							column.stickyStyle
+						],
+						"class": [
+							getHeaderCellClass(rowIndex, columnIndex, columns, column),
+							column.resizable && dragLineClass.value,
+							column.stickyClass,
+							"vc-table__th"
+						],
+						"key": column.id
+					}, [(0, vue.createVNode)("div", { "class": ["vc-table__cell", column.labelClass] }, [
+						column.renderHeader ? column.renderHeader({
+							column,
+							columnIndex,
+							store: table.store
+						}) : column.label,
+						column.tooltip ? (0, vue.createVNode)(Icon, {
+							"type": "o-info",
+							"class": "vc-table__tooltip",
+							"onMouseenter": (e) => handleCellMouseEnter(e, column)
+						}, null) : null,
+						column.sortable ? (0, vue.createVNode)(TableSort, {
+							"order": column.prop === props.sort.prop ? props.sort.order : "",
+							"onClick": (order) => handleSort(column.prop, order)
+						}, null) : null,
+						column.filters ? (0, vue.createVNode)(TableFilter, {
+							"data": column.filters,
+							"value": column.filteredValue,
+							"icon": column.filterIcon,
+							"portalClass": column.filterPopupClass,
+							"multiple": column.filterMultiple,
+							"onChange": (v) => handleFilter(column, v)
+						}, null) : null
+					])]);
+				})]))])]);
 			};
 		}
 	});
 	var TableFooter = /* @__PURE__ */ (0, vue.defineComponent)({
 		name: "vc-table-footer",
 		props: {
-			fixed: [String, Boolean],
 			getSummary: Function,
 			sumText: String,
 			border: Boolean
@@ -122334,27 +122311,13 @@ ${r}
 			const states = useStates({
 				data: "data",
 				columns: "columns",
-				isAllSelected: "isAllSelected",
-				leftFixedLeafCount: "leftFixedLeafColumnsLength",
-				rightFixedLeafCount: "rightFixedLeafColumnsLength",
-				columnsCount: ($states) => $states.columns.length,
-				leftFixedCount: ($states) => $states.leftFixedColumns.length,
-				rightFixedCount: ($states) => $states.rightFixedColumns.length
-			});
-			const isColumnHidden = (column, index) => {
-				if (props.fixed === true || props.fixed === "left") return index >= states.leftFixedLeafCount;
-				else if (props.fixed === "right") {
-					let before = 0;
-					for (let i = 0; i < index; i++) before += states.columns[i].colspan;
-					return before < states.columnsCount - states.rightFixedLeafCount;
-				} else if (!props.fixed && column.fixed) return true;
-				else return index < states.leftFixedCount || index >= states.columnsCount - states.rightFixedCount;
-			};
-			const columnsHidden = (0, vue.computed)(() => states.columns.map(isColumnHidden));
-			const getRowClasses = (column, columnIndex) => {
+				isAllSelected: "isAllSelected"
+			});
+			const getRowClasses = (column) => {
 				const classes = [column.realAlign, column.labelClass];
 				if (column.className) classes.push(column.className);
-				if (columnsHidden.value[columnIndex]) classes.push("is-hidden");
+				if (column.fixed === true || column.fixed === "left") classes.push("is-fixed-left");
+				else if (column.fixed === "right") classes.push("is-fixed-right");
 				if (!column.children) classes.push("is-leaf");
 				return classes;
 			};
@@ -122395,14 +122358,16 @@ ${r}
 					"cellspacing": "0",
 					"cellpadding": "0",
 					"border": "0"
-				}, [(0, vue.createVNode)("div", { "class": "vc-table__tbody" }, [(0, vue.createVNode)("div", { "class": "vc-table__tr" }, [states.columns.map((column, columnIndex) => (0, vue.createVNode)("div", {
-					"key": columnIndex,
-					"class": [getRowClasses(column, columnIndex), "vc-table__td"],
-					"style": [{
-						width: `${column.realWidth}px`,
-						height: `44px`
-					}]
-				}, [(0, vue.createVNode)("div", { "class": ["vc-table__cell", column.labelClass] }, [sums.value[columnIndex]])]))])])]);
+				}, [(0, vue.createVNode)("div", { "class": "vc-table__tbody" }, [(0, vue.createVNode)("div", { "class": "vc-table__tr" }, [states.columns.map((column, columnIndex) => {
+					return (0, vue.createVNode)("div", {
+						"key": columnIndex,
+						"class": [getRowClasses(column), "vc-table__td"],
+						"style": [{
+							width: `${column.realWidth}px`,
+							height: `44px`
+						}, column.stickyStyle]
+					}, [(0, vue.createVNode)("div", { "class": ["vc-table__cell", column.labelClass] }, [sums.value[columnIndex]])]);
+				})])])]);
 			};
 		}
 	});
@@ -122527,24 +122492,9 @@ ${r}
 			const tableWrapper = (0, vue.ref)(null);
 			const hiddenColumns = (0, vue.ref)(null);
 			const headerWrapper = (0, vue.ref)(null);
-			const tableHeader = (0, vue.ref)(null);
-			const scroller = (0, vue.ref)(null);
 			const body = (0, vue.ref)();
-			const emptyBlock = (0, vue.ref)(null);
 			const appendWrapper = (0, vue.ref)(null);
 			const footerWrapper = (0, vue.ref)(null);
-			const leftFixedWrapper = (0, vue.ref)(null);
-			const leftFixedHeaderWrapper = (0, vue.ref)(null);
-			const leftFixedTableHeader = (0, vue.ref)(null);
-			const leftFixedBodyWrapper = (0, vue.ref)(null);
-			const leftFixedBody = (0, vue.ref)(null);
-			const leftFixedFooterWrapper = (0, vue.ref)(null);
-			const rightFixedWrapper = (0, vue.ref)(null);
-			const rightFixedHeaderWrapper = (0, vue.ref)(null);
-			const rightFixedTableHeader = (0, vue.ref)(null);
-			const rightFixedBodyWrapper = (0, vue.ref)(null);
-			const rightFixedBody = (0, vue.ref)(null);
-			const rightFixedFooterWrapper = (0, vue.ref)(null);
 			const resizeProxy = (0, vue.ref)(null);
 			const scrollPosition = (0, vue.ref)("left");
 			const hoverState = (0, vue.ref)(null);
@@ -122565,18 +122515,19 @@ ${r}
 					"vc-table--fluid-height": props.maxHeight,
 					"vc-table--scrollable-x": layout.states.scrollX,
 					"vc-table--scrollable-y": layout.states.scrollY,
+					"vc-table--sticky-columns": true,
 					"vc-table--enable-row-hover": !store.states.isComplex,
 					"vc-table--enable-row-transition": (store.states.data || []).length !== 0 && (store.states.data || []).length < 100
 				};
 			});
+			const scroller = (0, vue.computed)(() => {
+				return body.value?.target;
+			});
 			const bodyXWrapper = (0, vue.computed)(() => {
+				if (props.height) return scroller.value.scroller.wrapper;
 				return scroller.value?.wrapper;
 			});
-			const bodyYWrapper = (0, vue.computed)(() => {
-				if (!props.height) return bodyXWrapper.value;
-				const root = body.value?.getRootElement?.();
-				return root ? root.querySelector(".vc-scroller__wrapper") : null;
-			});
+			const bodyYWrapper = (0, vue.computed)(() => bodyXWrapper.value);
 			const shouldUpdateHeight = (0, vue.computed)(() => {
 				return props.height || props.maxHeight || states.leftFixedColumns.length > 0 || states.rightFixedColumns.length > 0;
 			});
@@ -122593,18 +122544,6 @@ ${r}
 				}
 				return {};
 			});
-			const fixedHeightStyle = (0, vue.computed)(() => {
-				if (props.maxHeight) {
-					if (props.showSummary) return { bottom: 0 };
-					return { bottom: layout.states.scrollX && props.data.length ? 0 : "" };
-				} else {
-					if (props.showSummary) return { height: layout.states.tableHeight ? layout.states.tableHeight + "px" : "" };
-					return {
-						height: layout.states.viewportHeight ? layout.states.viewportHeight + "px" : "",
-						bottom: 0
-					};
-				}
-			});
 			let isUnMount = false;
 			const updateScrollY = () => {
 				if (isUnMount) return;
@@ -122637,7 +122576,7 @@ ${r}
 			const clearSelection = () => {
 				store.clearSelection();
 			};
-			const handleScollX = () => {
+			const handleScrollX = () => {
 				if (!bodyXWrapper.value) return;
 				const { scrollLeft, offsetWidth, scrollWidth } = bodyXWrapper.value;
 				if (headerWrapper.value) headerWrapper.value.scrollLeft = scrollLeft;
@@ -122645,18 +122584,6 @@ ${r}
 				if (scrollLeft >= scrollWidth - offsetWidth - 1) scrollPosition.value = "right";
 				else if (scrollLeft === 0) scrollPosition.value = "left";
 				else scrollPosition.value = "middle";
-				if (!props.height) {
-					leftFixedBody.value && (leftFixedBody.value.getRootElement().scrollTop = bodyXWrapper.value.scrollTop);
-					rightFixedBody.value && (rightFixedBody.value.getRootElement().scrollTop = bodyXWrapper.value.scrollTop);
-				}
-			};
-			const handleScollY = (e) => {
-				const v = {
-					x: e.target.scrollLeft,
-					y: e.target.scrollTop
-				};
-				rightFixedBody.value?.wrapper.scrollTo(v, true);
-				leftFixedBody.value?.wrapper.scrollTo(v, true);
 			};
 			const handleResize = () => {
 				if (!isReady.value) return;
@@ -122680,22 +122607,17 @@ ${r}
 				if (hoverState.value) hoverState.value = null;
 			};
 			const handleMousewheel = (deltaX, deltaY) => {
-				const { scrollWidth: contentW, clientWidth: wrapperW, scrollLeft: scrollX } = bodyXWrapper.value;
-				const { scrollHeight: contentH, clientHeight: wrapperH, scrollTop: scrollY } = bodyYWrapper.value;
-				if (Math.abs(deltaY) > Math.abs(deltaX) && contentH > wrapperH) if (props.height) body.value.wrapper?.scrollTo({ y: scrollY + deltaY });
-				else scroller.value.scrollTo({ y: scrollY + deltaY });
+				if (!bodyXWrapper.value) return;
+				const { scrollWidth: contentW, clientWidth: wrapperW, scrollLeft: scrollX, scrollHeight: contentH, clientHeight: wrapperH, scrollTop: scrollY } = bodyXWrapper.value;
+				if (!scroller.value) return;
+				if (Math.abs(deltaY) > Math.abs(deltaX) && contentH > wrapperH) scroller.value.scrollTo({ y: scrollY + deltaY });
 				else if (deltaX && contentW > wrapperW) scroller.value.scrollTo({ x: scrollX + deltaX });
 			};
 			let wheels = [];
 			const bindEvents = () => {
 				if (props.fit) Resize.on(instance.vnode.el, handleResize);
 				(0, vue.nextTick)(() => {
-					wheels = [
-						headerWrapper,
-						footerWrapper,
-						leftFixedWrapper,
-						rightFixedWrapper
-					].map((wrapper) => {
+					wheels = [headerWrapper, footerWrapper].map((wrapper) => {
 						if (!wrapper.value) return;
 						const wheel = new Wheel(wrapper.value, {
 							shouldWheelX: (delta) => {
@@ -122742,8 +122664,9 @@ ${r}
 			}, { immediate: true });
 			(0, vue.watch)(() => scrollPosition.value, (v) => {
 				raf(() => {
+					const el = tableWrapper.value;
+					if (!el) return;
 					const className = `is-scrolling-${layout.states.scrollX ? v : "none"}`;
-					const el = bodyXWrapper.value;
 					el && el.classList.replace(el.classList.item(el.classList.length - 1), className);
 				});
 			}, { immediate: true });
@@ -122799,7 +122722,7 @@ ${r}
 					"class": [
 						classes.value,
 						tableId,
-						"vc-table"
+						"vc-table is-scrolling-none"
 					],
 					"onMouseleave": handleMouseLeave
 				}, [
@@ -122811,42 +122734,22 @@ ${r}
 						"ref": headerWrapper,
 						"class": "vc-table__header-wrapper"
 					}, [(0, vue.createVNode)(TableHeader, {
-						"ref": tableHeader,
 						"border": props.border,
 						"resizable": props.resizable,
 						"sort": props.sort,
 						"style": bodyWidthStyle.value
 					}, null)]),
-					states.columns.length > 0 && (0, vue.createVNode)(ScrollerWheel, {
-						"ref": scroller,
-						"class": ["vc-table__body-wrapper is-scrolling-none"],
-						"barTo": `.${tableId}`,
-						"native": false,
-						"always": false,
-						"track-offset-y": [
-							layout.states.headerHeight,
-							0,
-							-layout.states.headerHeight - layout.states.footerHeight,
-							0
-						],
-						"style": [bodyHeightStyle.value],
-						"onScroll": handleScollX
-					}, { default: () => [
-						(0, vue.createVNode)(TableBody, {
-							"ref": body,
-							"style": [bodyWidthStyle.value],
-							"height-style": [bodyHeightStyle.value],
-							"onScroll": handleScollY
-						}, null),
-						props.data.length === 0 && !props.height && (0, vue.createVNode)("div", {
-							"class": "vc-table__empty-placeholder",
-							"style": [bodyWidthStyle.value]
-						}, null),
-						slots.append && (0, vue.createVNode)("div", {
-							"ref": appendWrapper,
-							"class": "vc-table__append-wrapper"
-						}, [slots.append()])
-					] }),
+					states.columns.length > 0 && (0, vue.createVNode)(TableBody, {
+						"ref": body,
+						"height-style": [bodyHeightStyle.value],
+						"onScroll": handleScrollX
+					}, { default: () => [props.data.length === 0 && (0, vue.createVNode)("div", {
+						"class": "vc-table__empty-placeholder",
+						"style": [bodyWidthStyle.value]
+					}, null), slots.append && (0, vue.createVNode)("div", {
+						"ref": appendWrapper,
+						"class": "vc-table__append-wrapper"
+					}, [slots.append()])] }),
 					props.showSummary && (0, vue.withDirectives)((0, vue.createVNode)("div", {
 						"ref": footerWrapper,
 						"class": "vc-table__footer-wrapper"
@@ -122856,88 +122759,7 @@ ${r}
 						"get-summary": props.getSummary,
 						"style": bodyWidthStyle.value
 					}, null)]), [[vue.vShow, props.data && props.data.length > 0]]),
-					states.leftFixedColumns.length > 0 && states.columns.length > 0 && (0, vue.createVNode)("div", {
-						"ref": leftFixedWrapper,
-						"style": [{ width: layout.states.leftFixedWidth ? layout.states.leftFixedWidth + "px" : "" }, fixedHeightStyle.value],
-						"class": "vc-table__fixed"
-					}, [
-						props.showHeader && (0, vue.createVNode)("div", {
-							"ref": leftFixedHeaderWrapper,
-							"class": "vc-table__fixed-header-wrapper"
-						}, [(0, vue.createVNode)(TableHeader, {
-							"ref": leftFixedTableHeader,
-							"border": props.border,
-							"resizable": props.resizable,
-							"sort": props.sort,
-							"style": bodyWidthStyle.value,
-							"fixed": "left"
-						}, null)]),
-						(0, vue.createVNode)("div", {
-							"ref": leftFixedBodyWrapper,
-							"style": [{ top: layout.states.headerHeight + "px" }],
-							"class": "vc-table__fixed-body-wrapper"
-						}, [(0, vue.createVNode)(TableBody, {
-							"ref": leftFixedBody,
-							"style": [bodyWidthStyle.value, bodyHeightStyle.value],
-							"fixed": "left"
-						}, null), slots.append && (0, vue.createVNode)("div", {
-							"style": [{ height: layout.states.appendHeight + "px" }],
-							"class": "vc-table__append-gutter"
-						}, [slots.append()])]),
-						props.showSummary && (0, vue.withDirectives)((0, vue.createVNode)("div", {
-							"ref": leftFixedFooterWrapper,
-							"class": "vc-table__fixed-footer-wrapper"
-						}, [(0, vue.createVNode)(TableFooter, {
-							"border": props.border,
-							"sum-text": props.sumText || "合计",
-							"get-summary": props.getSummary,
-							"style": bodyWidthStyle.value,
-							"fixed": "left"
-						}, null)]), [[vue.vShow, props.data && props.data.length > 0]])
-					]),
-					states.rightFixedColumns.length > 0 && (0, vue.createVNode)("div", {
-						"ref": rightFixedWrapper,
-						"style": [{ width: layout.states.rightFixedWidth ? layout.states.rightFixedWidth + "px" : "" }, fixedHeightStyle.value],
-						"class": "vc-table__fixed-right"
-					}, [
-						props.showHeader && (0, vue.createVNode)("div", {
-							"ref": rightFixedHeaderWrapper,
-							"class": "vc-table__fixed-header-wrapper"
-						}, [(0, vue.createVNode)(TableHeader, {
-							"ref": rightFixedTableHeader,
-							"border": props.border,
-							"resizable": props.resizable,
-							"sort": props.sort,
-							"style": bodyWidthStyle.value,
-							"fixed": "right"
-						}, null)]),
-						(0, vue.createVNode)("div", {
-							"ref": rightFixedBodyWrapper,
-							"style": [{ top: layout.states.headerHeight + "px" }],
-							"class": "vc-table__fixed-body-wrapper"
-						}, [(0, vue.createVNode)(TableBody, {
-							"ref": rightFixedBody,
-							"style": [bodyWidthStyle.value, bodyHeightStyle.value],
-							"fixed": "right"
-						}, null), slots.append && (0, vue.createVNode)("div", {
-							"style": [{ height: layout.states.appendHeight + "px" }],
-							"class": "vc-table__append-gutter"
-						}, [slots.append()])]),
-						props.showSummary && (0, vue.withDirectives)((0, vue.createVNode)("div", {
-							"ref": rightFixedFooterWrapper,
-							"class": "vc-table__fixed-footer-wrapper"
-						}, [(0, vue.createVNode)(TableFooter, {
-							"border": props.border,
-							"sum-text": props.sumText || "合计",
-							"get-summary": props.getSummary,
-							"style": bodyWidthStyle.value,
-							"fixed": "right"
-						}, null)]), [[vue.vShow, props.data && props.data.length > 0]])
-					]),
-					props.data.length === 0 && (0, vue.createVNode)("div", {
-						"ref": emptyBlock,
-						"class": [{ "has-height": !!props.height }, "vc-table__empty-wrapper"]
-					}, [slots.empty ? slots.empty() : (0, vue.createVNode)("span", { "class": "vc-table__empty-text" }, [props.emptyText || "暂无数据"])]),
+					props.data.length === 0 && (0, vue.createVNode)("div", { "class": [{ "has-height": !!props.height }, "vc-table__empty-wrapper"] }, [slots.empty ? slots.empty() : (0, vue.createVNode)("span", { "class": "vc-table__empty-text" }, [props.emptyText || "暂无数据"])]),
 					(0, vue.withDirectives)((0, vue.createVNode)("div", {
 						"ref": resizeProxy,
 						"class": "vc-table__column-resize-proxy"