fast-element-plus 2.0.19 → 2.0.21

package/dist/components/table/src/table.mjs

@@ -6,6 +6,7 @@ import { useExpose } from "../../../utils/vue/expose.mjs";
 import { definePropType, useProps } from "../../../utils/vue/props.mjs";
 import { useRender } from "../../../utils/vue/render.mjs";
 import { makeSlots } from "../../../utils/vue/slots.mjs";
+import { tableProps } from "../../../internal/props.mjs";
 import { tableUtil } from "../utils/table.mjs";
 import { getTableDefaultSlots } from "./table.type.mjs";
 import { useTable } from "./useTable.mjs";
@@ -14,237 +15,29 @@ import tableColumnSettingDialog_default from "./tableColumnSettingDialog.mjs";
 import tablePagination_default from "./tablePagination.mjs";
 import tableSearchForm_default from "./tableSearchForm.mjs";
 import { NotData } from "@fast-element-plus/icons-vue";
-import { Fragment, computed, createTextVNode, createVNode, defineComponent, mergeProps, onActivated, onMounted, resolveDirective, shallowRef, toRef, watch, watchEffect, withDirectives } from "vue";
+import { Fragment, computed, createTextVNode, createVNode, defineComponent, mergeProps, onActivated, onBeforeUnmount, onMounted, resolveDirective, shallowRef, watch, watchEffect, withDirectives } from "vue";
 import { Eleme, More, Refresh, Search, Setting } from "@element-plus/icons-vue";
-import { ElButton, ElDatePicker, ElDropdown, ElDropdownItem, ElDropdownMenu, ElIcon, ElImageViewer, ElInput, ElPagination, ElTable, ElTableColumn, useSizeProp } from "element-plus";
+import { ElButton, ElDatePicker, ElDropdown, ElDropdownItem, ElDropdownMenu, ElIcon, ElImageViewer, ElInput, ElPagination, ElTable, ElTableColumn } from "element-plus";
 //#region src/components/table/src/table.tsx
-/** Element Plus Table 的透传 Props 定义。 */
-const tableProps = {
-	/**
-	* @description table data
-	*/
-	data: {
-		type: Array,
-		default: () => []
-	},
-	/**
-	* @description size of Table
-	*/
-	size: useSizeProp,
-	width: [String, Number],
-	/**
-	* @description table's height. By default it has an `auto` height. If its value is a number, the height is measured in pixels; if its value is a string, the value will be assigned to element's style.height, the height is affected by external styles
-	*/
-	height: [String, Number],
-	/**
-	* @description table's max-height. The legal value is a number or the height in px
-	*/
-	maxHeight: [String, Number],
-	/**
-	* @description whether width of column automatically fits its container
-	*/
-	fit: {
-		type: Boolean,
-		default: true
-	},
-	/**
-	* @description whether Table is striped
-	*/
-	stripe: Boolean,
-	/**
-	* @description whether Table has vertical border
-	*/
-	border: Boolean,
-	/**
-	* @description key of row data, used for optimizing rendering. Required if `reserve-selection` is on or display tree data. When its type is String, multi-level access is supported, e.g. `user.info.id`, but `user.info[0].id` is not supported, in which case `Function` should be used
-	*/
-	rowKey: [String, Function],
-	/**
-	* @description whether Table header is visible
-	*/
-	showHeader: {
-		type: Boolean,
-		default: true
-	},
-	/**
-	* @description whether to display a summary row
-	*/
-	showSummary: Boolean,
-	/**
-	* @description displayed text for the first column of summary row
-	*/
-	sumText: String,
-	/**
-	* @description custom summary method
-	*/
-	summaryMethod: Function,
-	/**
-	* @description function that returns custom class names for a row, or a string assigning class names for every row
-	*/
-	rowClassName: [String, Function],
-	/**
-	* @description function that returns custom style for a row, or an object assigning custom style for every row
-	*/
-	rowStyle: [Object, Function],
-	/**
-	* @description function that returns custom class names for a cell, or a string assigning class names for every cell
-	*/
-	cellClassName: [String, Function],
-	/**
-	* @description function that returns custom style for a cell, or an object assigning custom style for every cell
-	*/
-	cellStyle: [Object, Function],
-	/**
-	* @description function that returns custom class names for a row in table header, or a string assigning class names for every row in table header
-	*/
-	headerRowClassName: [String, Function],
-	/**
-	* @description function that returns custom style for a row in table header, or an object assigning custom style for every row in table header
-	*/
-	headerRowStyle: [Object, Function],
-	/**
-	* @description function that returns custom class names for a cell in table header, or a string assigning class names for every cell in table header
-	*/
-	headerCellClassName: [String, Function],
-	/**
-	* @description function that returns custom style for a cell in table header, or an object assigning custom style for every cell in table header
-	*/
-	headerCellStyle: [Object, Function],
-	/**
-	* @description whether current row is highlighted
-	*/
-	highlightCurrentRow: Boolean,
-	/**
-	* @description key of current row, a set only prop
-	*/
-	currentRowKey: [String, Number],
-	/**
-	* @description displayed text when data is empty. You can customize this area with `#empty`
-	*/
-	emptyText: String,
-	/**
-	* @description set expanded rows by this prop, prop's value is the keys of expand rows, you should set row-key before using this prop
-	*/
-	expandRowKeys: Array,
-	/** @description controls whether a row can be expanded */
-	rowExpandable: Function,
-	/**
-	* @description whether expand all rows by default, works when the table has a column type="expand" or contains tree structure data
-	*/
-	defaultExpandAll: Boolean,
-	/**
-	* @description set the default sort column and order. property `prop` is used to set default sort column, property `order` is used to set default sort order
-	*/
-	defaultSort: Object,
-	/**
-	* @description the `effect` of the overflow tooltip
-	*/
-	tooltipEffect: String,
-	/**
-	* @description the options for the overflow tooltip, [see the following tooltip component](tooltip.html#attributes)
-	*/
-	tooltipOptions: Object,
-	/**
-	* @description method that returns rowspan and colspan
-	*/
-	spanMethod: Function,
-	/**
-	* @description controls the behavior of master checkbox in multi-select tables when only some rows are selected (but not all). If true, all rows will be selected, else deselected
-	*/
-	selectOnIndeterminate: {
-		type: Boolean,
-		default: true
-	},
-	/**
-	* @description horizontal indentation of tree data
-	*/
-	indent: {
-		type: Number,
-		default: 16
-	},
-	/**
-	* @description configuration for rendering nested data
-	*/
-	treeProps: {
-		type: Object,
-		default: () => ({
-			hasChildren: "hasChildren",
-			children: "children",
-			checkStrictly: false
-		})
-	},
-	/**
-	* @description whether to lazy loading data
-	*/
-	lazy: Boolean,
-	/**
-	* @description method for loading child row data, only works when `lazy` is true
-	*/
-	load: Function,
-	style: {
-		type: Object,
-		default: () => ({})
-	},
-	className: {
-		type: String,
-		default: ""
-	},
-	/**
-	* @description sets the algorithm used to lay out table cells, rows, and columns
-	*/
-	tableLayout: {
-		type: String,
-		default: "fixed"
-	},
-	/**
-	* @description always show scrollbar
-	*/
-	scrollbarAlwaysOn: Boolean,
-	/**
-	* @description ensure main axis minimum-size doesn't follow the content
-	*/
-	flexible: Boolean,
-	/**
-	* @description whether to hide extra content and show them in a tooltip when hovering on the cell.It will affect all the table columns
-	*/
-	showOverflowTooltip: [Boolean, Object],
-	/** @description formats overflow tooltip content */
-	tooltipFormatter: Function,
-	/** @description element to which the filter panel is appended */
-	appendFilterPanelTo: String,
-	scrollbarTabindex: {
-		type: [Number, String],
-		default: void 0
-	},
-	/** @description whether the last column can be resized */
-	allowDragLastColumn: {
-		type: Boolean,
-		default: true
-	},
-	/** @description whether collapsed expanded-row content remains mounted */
-	preserveExpandedContent: Boolean,
-	/** @description whether to use native scrollbars */
-	nativeScrollbar: Boolean
-};
-/** FaTable 的运行时 Props 定义。 */
+/** FaTable 的运行时 Props 定义 */
 const faTableProps = {
 	...tableProps,
-	/** @description whether Table has vertical border */
+	/** whether Table has vertical border */
 	border: {
 		type: Boolean,
 		default: true
 	},
-	/** @description whether current row is highlighted */
+	/** whether current row is highlighted */
 	highlightCurrentRow: {
 		type: Boolean,
 		default: true
 	},
-	/** @description key of row data, used for optimizing rendering. Required if `reserve-selection` is on or display tree data. When its type is String, multi-level access is supported, e.g. `user.info.id`, but `user.info[0].id` is not supported, in which case `Function` should be used */
+	/** key of row data, used for optimizing rendering. Required if `reserve-selection` is on or display tree data. When its type is String, multi-level access is supported, e.g. `user.info.id`, but `user.info[0].id` is not supported, in which case `Function` should be used */
 	rowKey: {
 		type: [String, Function],
 		default: "id"
 	},
-	/** @description 组件封装，原生的已经失效 method that returns rowspan and colspan */
+	/** 组件封装，原生的已经失效 method that returns rowspan and colspan */
 	spanMethod: {
 		type: Function,
 		validator: () => {
@@ -252,19 +45,19 @@ const faTableProps = {
 			return false;
 		}
 	},
-	/** @description 表格Key */
+	/** 表格Key */
 	tableKey: {
 		type: String,
 		default: () => randomString(8)
 	},
-	/** @description 表格数据 */
+	/** 表格数据 */
 	data: {
 		type: definePropType(Array),
 		default: () => []
 	},
-	/** @description 请求api */
+	/** 请求数据的函数 */
 	requestApi: { type: definePropType(Function) },
-	/** @description 接口请求数据回调 */
+	/** 接口请求数据回调 */
 	dataCallback: { type: definePropType(Function) },
 	/** 初始化参数 */
 	initParam: definePropType([
@@ -272,14 +65,14 @@ const faTableProps = {
 		Number,
 		Object
 	]),
-	/** @description 列配置 */
+	/** 列配置 */
 	columns: {
 		type: definePropType([Array, Boolean]),
 		default: () => false
 	},
-	/** @description 表格列改变 */
+	/** 表格列改变 */
 	columnsChange: { type: definePropType(Function) },
-	/** @description 搜索表单 Grid布局列配置 */
+	/** 搜索表单 Grid布局列配置 */
 	searchFormCols: {
 		type: definePropType([
 			String,
@@ -294,61 +87,61 @@ const faTableProps = {
 			xl: 6
 		})
 	},
-	/** @description 折叠搜素 */
+	/** 折叠搜索 */
 	collapsedSearch: {
 		type: Boolean,
 		default: true
 	},
-	/** @description 高级搜素抽屉 */
+	/** 高级搜索抽屉 */
 	advancedSearchDrawer: {
 		type: Boolean,
 		default: false
 	},
-	/** @description 搜索表单 */
+	/** 搜索表单 */
 	searchForm: {
 		type: Boolean,
 		default: true
 	},
-	/** @description 头部卡片 */
+	/** 头部卡片 */
 	headerCard: {
 		type: Boolean,
 		default: true
 	},
-	/** @description 刷新按钮 */
+	/** 刷新按钮 */
 	refreshBtn: {
 		type: Boolean,
 		default: true
 	},
-	/** @description 搜索按钮 */
+	/** 搜索按钮 */
 	searchBtn: {
 		type: Boolean,
 		default: true
 	},
-	/** @description 列配置按钮 */
+	/** 列配置按钮 */
 	columnSettingBtn: {
 		type: Boolean,
 		default: false
 	},
-	/** @description 头部卡片右侧功能按钮 */
+	/** 头部卡片右侧功能按钮 */
 	toolBtn: {
 		type: Boolean,
 		default: true
 	},
-	/** @description 隐藏搜索时间 */
+	/** 隐藏搜索时间 */
 	hideSearchTime: Boolean,
-	/** @description 未来搜索时间 */
+	/** 未来搜索时间 */
 	futureSearchTime: Boolean,
-	/** @description 搜索时间范围 */
+	/** 搜索时间范围 */
 	dataSearchRange: {
 		type: definePropType(String),
 		default: "Past3D"
 	},
-	/** @description 分页 */
+	/** 分页 */
 	pagination: {
 		type: Boolean,
 		default: true
 	},
-	/** @description 页码 */
+	/** 页码 */
 	pageSizes: {
 		type: definePropType(Array),
 		default: [
@@ -358,15 +151,15 @@ const faTableProps = {
 			100
 		]
 	},
-	/** @description 隐藏图片 */
+	/** 隐藏图片 */
 	hideImage: Boolean,
-	/** @description 单选 */
+	/** 单选 */
 	single: Boolean,
-	/** @description 行点击选择 */
+	/** 行点击选择 */
 	rowClickSelection: Boolean,
-	/** @description 将父级数据的 children 展开为表格行，并把父级字段合并到子项；Element Plus 树表无需启用 */
+	/** 将父级数据的 children 展开为表格行，并把父级字段合并到子项；Element Plus 树表无需启用 */
 	treeData: Boolean,
-	/** @description 配置选项 */
+	/** 配置选项 */
 	props: {
 		type: definePropType(Object),
 		default: () => ({
@@ -374,66 +167,66 @@ const faTableProps = {
 			children: "children"
 		})
 	},
-	/** @description 自动刷新，当传入 data 时候，如果存在更改则自动刷新 */
+	/** 自动刷新，当传入 data 时候，如果存在更改则自动刷新 */
 	autoRefresh: {
 		type: Boolean,
 		default: true
 	},
 	/**
 	* 等价于 Table-Column 的 selectable
-	* @description function that determines if a certain row can be selected, works when `type` is 'selection'
+	* function that determines if a certain row can be selected, works when `type` is 'selection'
 	*/
 	rowSelectable: Function
 };
-/** FaTable 的运行时 Emits 定义。 */
+/** FaTable 的运行时 Emits 定义 */
 const faTableEmits = {
-	/** @description 当用户手动勾选数据行的 Checkbox 时触发的事件 */
+	/** 当用户手动勾选数据行的 Checkbox 时触发的事件 */
 	select: (selection, row) => Array.isArray(selection) && typeof row === "object" && row !== null,
-	/** @description 当用户手动勾选全选 Checkbox 时触发的事件 */
+	/** 当用户手动勾选全选 Checkbox 时触发的事件 */
 	selectAll: (selection) => Array.isArray(selection),
-	/** @description 当选择项发生变化时会触发该事件 */
+	/** 当选择项发生变化时会触发该事件 */
 	selectionChange: (newSelection) => Array.isArray(newSelection),
-	/** @description 当单元格 hover 进入时会触发该事件 */
+	/** 当单元格 hover 进入时会触发该事件 */
 	cellMouseEnter: (row, column, cell, event) => typeof row === "object" && row !== null && typeof column === "object" && column !== null && cell instanceof HTMLTableCellElement && event instanceof Event,
-	/** @description 当单元格 hover 退出时会触发该事件 */
+	/** 当单元格 hover 退出时会触发该事件 */
 	cellMouseLeave: (row, column, cell, event) => typeof row === "object" && row !== null && typeof column === "object" && column !== null && cell instanceof HTMLTableCellElement && event instanceof Event,
-	/** @description 当某个单元格被点击时会触发该事件 */
+	/** 当某个单元格被点击时会触发该事件 */
 	cellClick: (row, column, cell, event) => typeof row === "object" && row !== null && typeof column === "object" && column !== null && cell instanceof HTMLTableCellElement && event instanceof Event,
-	/** @description 当某个单元格被双击击时会触发该事件 */
+	/** 当某个单元格被双击击时会触发该事件 */
 	cellDblclick: (row, column, cell, event) => typeof row === "object" && row !== null && typeof column === "object" && column !== null && cell instanceof HTMLTableCellElement && event instanceof Event,
-	/** @description 当某个单元格被鼠标右键点击时会触发该事件 */
+	/** 当某个单元格被鼠标右键点击时会触发该事件 */
 	cellContextmenu: (row, column, cell, event) => typeof row === "object" && row !== null && typeof column === "object" && column !== null && cell instanceof HTMLTableCellElement && event instanceof Event,
-	/** @description 当某一行被点击时会触发该事件 */
+	/** 当某一行被点击时会触发该事件 */
 	rowClick: (row, column, event) => typeof row === "object" && row !== null && typeof column === "object" && column !== null && event instanceof Event,
-	/** @description 当某一行被鼠标右键点击时会触发该事件 */
+	/** 当某一行被鼠标右键点击时会触发该事件 */
 	rowContextmenu: (row, column, event) => typeof row === "object" && row !== null && typeof column === "object" && column !== null && event instanceof Event,
-	/** @description 当某一行被双击时会触发该事件 */
+	/** 当某一行被双击时会触发该事件 */
 	rowDblclick: (row, column, event) => typeof row === "object" && row !== null && typeof column === "object" && column !== null && event instanceof Event,
-	/** @description 当某一列的表头被点击时会触发该事件 */
+	/** 当某一列的表头被点击时会触发该事件 */
 	headerClick: (column, event) => typeof column === "object" && column !== null && event instanceof Event,
-	/** @description 当某一列的表头被鼠标右键点击时触发该事件 */
+	/** 当某一列的表头被鼠标右键点击时触发该事件 */
 	headerContextmenu: (column, event) => typeof column === "object" && column !== null && event instanceof Event,
-	/** @description 当表格的排序条件发生变化的时候会触发该事件 */
+	/** 当表格的排序条件发生变化的时候会触发该事件 */
 	sortChange: (data) => typeof data === "object" && data !== null,
-	/** @description column 的 key， 如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件 */
+	/** column 的 key， 如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件 */
 	filterChange: (newFilters) => typeof newFilters === "object" && newFilters !== null,
-	/** @description 当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性 */
+	/** 当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性 */
 	currentChange: (currentRow, oldCurrentRow) => typeof currentRow === "object" && currentRow !== null && (oldCurrentRow === null || typeof oldCurrentRow === "object" && oldCurrentRow !== null),
-	/** @description 当拖动表头改变了列的宽度的时候会触发该事件 */
+	/** 当拖动表头改变了列的宽度的时候会触发该事件 */
 	headerDragend: (newWidth, oldWidth, column, event) => typeof newWidth === "number" && typeof oldWidth === "number" && typeof column === "object" && column !== null && event instanceof MouseEvent,
-	/** @description 当用户对某一行展开或者关闭的时候会触发该事件（展开行时，回调的第二个参数为 expandedRows；树形表格时第二参数为 expanded） */
+	/** 当用户对某一行展开或者关闭的时候会触发该事件（展开行时，回调的第二个参数为 expandedRows；树形表格时第二参数为 expanded） */
 	expandChange: (row, expanded) => typeof row === "object" && row !== null && (typeof expanded === "boolean" || Array.isArray(expanded)),
-	/** @description 表格滚动时触发 */
+	/** 表格滚动时触发 */
 	scroll: (data) => typeof data === "object" && data !== null,
-	/** @description 表格刷新事件 */
+	/** 表格刷新事件 */
 	refresh: (params) => typeof params === "object" && params !== null,
-	/** @description 表格重置事件 */
+	/** 表格重置事件 */
 	reset: (params) => typeof params === "object" && params !== null,
-	/** @description 分页页码改变事件 */
+	/** 分页页码改变事件 */
 	sizeChange: (pageSize) => typeof pageSize === "number",
-	/** @description 分页改变事件 */
+	/** 分页改变事件 */
 	paginationChange: (pageIndex, pageSize) => typeof pageIndex === "number" && typeof pageSize === "number",
-	/** @description 自定义单元格点击事件 */
+	/** 自定义单元格点击事件 */
 	customCellClick: (emitName, { row, column, $index }) => (emitName == null || typeof emitName === "string") && typeof row === "object" && row !== null && typeof column === "object" && column !== null && typeof $index === "number"
 };
 var table_default = defineComponent({
@@ -443,9 +236,15 @@ var table_default = defineComponent({
 	slots: makeSlots(),
 	setup(props, { slots, emit, expose }) {
 		const columnSettingRef = shallowRef(null);
-		const { globalSize, state, elementRef, tableRef, handleTableColumnAutoWidth, loadTableColumns, handleSizeChange, handlePaginationChange, defaultSearchTime, tableSearch, tableReset, doRender, doLoading, handleCustomCellClick } = useTable(props, slots, emit);
+		const { globalSize, state, elementRef, tableRef, handleTableColumnAutoWidth, loadTableColumns, handleSizeChange, handlePaginationChange, defaultSearchTime, tableSearch, tableReset, doRender, setManualLoading, doLoading, handleCustomCellClick } = useTable(props, slots, emit);
 		const notifyColumnsChange = debounce(() => props.columnsChange?.(state.orgColumns), 500);
 		const resizeTableColumns = debounce(handleTableColumnAutoWidth, 100);
+		const unmountedError = /* @__PURE__ */ new Error("FaTable 已卸载，列布局任务已取消。");
+		const reportColumnTask = (task) => {
+			task.catch((error) => {
+				if (error !== unmountedError) console.error("FaTable 列更新失败。", error);
+			});
+		};
 		let lastRowIndex = 0;
 		const getInitParam = () => {
 			return typeof props.initParam === "object" && props.initParam !== null ? props.initParam : {};
@@ -586,7 +385,7 @@ var table_default = defineComponent({
 			return "";
 		};
 		const handleSpanMethod = ({ column, rowIndex }) => {
-			/** @description 原生的 span-method 会失效 */
+			/** 原生的 span-method 会失效 */
 			const property = column.property;
 			const columnKey = column.columnKey;
 			const pKey = property ?? columnKey;
@@ -618,7 +417,7 @@ var table_default = defineComponent({
 				}
 			});
 			emit("headerDragend", newWidth, oldWidth, column, event);
-			if (props.columnsChange) notifyColumnsChange();
+			if (props.columnsChange) reportColumnTask(notifyColumnsChange());
 		};
 		const handleImagePreview = (url) => {
 			state.previewList = [url];
@@ -651,7 +450,7 @@ var table_default = defineComponent({
 		watch(() => props.data, () => {
 			if (!props.requestApi && props.autoRefresh) return tableSearch();
 		}, { deep: true });
-		watchEffect(() => {
+		watchEffect((onCleanup) => {
 			const element = elementRef.value;
 			if (element) {
 				const observer = new ResizeObserver((entries) => {
@@ -660,15 +459,17 @@ var table_default = defineComponent({
 						const widthChanged = state.tableWidth !== width;
 						state.tableWidth = width;
 						state.tableHeight = height;
-						if (widthChanged) resizeTableColumns();
+						if (widthChanged) reportColumnTask(resizeTableColumns());
 					}
 				});
 				observer.observe(element);
-				return () => {
-					observer.disconnect();
-				};
+				onCleanup(() => observer.disconnect());
 			}
 		});
+		onBeforeUnmount(() => {
+			notifyColumnsChange.cancel(unmountedError);
+			resizeTableColumns.cancel(unmountedError);
+		});
 		onMounted(async () => {
 			state.initParam = getInitParam();
 			defaultSearchTime();
@@ -861,25 +662,6 @@ var table_default = defineComponent({
 							"columnKey": "__table-selection",
 							"selectable": props.rowSelectable
 						}, null),
-						slots.operation && createVNode(ElTableColumn, {
-							"fixed": "right",
-							"width": state.operationColumnWidth,
-							"headerAlign": "center",
-							"align": "left",
-							"showOverflowTooltip": false,
-							"className": "fa-table__operation-column",
-							"resizable": false,
-							"columnKey": "__table-operation"
-						}, {
-							header: () => createVNode("div", { "class": "fa-table__auto-width-column__cell-header __fa-table__auto-width-column__cell-header____table-operation" }, [createVNode("span", null, [createTextVNode("操作")])]),
-							default: ({ row, column, $index }) => createVNode("div", { "class": "fa-table__auto-width-column__cell __fa-table__auto-width-column__cell____table-operation" }, [slots.operation?.({
-								row,
-								column,
-								$index,
-								search: tableSearch,
-								...getTableDefaultSlots(state)
-							})])
-						}),
 						state.tableColumns.length === 0 ? slots.default?.() : state.tableColumns.map((col) => col.show && (col.type === "expand" ? createVNode(ElTableColumn, mergeProps(col, {
 							"width": 35,
 							"fixed": col.fixed ?? "left",
@@ -899,7 +681,26 @@ var table_default = defineComponent({
 							"resizable": true,
 							"onImagePreview": handleImagePreview,
 							"onCustomCellClick": handleCustomCellClick
-						}), pick(slots, tableColumnSlotNames.value))))
+						}), pick(slots, tableColumnSlotNames.value)))),
+						slots.operation && createVNode(ElTableColumn, {
+							"fixed": "right",
+							"width": state.operationColumnWidth,
+							"headerAlign": "center",
+							"align": "left",
+							"showOverflowTooltip": false,
+							"className": "fa-table__operation-column",
+							"resizable": false,
+							"columnKey": "__table-operation"
+						}, {
+							header: () => createVNode("div", { "class": "fa-table__auto-width-column__cell-header __fa-table__auto-width-column__cell-header____table-operation" }, [createVNode("span", null, [createTextVNode("操作")])]),
+							default: ({ row, column, $index }) => createVNode("div", { "class": "fa-table__auto-width-column__cell __fa-table__auto-width-column__cell____table-operation" }, [slots.operation?.({
+								row,
+								column,
+								$index,
+								search: tableSearch,
+								...getTableDefaultSlots(state)
+							})])
+						})
 					])
 				}), [[resolveDirective("loading"), state.loading]]),
 				createVNode("div", { "class": "fa-table__main-footer" }, [createVNode("div", { "class": "fa-table__main-footer__left" }, [slots.footer?.({
@@ -936,67 +737,70 @@ var table_default = defineComponent({
 			}, null)
 		]));
 		return useExpose(expose, {
-			/** @description 用于多选表格，清空用户的选择 */
+			/** 用于多选表格，清空用户的选择 */
 			clearSelection: computed(() => tableRef.value?.clearSelection),
-			/** @description 返回当前选中的行 */
+			/** 返回当前选中的行 */
 			getSelectionRows: computed(() => tableRef.value?.getSelectionRows),
-			/** @description 返回当前半选中的行。 */
+			/** 返回当前半选中的行。 */
 			getHalfSelectionRows: computed(() => tableRef.value?.getHalfSelectionRows),
-			/** @description 用于多选表格，切换某一行的选中状态， 如果使用了第二个参数，则可直接设置这一行选中与否 */
+			/** 用于多选表格，切换某一行的选中状态， 如果使用了第二个参数，则可直接设置这一行选中与否 */
 			toggleRowSelection: computed(() => tableRef.value?.toggleRowSelection),
-			/** @description 用于多选表格，切换全选和全不选 */
+			/** 用于多选表格，切换全选和全不选 */
 			toggleAllSelection: computed(() => tableRef.value?.toggleAllSelection),
-			/** @description 用于可扩展的表格或树表格，如果某行被扩展，则切换。 使用第二个参数，您可以直接设置该行应该被扩展或折叠。 */
+			/** 用于可扩展的表格或树表格，如果某行被扩展，则切换。 使用第二个参数，您可以直接设置该行应该被扩展或折叠。 */
 			toggleRowExpansion: computed(() => tableRef.value?.toggleRowExpansion),
-			/** @description 用于单选表格，设定某一行为选中行， 如果调用时不加参数，则会取消目前高亮行的选中状态。 */
+			/** 用于单选表格，设定某一行为选中行， 如果调用时不加参数，则会取消目前高亮行的选中状态。 */
 			setCurrentRow: computed(() => tableRef.value?.setCurrentRow),
-			/** @description 用于清空排序条件，数据会恢复成未排序的状态 */
+			/** 用于清空排序条件，数据会恢复成未排序的状态 */
 			clearSort: computed(() => tableRef.value?.clearSort),
-			/** @description 传入由columnKey 组成的数组以清除指定列的过滤条件。 如果没有参数，清除所有过滤器 */
+			/** 传入由columnKey 组成的数组以清除指定列的过滤条件。 如果没有参数，清除所有过滤器 */
 			clearFilter: computed(() => tableRef.value?.clearFilter),
-			/** @description 对 Table 进行重新布局。 当表格可见性变化时，您可能需要调用此方法以获得正确的布局 */
+			/** 对 Table 进行重新布局。 当表格可见性变化时，您可能需要调用此方法以获得正确的布局 */
 			doLayout: computed(() => tableRef.value?.doLayout),
-			/** @description 手动排序表格。 参数 prop 属性指定排序列，order 指定排序顺序。 */
+			/** 手动排序表格。 参数 prop 属性指定排序列，order 指定排序顺序。 */
 			sort: computed(() => tableRef.value?.sort),
-			/** @description 滚动到一组特定坐标 */
+			/** 滚动到一组特定坐标 */
 			scrollTo: computed(() => tableRef.value?.scrollTo),
-			/** @description 设置垂直滚动位置 */
+			/** 设置垂直滚动位置 */
 			setScrollTop: computed(() => tableRef.value?.setScrollTop),
-			/** @description 设置水平滚动位置 */
+			/** 设置水平滚动位置 */
 			setScrollLeft: computed(() => tableRef.value?.setScrollLeft),
-			/** @description 获取表列的 context */
+			/** 获取表列的 context */
 			columns: computed(() => tableRef.value?.columns),
-			/** @description 适用于 lazy Table, 需要设置 rowKey, 更新 key children */
+			/** 适用于 lazy Table, 需要设置 rowKey, 更新 key children */
 			updateKeyChildren: computed(() => tableRef.value?.updateKeyChildren),
-			/** @description 加载状态 */
-			loading: toRef(state, "loading"),
-			/** @description 表格数据 */
+			/** 聚合加载状态；手动关闭不能结束内部任务。 */
+			loading: computed({
+				get: () => state.loading,
+				set: setManualLoading
+			}),
+			/** 表格数据 */
 			tableData: computed(() => state.tableData),
-			/** @description 分页数据 */
+			/** 分页数据 */
 			tablePagination: computed(() => state.tablePagination),
-			/** @description 搜索参数 */
+			/** 搜索参数 */
 			searchParam: computed(() => state.searchParam),
-			/** @description 选中状态 */
+			/** 选中状态 */
 			selected: computed(() => state.selected),
-			/** @description 选中数据列表 */
+			/** 选中数据列表 */
 			selectedList: computed(() => state.selectedList),
-			/** @description 选中数据 rowKey 列表 */
+			/** 选中数据 rowKey 列表 */
 			selectedListIds: computed(() => state.selectedListIds),
-			/** @description 部分选中数据 rowKey 列表 */
+			/** 部分选中数据 rowKey 列表 */
 			indeterminateSelectedListIds: computed(() => state.indeterminateSelectedListIds),
-			/** @description 表格宽度 */
+			/** 表格宽度 */
 			tableWidth: computed(() => state.tableWidth),
-			/** @description 表格高度 */
+			/** 表格高度 */
 			tableHeight: computed(() => state.tableHeight),
-			/** @description 部分选中（样式不一样而已），用于多选表格，切换某一行的选中状态， 如果使用了第二个参数，则可直接设置这一行选中与否 */
+			/** 部分选中（样式不一样而已），用于多选表格，切换某一行的选中状态， 如果使用了第二个参数，则可直接设置这一行选中与否 */
 			toggleRowIndeterminateSelection,
-			/** @description 异步方法，刷新表格 */
+			/** 异步方法，刷新表格 */
 			refresh: tableSearch,
-			/** @description 异步方法，重置表格 */
+			/** 异步方法，重置表格 */
 			reset: tableReset,
-			/** @description 对 Table 进行重新渲染。当 TableKey 发生变化的时候可以通过此方法重新渲染表格 */
+			/** 对 Table 进行重新渲染。当 TableKey 发生变化的时候可以通过此方法重新渲染表格 */
 			doRender,
-			/** @description Table 加载 */
+			/** Table 加载 */
 			doLoading
 		});
 	}