@deot/vc 1.0.69 → 1.0.70

package/dist/index.d.ts

@@ -1011,6 +1011,7 @@ export declare const Components: {
     };
     renderOption: Render;
     renderOptionGroup: Render;
+    renderLabel: Render;
     searchPlaceholder: {
     type: StringConstructor;
     default: string;
@@ -1097,6 +1098,7 @@ export declare const Components: {
     };
     renderOption: Render;
     renderOptionGroup: Render;
+    renderLabel: Render;
     searchPlaceholder: {
     type: StringConstructor;
     default: string;
@@ -1209,6 +1211,7 @@ export declare const Components: {
     };
     renderOption: Render;
     renderOptionGroup: Render;
+    renderLabel: Render;
     searchPlaceholder: {
     type: StringConstructor;
     default: string;
@@ -1295,6 +1298,7 @@ export declare const Components: {
     };
     renderOption: Render;
     renderOptionGroup: Render;
+    renderLabel: Render;
     searchPlaceholder: {
     type: StringConstructor;
     default: string;
@@ -9813,6 +9817,7 @@ export declare const Components: {
     Select: DefineComponent<ExtractPropTypes<    {
     renderOption: Render;
     renderOptionGroup: Render;
+    renderLabel: Render;
     data: {
     type: ArrayConstructor;
     default: () => never[];
@@ -9891,6 +9896,7 @@ export declare const Components: {
     }>, () => JSX.Element, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("clear" | "change" | "close" | "ready" | "update:modelValue" | "visible-change")[], "clear" | "change" | "close" | "ready" | "update:modelValue" | "visible-change", PublicProps, Readonly<ExtractPropTypes<    {
     renderOption: Render;
     renderOptionGroup: Render;
+    renderLabel: Render;
     data: {
     type: ArrayConstructor;
     default: () => never[];
@@ -9994,6 +10000,7 @@ export declare const Components: {
     MSelect: DefineComponent<ExtractPropTypes<    {
     renderOption: Render;
     renderOptionGroup: Render;
+    renderLabel: Render;
     data: {
     type: ArrayConstructor;
     default: () => never[];
@@ -10072,6 +10079,7 @@ export declare const Components: {
     }>, () => JSX.Element, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("clear" | "change" | "close" | "ready" | "update:modelValue" | "visible-change")[], "clear" | "change" | "close" | "ready" | "update:modelValue" | "visible-change", PublicProps, Readonly<ExtractPropTypes<    {
     renderOption: Render;
     renderOptionGroup: Render;
+    renderLabel: Render;
     data: {
     type: ArrayConstructor;
     default: () => never[];
@@ -10596,7 +10604,15 @@ export declare const Components: {
     type: BooleanConstructor;
     default: undefined;
     };
-    }>, () => JSX.Element, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("select" | "select-all" | "selection-change" | "expand-change" | "current-change" | "cell-mouse-enter" | "cell-mouse-leave" | "header-click" | "header-contextmenu" | "update:sort" | "sort-change" | "header-dragend" | "cell-click" | "cell-dblclick" | "row-click" | "row-contextmenu" | "row-dblclick")[], "select" | "select-all" | "selection-change" | "expand-change" | "current-change" | "cell-mouse-enter" | "cell-mouse-leave" | "header-click" | "header-contextmenu" | "update:sort" | "sort-change" | "header-dragend" | "cell-click" | "cell-dblclick" | "row-click" | "row-contextmenu" | "row-dblclick", PublicProps, Readonly<ExtractPropTypes<    {
+    affix: {
+    type: (ObjectConstructor | BooleanConstructor | ArrayConstructor)[];
+    default: boolean;
+    };
+    columns: {
+    type: ArrayConstructor;
+    default: () => never[];
+    };
+    }>, () => JSX.Element, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("select" | "select-all" | "selection-change" | "expand-change" | "current-change" | "update:columns" | "cell-mouse-enter" | "cell-mouse-leave" | "header-click" | "header-contextmenu" | "update:sort" | "sort-change" | "header-dragend" | "cell-click" | "cell-dblclick" | "row-click" | "row-contextmenu" | "row-dblclick")[], "select" | "select-all" | "selection-change" | "expand-change" | "current-change" | "update:columns" | "cell-mouse-enter" | "cell-mouse-leave" | "header-click" | "header-contextmenu" | "update:sort" | "sort-change" | "header-dragend" | "cell-click" | "cell-dblclick" | "row-click" | "row-contextmenu" | "row-dblclick", PublicProps, Readonly<ExtractPropTypes<    {
     data: {
     type: ArrayConstructor;
     default: () => never[];
@@ -10672,12 +10688,21 @@ export declare const Components: {
     type: BooleanConstructor;
     default: undefined;
     };
+    affix: {
+    type: (ObjectConstructor | BooleanConstructor | ArrayConstructor)[];
+    default: boolean;
+    };
+    columns: {
+    type: ArrayConstructor;
+    default: () => never[];
+    };
     }>> & Readonly<{
     onSelect?: ((...args: any[]) => any) | undefined;
     "onSelect-all"?: ((...args: any[]) => any) | undefined;
     "onSelection-change"?: ((...args: any[]) => any) | undefined;
     "onExpand-change"?: ((...args: any[]) => any) | undefined;
     "onCurrent-change"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:columns"?: ((...args: any[]) => any) | undefined;
     "onCell-mouse-enter"?: ((...args: any[]) => any) | undefined;
     "onCell-mouse-leave"?: ((...args: any[]) => any) | undefined;
     "onHeader-click"?: ((...args: any[]) => any) | undefined;
@@ -10695,6 +10720,7 @@ export declare const Components: {
     resizable: boolean;
     data: unknown[];
     border: boolean;
+    columns: unknown[];
     lazy: boolean;
     highlight: boolean;
     placeholder: string | Function;
@@ -10709,6 +10735,7 @@ export declare const Components: {
     divider: boolean;
     showSummary: boolean;
     treeMap: Record<string, any>;
+    affix: boolean | unknown[] | Record<string, any>;
     }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
     MTable: DefineComponent<ExtractPropTypes<    {
     data: {
@@ -10786,7 +10813,15 @@ export declare const Components: {
     type: BooleanConstructor;
     default: undefined;
     };
-    }>, () => JSX.Element, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("select" | "select-all" | "selection-change" | "expand-change" | "current-change" | "cell-mouse-enter" | "cell-mouse-leave" | "header-click" | "header-contextmenu" | "update:sort" | "sort-change" | "header-dragend" | "cell-click" | "cell-dblclick" | "row-click" | "row-contextmenu" | "row-dblclick")[], "select" | "select-all" | "selection-change" | "expand-change" | "current-change" | "cell-mouse-enter" | "cell-mouse-leave" | "header-click" | "header-contextmenu" | "update:sort" | "sort-change" | "header-dragend" | "cell-click" | "cell-dblclick" | "row-click" | "row-contextmenu" | "row-dblclick", PublicProps, Readonly<ExtractPropTypes<    {
+    affix: {
+    type: (ObjectConstructor | BooleanConstructor | ArrayConstructor)[];
+    default: boolean;
+    };
+    columns: {
+    type: ArrayConstructor;
+    default: () => never[];
+    };
+    }>, () => JSX.Element, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("select" | "select-all" | "selection-change" | "expand-change" | "current-change" | "update:columns" | "cell-mouse-enter" | "cell-mouse-leave" | "header-click" | "header-contextmenu" | "update:sort" | "sort-change" | "header-dragend" | "cell-click" | "cell-dblclick" | "row-click" | "row-contextmenu" | "row-dblclick")[], "select" | "select-all" | "selection-change" | "expand-change" | "current-change" | "update:columns" | "cell-mouse-enter" | "cell-mouse-leave" | "header-click" | "header-contextmenu" | "update:sort" | "sort-change" | "header-dragend" | "cell-click" | "cell-dblclick" | "row-click" | "row-contextmenu" | "row-dblclick", PublicProps, Readonly<ExtractPropTypes<    {
     data: {
     type: ArrayConstructor;
     default: () => never[];
@@ -10862,12 +10897,21 @@ export declare const Components: {
     type: BooleanConstructor;
     default: undefined;
     };
+    affix: {
+    type: (ObjectConstructor | BooleanConstructor | ArrayConstructor)[];
+    default: boolean;
+    };
+    columns: {
+    type: ArrayConstructor;
+    default: () => never[];
+    };
     }>> & Readonly<{
     onSelect?: ((...args: any[]) => any) | undefined;
     "onSelect-all"?: ((...args: any[]) => any) | undefined;
     "onSelection-change"?: ((...args: any[]) => any) | undefined;
     "onExpand-change"?: ((...args: any[]) => any) | undefined;
     "onCurrent-change"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:columns"?: ((...args: any[]) => any) | undefined;
     "onCell-mouse-enter"?: ((...args: any[]) => any) | undefined;
     "onCell-mouse-leave"?: ((...args: any[]) => any) | undefined;
     "onHeader-click"?: ((...args: any[]) => any) | undefined;
@@ -10885,6 +10929,7 @@ export declare const Components: {
     resizable: boolean;
     data: unknown[];
     border: boolean;
+    columns: unknown[];
     lazy: boolean;
     highlight: boolean;
     placeholder: string | Function;
@@ -10899,6 +10944,7 @@ export declare const Components: {
     divider: boolean;
     showSummary: boolean;
     treeMap: Record<string, any>;
+    affix: boolean | unknown[] | Record<string, any>;
     }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
     TableColumn: DefineComponent<ExtractPropTypes<    {
     type: {
@@ -13725,6 +13771,7 @@ export declare const Components: {
     renderNodeLabel: Render;
     renderOption: Render;
     renderOptionGroup: Render;
+    renderLabel: Render;
     searchPlaceholder: {
     type: StringConstructor;
     default: string;
@@ -13812,6 +13859,7 @@ export declare const Components: {
     renderNodeLabel: Render;
     renderOption: Render;
     renderOptionGroup: Render;
+    renderLabel: Render;
     searchPlaceholder: {
     type: StringConstructor;
     default: string;
@@ -13926,6 +13974,7 @@ export declare const Components: {
     renderNodeLabel: Render;
     renderOption: Render;
     renderOptionGroup: Render;
+    renderLabel: Render;
     searchPlaceholder: {
     type: StringConstructor;
     default: string;
@@ -14013,6 +14062,7 @@ export declare const Components: {
     renderNodeLabel: Render;
     renderOption: Render;
     renderOptionGroup: Render;
+    renderLabel: Render;
     searchPlaceholder: {
     type: StringConstructor;
     default: string;

package/dist/index.iife.js

@@ -111429,6 +111429,7 @@ ${p}
 		...pick(props$81, inputKeys$2),
 		renderOption: [Function],
 		renderOptionGroup: [Function],
+		renderLabel: [Function],
 		data: {
 			type: Array,
 			default: () => []
@@ -119075,10 +119076,11 @@ ${p}
 			const onLoaded = (ctx) => {
 				ctx?.destroy?.();
 			};
-			const toDataURL = async () => {
+			const toDataURL = async (type = "svg") => {
 				const loadContext = onLoad();
 				try {
 					await refresh();
+					if (type === "png") return (await snapshot.value.toPng()).src;
 					return snapshot.value.toRaw();
 				} finally {
 					onLoaded(loadContext);
@@ -119104,7 +119106,7 @@ ${p}
 						skip$ = typeof v === "undefined" ? true : !!v;
 						return v;
 					}).finally(() => done(skip$));
-					return;
+					return skip;
 				}
 				done(skip);
 			};
@@ -120723,6 +120725,7 @@ ${p}
 				default: true
 			},
 			render: [Function],
+			renderLabel: [Function],
 			row: Object
 		},
 		setup(props, { slots, expose }) {
@@ -120782,7 +120785,7 @@ ${p}
 					}, "vc-select-option"],
 					"onClick": (0, vue.withModifiers)(handleClick, ["stop"]),
 					"onMousedown": handlePrevent
-				}, [formatterLabel.value, isChecked.value && (0, vue.createVNode)(Icon, { "type": "correct" }, null)]);
+				}, [typeof props.renderLabel === "function" ? (0, vue.createVNode)(Customer, (0, vue.mergeProps)({ "render": props.renderLabel }, customOptions.value), null) : slots.label ? slots.label(customOptions.value) : formatterLabel.value, isChecked.value && (0, vue.createVNode)(Icon, { "type": "correct" }, null)]);
 			};
 		}
 	});
@@ -120795,17 +120798,21 @@ ${p}
 			},
 			label: { type: [String, Number] },
 			row: Object,
-			render: [Function]
+			render: [Function],
+			renderLabel: [Function]
 		},
 		setup(props, { slots }) {
 			const formatterLabel = (0, vue.computed)(() => {
 				return String(props.label || props.value).trim();
 			});
 			const customOptions = (0, vue.computed)(() => {
-				return { row: props.row };
+				return {
+					row: props.row,
+					store: { group: true }
+				};
 			});
 			return () => {
-				return (0, vue.createVNode)("div", { "class": "vc-select-option-group" }, [typeof props.render === "function" ? (0, vue.createVNode)(Customer, (0, vue.mergeProps)({ "render": props.render }, customOptions.value), null) : slots.title ? slots.title({ row: props.row }) : (0, vue.createVNode)("div", { "class": "vc-select-option-group__title" }, [formatterLabel.value]), (0, vue.createVNode)("div", null, [slots?.default?.()])]);
+				return (0, vue.createVNode)("div", { "class": "vc-select-option-group" }, [typeof props.render === "function" ? (0, vue.createVNode)(Customer, (0, vue.mergeProps)({ "render": props.render }, customOptions.value), null) : slots.optionGroup ? slots.optionGroup(customOptions.value) : (0, vue.createVNode)("div", { "class": "vc-select-option-group__title" }, [typeof props.renderLabel === "function" ? (0, vue.createVNode)(Customer, (0, vue.mergeProps)({ "render": props.renderLabel }, customOptions.value), null) : slots.label ? slots.label(customOptions.value) : formatterLabel.value]), (0, vue.createVNode)("div", null, [slots?.default?.()])]);
 			};
 		}
 	});
@@ -121074,7 +121081,8 @@ ${p}
 									"key": item.value,
 									"render": props.renderOptionGroup
 								}, {
-									title: slots?.optionGroup,
+									optionGroup: slots?.optionGroup,
+									label: slots?.label,
 									default: () => {
 										return item.children.map(($item) => {
 											return (0, vue.createVNode)(Option$1, {
@@ -121085,8 +121093,12 @@ ${p}
 												"label": $item.label,
 												"disabled": $item.disabled,
 												"filterable": $item.filterable,
-												"render": props.renderOption
-											}, { default: slots?.option });
+												"render": props.renderOption,
+												"renderLabel": props.renderLabel
+											}, {
+												default: slots?.option,
+												label: slots?.label
+											});
 										});
 									}
 								}) : (0, vue.createVNode)(Option$1, {
@@ -121097,8 +121109,12 @@ ${p}
 									"label": item.label,
 									"disabled": item.disabled,
 									"filterable": item.filterable,
-									"render": props.renderOption
-								}, { default: slots?.option });
+									"render": props.renderOption,
+									"renderLabel": props.renderLabel
+								}, {
+									default: slots?.option,
+									label: slots?.label
+								});
 							})]) : slots?.default?.()] })
 						]);
 					}
@@ -123926,6 +123942,10 @@ ${p}
 		expand;
 		tree;
 		layout;
+		_columnsSync = {
+			snapshot: [],
+			suppressWatch: false
+		};
 		flatData = (0, vue.computed)(() => {
 			if (this.table.props.expandSelectable) return concat(flattenData(this.states.data, {
 				parent: true,
@@ -124062,13 +124082,13 @@ ${p}
 		updateColumns() {
 			const { states } = this;
 			const _columns = states._columns || [];
-			const leftFixedColumns = _columns.filter((column) => column.fixed === true || column.fixed === "left");
-			const rightFixedColumns = _columns.filter((column) => column.fixed === "right");
-			if (leftFixedColumns.length > 0 && _columns[0] && _columns[0].type === "selection" && !_columns[0].fixed) {
-				_columns[0].fixed = true;
-				leftFixedColumns.unshift(_columns[0]);
+			if (_columns[0] && _columns[0].type === "selection" && !_columns[0].fixed) {
+				if (_columns.some((column) => column.fixed === true || column.fixed === "left")) _columns[0].fixed = true;
 			}
-			const notFixedColumns = _columns.filter((column) => !column.fixed);
+			const visibleColumns = this.cloneVisibleTree(_columns);
+			const leftFixedColumns = visibleColumns.filter((column) => column.fixed === true || column.fixed === "left");
+			const rightFixedColumns = visibleColumns.filter((column) => column.fixed === "right");
+			const notFixedColumns = visibleColumns.filter((column) => !column.fixed);
 			const originColumns = concat(leftFixedColumns, notFixedColumns, rightFixedColumns);
 			const headerRows = columnsToRowsEffect(originColumns);
 			states.leftFixedColumns = leftFixedColumns;
@@ -124076,6 +124096,100 @@ ${p}
 			states.rightFixedColumns = rightFixedColumns;
 			states.originColumns = originColumns;
 			states.headerRows = headerRows;
+			this.syncColumnsToParent();
+		}
+		/**
+		* 基于 _columns 生成"可见树"：剔除 hidden 列。
+		* 仅克隆含 children 的父节点（避免 columnsToRowsEffect 把 colspan/level/rowspan
+		* 写回原列对象造成残留）；leaf 列保持原引用，以便 Layout 写回 realWidth/stickyStyle/stickyClass。
+		* @param arr 列集合
+		* @returns 可见列集合
+		*/
+		cloneVisibleTree(arr) {
+			const walk = (list) => {
+				const out = [];
+				for (const column of list) {
+					if (column.hidden) continue;
+					if (column.children && column.children.length) {
+						const children = walk(column.children);
+						if (children.length === 0) continue;
+						out.push({
+							...column,
+							children
+						});
+					} else out.push(column);
+				}
+				return out;
+			};
+			return walk(arr);
+		}
+		/**
+		* 向外部 emit update:columns。
+		* 暴露全部收集到的 leaf 列（含被隐藏的，带 hidden 标记），不做可见性过滤。
+		* 指纹同时纳入 id 顺序与各列 hidden 状态：
+		* 	- 外部写回（顺序/hidden）后内部应用，指纹不变 -> 不重复 emit，避免回环；
+		* 	- 内部列增删导致变化 -> 指纹变化 -> emit 通知外部。
+		*/
+		syncColumnsToParent() {
+			const keys = [
+				"id",
+				"hidden",
+				"label",
+				"prop",
+				"type"
+			];
+			const columns = flattenData(this.states._columns).map((column) => pick(column, keys));
+			if (isEqualWith(columns.map((i) => pick(i, keys)), this._columnsSync.snapshot.map((i) => pick(i, keys)))) return;
+			this._columnsSync.snapshot = columns;
+			this._columnsSync.suppressWatch = true;
+			this.table.emit("update:columns", columns);
+		}
+		/**
+		* 处理外部对 v-model:columns 的写回：
+		* 	1) 按 id 把 hidden 回写到内部列对象（递归含 children，覆盖多级表头）；
+		* 	2) 按 id 对齐顺序重排顶层 _columns（缺失项按原相对顺序补在末尾，避免误丢列）。
+		* @param v 外部写回的列数组
+		*/
+		applyExternalColumns(v) {
+			if (this._columnsSync.suppressWatch) {
+				this._columnsSync.suppressWatch = false;
+				return;
+			}
+			const _columns = this.states._columns;
+			if (!Array.isArray(v) || !v.length) return;
+			const hiddenById = v.reduce((pre, e) => (e && e.id != null && pre.set(e.id, !!e.hidden), pre), /* @__PURE__ */ new Map());
+			let hiddenChanged = false;
+			const applyHidden = (list) => {
+				for (const column of list) {
+					if (hiddenById.has(column.id)) {
+						const v1 = hiddenById.get(column.id);
+						if (!!column.hidden !== v1) {
+							column.hidden = v1;
+							hiddenChanged = true;
+						}
+					}
+					if (column.children && column.children.length) applyHidden(column.children);
+				}
+			};
+			applyHidden(_columns);
+			const order = v.map((e) => e?.id).filter(Boolean);
+			const idToCol = _columns.reduce((pre, column) => (pre.set(column.id, column), pre), /* @__PURE__ */ new Map());
+			const used = /* @__PURE__ */ new Set();
+			const reordered = [];
+			for (const id of order) {
+				const column = idToCol.get(id);
+				if (column && !used.has(column)) {
+					reordered.push(column);
+					used.add(column);
+				}
+			}
+			for (const column of _columns) if (!used.has(column)) reordered.push(column);
+			const orderChanged = !(reordered.length === _columns.length && reordered.every((column, i) => column === _columns[i]));
+			orderChanged && (this.states._columns = reordered);
+			if (orderChanged || hiddenChanged) {
+				this.updateColumns();
+				this.scheduleLayout();
+			}
 		}
 		isSelected(row) {
 			const { selection = [] } = this.states;
@@ -125043,6 +125157,29 @@ ${p}
 			resizable: {
 				type: Boolean,
 				default: void 0
+			},
+			/**
+			* 流式高度下（未设置 height/max-height）表头吸顶、合计行吸底
+			* boolean 时同时作用于表头与合计行；
+			* array 为 [top, bottom]，每项可为 boolean 或 affix 配置对象；
+			* object 时同时作用于两端
+			*/
+			affix: {
+				type: [
+					Boolean,
+					Array,
+					Object
+				],
+				default: false
+			},
+			/**
+			* v-model:columns
+			* 暴露内部收集到的全部 leaf 列；外部可按 id 反向重排，
+			* 并通过每项的 hidden 字段控制该列是否渲染（不影响收集）。
+			*/
+			columns: {
+				type: Array,
+				default: () => []
 			}
 		},
 		emits: [
@@ -125062,7 +125199,8 @@ ${p}
 			"header-dragend",
 			"expand-change",
 			"sort-change",
-			"update:sort"
+			"update:sort",
+			"update:columns"
 		],
 		setup(props, { slots, expose, emit }) {
 			const instance = (0, vue.getCurrentInstance)();
@@ -125080,6 +125218,8 @@ ${p}
 			const body = (0, vue.ref)();
 			const appendWrapper = (0, vue.ref)(null);
 			const footerWrapper = (0, vue.ref)(null);
+			const affixHeader = (0, vue.ref)(null);
+			const affixFooter = (0, vue.ref)(null);
 			const resizeProxy = (0, vue.ref)(null);
 			const scrollPosition = (0, vue.ref)("left");
 			const hoverState = (0, vue.ref)(null);
@@ -125129,6 +125269,20 @@ ${p}
 				}
 				return {};
 			});
+			const affixOptions = (0, vue.computed)(() => {
+				const fluidHeight = !props.height && !props.maxHeight;
+				const source = Array.isArray(props.affix) ? props.affix : [props.affix, props.affix];
+				return ["top", "bottom"].map((placement, index) => {
+					const item = source[index];
+					const isObject = !!item && typeof item === "object";
+					return {
+						placement,
+						fixed: true,
+						...isObject ? item : {},
+						disabled: !fluidHeight || !item || isObject && item.disabled
+					};
+				});
+			});
 			let isUnMount = false;
 			const updateScrollY = () => {
 				if (isUnMount) return;
@@ -125139,11 +125293,18 @@ ${p}
 			* 对 Table 进行重新布局。
 			* 当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法
 			*/
+			const refreshAffix = () => {
+				(0, vue.nextTick)(() => {
+					affixHeader.value?.refresh?.();
+					affixFooter.value?.refresh?.();
+				});
+			};
 			const refreshLayout = () => {
 				if (isUnMount) return;
 				layout.updateColumnsWidth();
 				if (shouldUpdateHeight.value) layout.updateElsHeight();
 				scroller.value?.refresh?.();
+				refreshAffix();
 			};
 			const toggleAllSelection = () => {
 				store.toggleAllSelection();
@@ -125247,6 +125408,13 @@ ${p}
 			(0, vue.watch)(() => props.expandRowValue, (v) => {
 				if (v) store.setExpandRowValueAdapter(v);
 			}, { immediate: true });
+			(0, vue.watch)(() => props.columns, (v) => {
+				if (!Array.isArray(v) || v.length === 0) return;
+				store.applyExternalColumns(v);
+			}, {
+				deep: true,
+				flush: "post"
+			});
 			(0, vue.watch)(() => [scrollPosition.value, props.data?.length], ([v]) => {
 				raf(() => {
 					const el = tableWrapper.value;
@@ -125285,6 +125453,7 @@ ${p}
 				layout,
 				updateScrollY,
 				refreshLayout,
+				refreshAffix,
 				toggleAllSelection,
 				setCurrentRow,
 				toggleRowSelection,
@@ -125322,7 +125491,7 @@ ${p}
 						"ref": hiddenColumns,
 						"class": "vc-table__hidden"
 					}, [slots.default?.()]),
-					props.showHeader && (0, vue.createVNode)("div", {
+					props.showHeader && (0, vue.createVNode)(Affix, (0, vue.mergeProps)({ "ref": affixHeader }, affixOptions.value[0]), { default: () => [(0, vue.createVNode)("div", {
 						"ref": headerWrapper,
 						"class": "vc-table__header-wrapper"
 					}, [(0, vue.createVNode)(TableHeader, {
@@ -125330,7 +125499,7 @@ ${p}
 						"resizable": props.resizable,
 						"sort": props.sort,
 						"style": bodyWidthStyle.value
-					}, null)]),
+					}, null)])] }),
 					states.columns.length > 0 && (0, vue.createVNode)(TableBody, {
 						"ref": body,
 						"height-style": [bodyHeightStyle.value],
@@ -125342,7 +125511,7 @@ ${p}
 						"ref": appendWrapper,
 						"class": "vc-table__append-wrapper"
 					}, [slots.append()])] }),
-					props.showSummary && (0, vue.withDirectives)((0, vue.createVNode)("div", {
+					props.showSummary && (0, vue.createVNode)(Affix, (0, vue.mergeProps)({ "ref": affixFooter }, affixOptions.value[1]), { default: () => [(0, vue.withDirectives)((0, vue.createVNode)("div", {
 						"ref": footerWrapper,
 						"class": "vc-table__footer-wrapper"
 					}, [(0, vue.createVNode)(TableFooter, {
@@ -125350,7 +125519,7 @@ ${p}
 						"sum-text": props.sumText || "合计",
 						"get-summary": props.getSummary,
 						"style": bodyWidthStyle.value
-					}, null)]), [[vue.vShow, props.data && props.data.length > 0]]),
+					}, null)]), [[vue.vShow, props.data && props.data.length > 0]])] }),
 					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,

package/dist/index.umd.cjs

@@ -111431,6 +111431,7 @@ ${p}
 		...pick(props$81, inputKeys$2),
 		renderOption: [Function],
 		renderOptionGroup: [Function],
+		renderLabel: [Function],
 		data: {
 			type: Array,
 			default: () => []
@@ -119077,10 +119078,11 @@ ${p}
 			const onLoaded = (ctx) => {
 				ctx?.destroy?.();
 			};
-			const toDataURL = async () => {
+			const toDataURL = async (type = "svg") => {
 				const loadContext = onLoad();
 				try {
 					await refresh();
+					if (type === "png") return (await snapshot.value.toPng()).src;
 					return snapshot.value.toRaw();
 				} finally {
 					onLoaded(loadContext);
@@ -119106,7 +119108,7 @@ ${p}
 						skip$ = typeof v === "undefined" ? true : !!v;
 						return v;
 					}).finally(() => done(skip$));
-					return;
+					return skip;
 				}
 				done(skip);
 			};
@@ -120725,6 +120727,7 @@ ${p}
 				default: true
 			},
 			render: [Function],
+			renderLabel: [Function],
 			row: Object
 		},
 		setup(props, { slots, expose }) {
@@ -120784,7 +120787,7 @@ ${p}
 					}, "vc-select-option"],
 					"onClick": (0, vue.withModifiers)(handleClick, ["stop"]),
 					"onMousedown": handlePrevent
-				}, [formatterLabel.value, isChecked.value && (0, vue.createVNode)(Icon, { "type": "correct" }, null)]);
+				}, [typeof props.renderLabel === "function" ? (0, vue.createVNode)(Customer, (0, vue.mergeProps)({ "render": props.renderLabel }, customOptions.value), null) : slots.label ? slots.label(customOptions.value) : formatterLabel.value, isChecked.value && (0, vue.createVNode)(Icon, { "type": "correct" }, null)]);
 			};
 		}
 	});
@@ -120797,17 +120800,21 @@ ${p}
 			},
 			label: { type: [String, Number] },
 			row: Object,
-			render: [Function]
+			render: [Function],
+			renderLabel: [Function]
 		},
 		setup(props, { slots }) {
 			const formatterLabel = (0, vue.computed)(() => {
 				return String(props.label || props.value).trim();
 			});
 			const customOptions = (0, vue.computed)(() => {
-				return { row: props.row };
+				return {
+					row: props.row,
+					store: { group: true }
+				};
 			});
 			return () => {
-				return (0, vue.createVNode)("div", { "class": "vc-select-option-group" }, [typeof props.render === "function" ? (0, vue.createVNode)(Customer, (0, vue.mergeProps)({ "render": props.render }, customOptions.value), null) : slots.title ? slots.title({ row: props.row }) : (0, vue.createVNode)("div", { "class": "vc-select-option-group__title" }, [formatterLabel.value]), (0, vue.createVNode)("div", null, [slots?.default?.()])]);
+				return (0, vue.createVNode)("div", { "class": "vc-select-option-group" }, [typeof props.render === "function" ? (0, vue.createVNode)(Customer, (0, vue.mergeProps)({ "render": props.render }, customOptions.value), null) : slots.optionGroup ? slots.optionGroup(customOptions.value) : (0, vue.createVNode)("div", { "class": "vc-select-option-group__title" }, [typeof props.renderLabel === "function" ? (0, vue.createVNode)(Customer, (0, vue.mergeProps)({ "render": props.renderLabel }, customOptions.value), null) : slots.label ? slots.label(customOptions.value) : formatterLabel.value]), (0, vue.createVNode)("div", null, [slots?.default?.()])]);
 			};
 		}
 	});
@@ -121076,7 +121083,8 @@ ${p}
 									"key": item.value,
 									"render": props.renderOptionGroup
 								}, {
-									title: slots?.optionGroup,
+									optionGroup: slots?.optionGroup,
+									label: slots?.label,
 									default: () => {
 										return item.children.map(($item) => {
 											return (0, vue.createVNode)(Option$1, {
@@ -121087,8 +121095,12 @@ ${p}
 												"label": $item.label,
 												"disabled": $item.disabled,
 												"filterable": $item.filterable,
-												"render": props.renderOption
-											}, { default: slots?.option });
+												"render": props.renderOption,
+												"renderLabel": props.renderLabel
+											}, {
+												default: slots?.option,
+												label: slots?.label
+											});
 										});
 									}
 								}) : (0, vue.createVNode)(Option$1, {
@@ -121099,8 +121111,12 @@ ${p}
 									"label": item.label,
 									"disabled": item.disabled,
 									"filterable": item.filterable,
-									"render": props.renderOption
-								}, { default: slots?.option });
+									"render": props.renderOption,
+									"renderLabel": props.renderLabel
+								}, {
+									default: slots?.option,
+									label: slots?.label
+								});
 							})]) : slots?.default?.()] })
 						]);
 					}
@@ -123928,6 +123944,10 @@ ${p}
 		expand;
 		tree;
 		layout;
+		_columnsSync = {
+			snapshot: [],
+			suppressWatch: false
+		};
 		flatData = (0, vue.computed)(() => {
 			if (this.table.props.expandSelectable) return concat(flattenData(this.states.data, {
 				parent: true,
@@ -124064,13 +124084,13 @@ ${p}
 		updateColumns() {
 			const { states } = this;
 			const _columns = states._columns || [];
-			const leftFixedColumns = _columns.filter((column) => column.fixed === true || column.fixed === "left");
-			const rightFixedColumns = _columns.filter((column) => column.fixed === "right");
-			if (leftFixedColumns.length > 0 && _columns[0] && _columns[0].type === "selection" && !_columns[0].fixed) {
-				_columns[0].fixed = true;
-				leftFixedColumns.unshift(_columns[0]);
+			if (_columns[0] && _columns[0].type === "selection" && !_columns[0].fixed) {
+				if (_columns.some((column) => column.fixed === true || column.fixed === "left")) _columns[0].fixed = true;
 			}
-			const notFixedColumns = _columns.filter((column) => !column.fixed);
+			const visibleColumns = this.cloneVisibleTree(_columns);
+			const leftFixedColumns = visibleColumns.filter((column) => column.fixed === true || column.fixed === "left");
+			const rightFixedColumns = visibleColumns.filter((column) => column.fixed === "right");
+			const notFixedColumns = visibleColumns.filter((column) => !column.fixed);
 			const originColumns = concat(leftFixedColumns, notFixedColumns, rightFixedColumns);
 			const headerRows = columnsToRowsEffect(originColumns);
 			states.leftFixedColumns = leftFixedColumns;
@@ -124078,6 +124098,100 @@ ${p}
 			states.rightFixedColumns = rightFixedColumns;
 			states.originColumns = originColumns;
 			states.headerRows = headerRows;
+			this.syncColumnsToParent();
+		}
+		/**
+		* 基于 _columns 生成"可见树"：剔除 hidden 列。
+		* 仅克隆含 children 的父节点（避免 columnsToRowsEffect 把 colspan/level/rowspan
+		* 写回原列对象造成残留）；leaf 列保持原引用，以便 Layout 写回 realWidth/stickyStyle/stickyClass。
+		* @param arr 列集合
+		* @returns 可见列集合
+		*/
+		cloneVisibleTree(arr) {
+			const walk = (list) => {
+				const out = [];
+				for (const column of list) {
+					if (column.hidden) continue;
+					if (column.children && column.children.length) {
+						const children = walk(column.children);
+						if (children.length === 0) continue;
+						out.push({
+							...column,
+							children
+						});
+					} else out.push(column);
+				}
+				return out;
+			};
+			return walk(arr);
+		}
+		/**
+		* 向外部 emit update:columns。
+		* 暴露全部收集到的 leaf 列（含被隐藏的，带 hidden 标记），不做可见性过滤。
+		* 指纹同时纳入 id 顺序与各列 hidden 状态：
+		* 	- 外部写回（顺序/hidden）后内部应用，指纹不变 -> 不重复 emit，避免回环；
+		* 	- 内部列增删导致变化 -> 指纹变化 -> emit 通知外部。
+		*/
+		syncColumnsToParent() {
+			const keys = [
+				"id",
+				"hidden",
+				"label",
+				"prop",
+				"type"
+			];
+			const columns = flattenData(this.states._columns).map((column) => pick(column, keys));
+			if (isEqualWith(columns.map((i) => pick(i, keys)), this._columnsSync.snapshot.map((i) => pick(i, keys)))) return;
+			this._columnsSync.snapshot = columns;
+			this._columnsSync.suppressWatch = true;
+			this.table.emit("update:columns", columns);
+		}
+		/**
+		* 处理外部对 v-model:columns 的写回：
+		* 	1) 按 id 把 hidden 回写到内部列对象（递归含 children，覆盖多级表头）；
+		* 	2) 按 id 对齐顺序重排顶层 _columns（缺失项按原相对顺序补在末尾，避免误丢列）。
+		* @param v 外部写回的列数组
+		*/
+		applyExternalColumns(v) {
+			if (this._columnsSync.suppressWatch) {
+				this._columnsSync.suppressWatch = false;
+				return;
+			}
+			const _columns = this.states._columns;
+			if (!Array.isArray(v) || !v.length) return;
+			const hiddenById = v.reduce((pre, e) => (e && e.id != null && pre.set(e.id, !!e.hidden), pre), /* @__PURE__ */ new Map());
+			let hiddenChanged = false;
+			const applyHidden = (list) => {
+				for (const column of list) {
+					if (hiddenById.has(column.id)) {
+						const v1 = hiddenById.get(column.id);
+						if (!!column.hidden !== v1) {
+							column.hidden = v1;
+							hiddenChanged = true;
+						}
+					}
+					if (column.children && column.children.length) applyHidden(column.children);
+				}
+			};
+			applyHidden(_columns);
+			const order = v.map((e) => e?.id).filter(Boolean);
+			const idToCol = _columns.reduce((pre, column) => (pre.set(column.id, column), pre), /* @__PURE__ */ new Map());
+			const used = /* @__PURE__ */ new Set();
+			const reordered = [];
+			for (const id of order) {
+				const column = idToCol.get(id);
+				if (column && !used.has(column)) {
+					reordered.push(column);
+					used.add(column);
+				}
+			}
+			for (const column of _columns) if (!used.has(column)) reordered.push(column);
+			const orderChanged = !(reordered.length === _columns.length && reordered.every((column, i) => column === _columns[i]));
+			orderChanged && (this.states._columns = reordered);
+			if (orderChanged || hiddenChanged) {
+				this.updateColumns();
+				this.scheduleLayout();
+			}
 		}
 		isSelected(row) {
 			const { selection = [] } = this.states;
@@ -125045,6 +125159,29 @@ ${p}
 			resizable: {
 				type: Boolean,
 				default: void 0
+			},
+			/**
+			* 流式高度下（未设置 height/max-height）表头吸顶、合计行吸底
+			* boolean 时同时作用于表头与合计行；
+			* array 为 [top, bottom]，每项可为 boolean 或 affix 配置对象；
+			* object 时同时作用于两端
+			*/
+			affix: {
+				type: [
+					Boolean,
+					Array,
+					Object
+				],
+				default: false
+			},
+			/**
+			* v-model:columns
+			* 暴露内部收集到的全部 leaf 列；外部可按 id 反向重排，
+			* 并通过每项的 hidden 字段控制该列是否渲染（不影响收集）。
+			*/
+			columns: {
+				type: Array,
+				default: () => []
 			}
 		},
 		emits: [
@@ -125064,7 +125201,8 @@ ${p}
 			"header-dragend",
 			"expand-change",
 			"sort-change",
-			"update:sort"
+			"update:sort",
+			"update:columns"
 		],
 		setup(props, { slots, expose, emit }) {
 			const instance = (0, vue.getCurrentInstance)();
@@ -125082,6 +125220,8 @@ ${p}
 			const body = (0, vue.ref)();
 			const appendWrapper = (0, vue.ref)(null);
 			const footerWrapper = (0, vue.ref)(null);
+			const affixHeader = (0, vue.ref)(null);
+			const affixFooter = (0, vue.ref)(null);
 			const resizeProxy = (0, vue.ref)(null);
 			const scrollPosition = (0, vue.ref)("left");
 			const hoverState = (0, vue.ref)(null);
@@ -125131,6 +125271,20 @@ ${p}
 				}
 				return {};
 			});
+			const affixOptions = (0, vue.computed)(() => {
+				const fluidHeight = !props.height && !props.maxHeight;
+				const source = Array.isArray(props.affix) ? props.affix : [props.affix, props.affix];
+				return ["top", "bottom"].map((placement, index) => {
+					const item = source[index];
+					const isObject = !!item && typeof item === "object";
+					return {
+						placement,
+						fixed: true,
+						...isObject ? item : {},
+						disabled: !fluidHeight || !item || isObject && item.disabled
+					};
+				});
+			});
 			let isUnMount = false;
 			const updateScrollY = () => {
 				if (isUnMount) return;
@@ -125141,11 +125295,18 @@ ${p}
 			* 对 Table 进行重新布局。
 			* 当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法
 			*/
+			const refreshAffix = () => {
+				(0, vue.nextTick)(() => {
+					affixHeader.value?.refresh?.();
+					affixFooter.value?.refresh?.();
+				});
+			};
 			const refreshLayout = () => {
 				if (isUnMount) return;
 				layout.updateColumnsWidth();
 				if (shouldUpdateHeight.value) layout.updateElsHeight();
 				scroller.value?.refresh?.();
+				refreshAffix();
 			};
 			const toggleAllSelection = () => {
 				store.toggleAllSelection();
@@ -125249,6 +125410,13 @@ ${p}
 			(0, vue.watch)(() => props.expandRowValue, (v) => {
 				if (v) store.setExpandRowValueAdapter(v);
 			}, { immediate: true });
+			(0, vue.watch)(() => props.columns, (v) => {
+				if (!Array.isArray(v) || v.length === 0) return;
+				store.applyExternalColumns(v);
+			}, {
+				deep: true,
+				flush: "post"
+			});
 			(0, vue.watch)(() => [scrollPosition.value, props.data?.length], ([v]) => {
 				raf(() => {
 					const el = tableWrapper.value;
@@ -125287,6 +125455,7 @@ ${p}
 				layout,
 				updateScrollY,
 				refreshLayout,
+				refreshAffix,
 				toggleAllSelection,
 				setCurrentRow,
 				toggleRowSelection,
@@ -125324,7 +125493,7 @@ ${p}
 						"ref": hiddenColumns,
 						"class": "vc-table__hidden"
 					}, [slots.default?.()]),
-					props.showHeader && (0, vue.createVNode)("div", {
+					props.showHeader && (0, vue.createVNode)(Affix, (0, vue.mergeProps)({ "ref": affixHeader }, affixOptions.value[0]), { default: () => [(0, vue.createVNode)("div", {
 						"ref": headerWrapper,
 						"class": "vc-table__header-wrapper"
 					}, [(0, vue.createVNode)(TableHeader, {
@@ -125332,7 +125501,7 @@ ${p}
 						"resizable": props.resizable,
 						"sort": props.sort,
 						"style": bodyWidthStyle.value
-					}, null)]),
+					}, null)])] }),
 					states.columns.length > 0 && (0, vue.createVNode)(TableBody, {
 						"ref": body,
 						"height-style": [bodyHeightStyle.value],
@@ -125344,7 +125513,7 @@ ${p}
 						"ref": appendWrapper,
 						"class": "vc-table__append-wrapper"
 					}, [slots.append()])] }),
-					props.showSummary && (0, vue.withDirectives)((0, vue.createVNode)("div", {
+					props.showSummary && (0, vue.createVNode)(Affix, (0, vue.mergeProps)({ "ref": affixFooter }, affixOptions.value[1]), { default: () => [(0, vue.withDirectives)((0, vue.createVNode)("div", {
 						"ref": footerWrapper,
 						"class": "vc-table__footer-wrapper"
 					}, [(0, vue.createVNode)(TableFooter, {
@@ -125352,7 +125521,7 @@ ${p}
 						"sum-text": props.sumText || "合计",
 						"get-summary": props.getSummary,
 						"style": bodyWidthStyle.value
-					}, null)]), [[vue.vShow, props.data && props.data.length > 0]]),
+					}, null)]), [[vue.vShow, props.data && props.data.length > 0]])] }),
 					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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deot/vc",
-  "version": "1.0.69",
+  "version": "1.0.70",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -19,9 +19,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@deot/vc-components": "^1.0.69",
-    "@deot/vc-hooks": "^1.0.69",
-    "@deot/vc-shared": "^1.0.69"
+    "@deot/vc-components": "^1.0.70",
+    "@deot/vc-hooks": "^1.0.70",
+    "@deot/vc-shared": "^1.0.70"
   },
   "peerDependencies": {
     "vue": "*"