fast-element-plus 1.0.21 → 2.0.1

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

@@ -0,0 +1,1004 @@
+import { debounce } from "../../../utils/async/index.mjs";
+import { createDateRangeShortcuts, createOneMonthRangeFromToday } from "../../../utils/date/index.mjs";
+import { randomString } from "../../../utils/string/index.mjs";
+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 { tableUtil } from "../utils/table.mjs";
+import { getTableDefaultSlots } from "./table.type.mjs";
+import { useTable } from "./useTable.mjs";
+import tableColumn_default from "./tableColumn.mjs";
+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, ref, resolveDirective, 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 { isArray, isBoolean, isFunction, isNil, isNull, isNumber, isObject, isString, omit } from "lodash-unified";
+//#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 定义。 */
+const faTableProps = {
+	...tableProps,
+	/** @description whether Table has vertical border */
+	border: {
+		type: Boolean,
+		default: true
+	},
+	/** @description 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 */
+	rowKey: {
+		type: [String, Function],
+		default: "id"
+	},
+	/** @description 组件封装，原生的已经失效 method that returns rowspan and colspan */
+	spanMethod: {
+		type: Function,
+		validator: () => {
+			console.warn("[Fast:FaTable]", "'spanMethod' 属性，组件已经封装，外部使用会失效。");
+			return false;
+		}
+	},
+	/** @description 表格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([
+		String,
+		Number,
+		Object
+	]),
+	/** @description 列配置 */
+	columns: {
+		type: definePropType([Array, Boolean]),
+		default: () => false
+	},
+	/** @description 表格列改变 */
+	columnsChange: { type: definePropType(Function) },
+	/** @description 搜索表单 Grid布局列配置 */
+	searchFormCols: {
+		type: definePropType([
+			String,
+			Number,
+			Object
+		]),
+		default: () => ({
+			xs: 1,
+			sm: 2,
+			md: 4,
+			lg: 5,
+			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: [
+			20,
+			30,
+			50,
+			100
+		]
+	},
+	/** @description 隐藏图片 */
+	hideImage: Boolean,
+	/** @description 单选 */
+	single: Boolean,
+	/** @description 行点击选择 */
+	rowClickSelection: Boolean,
+	/** @description 将父级数据的 children 展开为表格行，并把父级字段合并到子项；Element Plus 树表无需启用 */
+	treeData: Boolean,
+	/** @description 配置选项 */
+	props: {
+		type: definePropType(Object),
+		default: () => ({
+			span: void 0,
+			children: "children"
+		})
+	},
+	/** @description 自动刷新，当传入 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'
+	*/
+	rowSelectable: Function
+};
+/** FaTable 的运行时 Emits 定义。 */
+const faTableEmits = {
+	/** @description 当用户手动勾选数据行的 Checkbox 时触发的事件 */
+	select: (selection, row) => isArray(selection) && isObject(row),
+	/** @description 当用户手动勾选全选 Checkbox 时触发的事件 */
+	selectAll: (selection) => isArray(selection),
+	/** @description 当选择项发生变化时会触发该事件 */
+	selectionChange: (newSelection) => isArray(newSelection),
+	/** @description 当单元格 hover 进入时会触发该事件 */
+	cellMouseEnter: (row, column, cell, event) => isObject(row) && isObject(column) && cell instanceof HTMLTableCellElement && event instanceof Event,
+	/** @description 当单元格 hover 退出时会触发该事件 */
+	cellMouseLeave: (row, column, cell, event) => isObject(row) && isObject(column) && cell instanceof HTMLTableCellElement && event instanceof Event,
+	/** @description 当某个单元格被点击时会触发该事件 */
+	cellClick: (row, column, cell, event) => isObject(row) && isObject(column) && cell instanceof HTMLTableCellElement && event instanceof Event,
+	/** @description 当某个单元格被双击击时会触发该事件 */
+	cellDblclick: (row, column, cell, event) => isObject(row) && isObject(column) && cell instanceof HTMLTableCellElement && event instanceof Event,
+	/** @description 当某个单元格被鼠标右键点击时会触发该事件 */
+	cellContextmenu: (row, column, cell, event) => isObject(row) && isObject(column) && cell instanceof HTMLTableCellElement && event instanceof Event,
+	/** @description 当某一行被点击时会触发该事件 */
+	rowClick: (row, column, event) => isObject(row) && isObject(column) && event instanceof Event,
+	/** @description 当某一行被鼠标右键点击时会触发该事件 */
+	rowContextmenu: (row, column, event) => isObject(row) && isObject(column) && event instanceof Event,
+	/** @description 当某一行被双击时会触发该事件 */
+	rowDblclick: (row, column, event) => isObject(row) && isObject(column) && event instanceof Event,
+	/** @description 当某一列的表头被点击时会触发该事件 */
+	headerClick: (column, event) => isObject(column) && event instanceof Event,
+	/** @description 当某一列的表头被鼠标右键点击时触发该事件 */
+	headerContextmenu: (column, event) => isObject(column) && event instanceof Event,
+	/** @description 当表格的排序条件发生变化的时候会触发该事件 */
+	sortChange: (data) => isObject(data),
+	/** @description column 的 key， 如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件 */
+	filterChange: (newFilters) => isString(newFilters) || isNumber(newFilters) || isBoolean(newFilters) || isObject(newFilters),
+	/** @description 当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性 */
+	currentChange: (currentRow, oldCurrentRow) => isObject(currentRow) && (isNull(oldCurrentRow) || isObject(oldCurrentRow)),
+	/** @description 当拖动表头改变了列的宽度的时候会触发该事件 */
+	headerDragend: (newWidth, oldWidth, column, event) => isNumber(newWidth) && isNumber(oldWidth) && isObject(column) && event instanceof MouseEvent,
+	/** @description 当用户对某一行展开或者关闭的时候会触发该事件（展开行时，回调的第二个参数为 expandedRows；树形表格时第二参数为 expanded） */
+	expandChange: (row, expanded) => isObject(row) && (isBoolean(expanded) || isArray(expanded)),
+	/** @description 表格滚动时触发 */
+	scroll: (data) => isObject(data),
+	/** @description 表格刷新事件 */
+	refresh: (params) => isObject(params),
+	/** @description 表格重置事件 */
+	reset: (params) => isObject(params),
+	/** @description 分页页码改变事件 */
+	sizeChange: (pageSize) => isNumber(pageSize),
+	/** @description 分页改变事件 */
+	paginationChange: (pageIndex, pageSize) => isNumber(pageIndex) && isNumber(pageSize),
+	/** @description 自定义单元格点击事件 */
+	customCellClick: (emitName, { row, column, $index }) => (isNil(emitName) || isString(emitName)) && isObject(row) && isObject(column) && isNumber($index)
+};
+var table_default = defineComponent({
+	name: "FaTable",
+	props: faTableProps,
+	emits: faTableEmits,
+	slots: makeSlots(),
+	setup(props, { slots, emit, expose }) {
+		const { _globalSize, state, elementRef, tableRef, handleTableColumnAutoWidth, loadTableColumns, handleSizeChange, handlePaginationChange, defaultSearchTime, tableSearch, tableReset, doRender, doLoading, handleCustomCellClick } = useTable(props, slots, emit);
+		const notifyColumnsChange = debounce(() => props.columnsChange?.(state.orgColumns), 500);
+		const resizeTableColumns = debounce(handleTableColumnAutoWidth, 100);
+		const columnSettingRef = ref();
+		let lastRowIndex = 0;
+		const getInitParam = () => typeof props.initParam === "object" && props.initParam !== null ? props.initParam : {};
+		const getRowKey = (row) => {
+			const value = isFunction(props.rowKey) ? props.rowKey(row) : tableUtil.handleRowAccordingToProp(row, props.rowKey);
+			return typeof value === "string" || typeof value === "number" ? value : void 0;
+		};
+		const indexMethod = (index) => {
+			if (index === 0) lastRowIndex = 0;
+			if (state.spanColumns?.length > 0) {
+				if (Number(state.tableSpanData["__table-index"]?.[index] ?? 0) === 0) return lastRowIndex + (state.tablePagination.pageIndex - 1) * state.tablePagination.pageSize + 1;
+				else {
+					lastRowIndex++;
+					return lastRowIndex + (state.tablePagination.pageIndex - 1) * state.tablePagination.pageSize;
+				}
+			}
+			return index + (state.tablePagination.pageIndex - 1) * state.tablePagination.pageSize + 1;
+		};
+		const handleSelect = (selection, row) => {
+			if (props.single) {
+				tableRef.value?.clearSelection();
+				if (selection.length > 0 && row) tableRef.value?.toggleRowSelection(row);
+			}
+			emit("select", selection, row);
+		};
+		const handleSelectAll = (selection) => {
+			if (props.single) {
+				if (state.selected) {
+					if (state.tableData.length > 0) {
+						tableRef.value?.clearSelection();
+						const firstRow = state.tableData[0];
+						if (firstRow) tableRef.value?.toggleRowSelection(firstRow);
+					}
+				} else tableRef.value?.clearSelection();
+			}
+			emit("selectAll", selection);
+		};
+		const handleSelectionChange = (newSelection) => {
+			newSelection.length === 0 ? state.selected = false : state.selected = true;
+			if (props.single && newSelection.length > 0) {
+				const lastSelection = newSelection.at(-1);
+				state.selectedList = lastSelection === void 0 ? [] : [lastSelection];
+			} else state.selectedList = newSelection;
+			state.indeterminateSelectedListIds = state.indeterminateSelectedListIds.filter((f) => state.selectedListIds.some((s) => s === f));
+			emit("selectionChange", state.selectedList);
+		};
+		const toggleRowIndeterminateSelection = (row, selected) => {
+			const rowKey = getRowKey(row);
+			if (rowKey === void 0) return;
+			const curRow = state.tableData.find((item) => getRowKey(item) === rowKey);
+			if (selected === true) {
+				if (!state.indeterminateSelectedListIds.some((s) => s === rowKey)) state.indeterminateSelectedListIds.push(rowKey);
+				if (curRow) tableRef.value?.toggleRowSelection(curRow, true);
+			} else if (selected === false) {
+				const fIndex = state.indeterminateSelectedListIds.findIndex((f) => f === rowKey);
+				if (fIndex >= 0) state.indeterminateSelectedListIds.splice(fIndex, 1);
+				if (curRow) tableRef.value?.toggleRowSelection(curRow, false);
+			} else {
+				const fIndex = state.indeterminateSelectedListIds.findIndex((f) => f === rowKey);
+				if (fIndex >= 0) state.indeterminateSelectedListIds.splice(fIndex, 1);
+				else state.indeterminateSelectedListIds.push(rowKey);
+				if (curRow) tableRef.value?.toggleRowSelection(curRow);
+			}
+		};
+		const handleSortChange = ({ column, prop }) => {
+			const normalizedProp = prop ?? column.property;
+			if (!column.multiOrder) column.multiOrder = "descending";
+			else if (column.multiOrder === "descending") column.multiOrder = "ascending";
+			else column.multiOrder = void 0;
+			const initSortList = getInitParam()["sortList"];
+			state.searchParam.sortList = [...isArray(initSortList) ? initSortList : [], ...state.searchParam.sortList ?? []].filter((item, index, list) => list.findIndex((candidate) => candidate.enField === item.enField) === index);
+			const orgColumn = state.orgColumns.find((f) => f.prop === normalizedProp);
+			const enField = orgColumn?.sortableField ?? orgColumn?.prop ?? column.property;
+			const fieldIndex = state.searchParam.sortList.findIndex((f) => f.enField === enField);
+			if (!column.multiOrder && fieldIndex >= 0) state.searchParam.sortList.splice(fieldIndex, 1);
+			else if (fieldIndex === -1) state.searchParam.sortList.push({
+				enField,
+				cnField: column.label,
+				mode: column.multiOrder
+			});
+			else {
+				const sortItem = state.searchParam.sortList[fieldIndex];
+				if (sortItem) sortItem.mode = column.multiOrder;
+			}
+			if (state.searchParam.sortList.length === 0) delete state.searchParam.sortList;
+			emit("sortChange", {
+				column,
+				prop: normalizedProp,
+				order: column.multiOrder ?? ""
+			});
+			tableSearch();
+		};
+		const handleCurrentChange = (currentRow, oldCurrentRow) => {
+			if (!currentRow) return;
+			if (props.rowClickSelection) {
+				if (props.single && oldCurrentRow) tableRef.value?.toggleRowSelection(oldCurrentRow);
+				tableRef.value?.toggleRowSelection(currentRow);
+			}
+			emit("currentChange", currentRow, oldCurrentRow);
+		};
+		const handleCellClassName = ({ row, column, rowIndex, columnIndex }) => {
+			let localCellClassName = "";
+			if (column.type === "selection") {
+				const rowKey = getRowKey(row);
+				if (state.indeterminateSelectedListIds.some((s) => s === rowKey)) localCellClassName = "fa-table__selection-column__indeterminate";
+			}
+			const columnInfo = state.tableColumns.find((f) => f.prop === column.property);
+			if (columnInfo?.dataDeleteField) {
+				if (row?.[columnInfo.dataDeleteField] === true) {
+					if (localCellClassName) localCellClassName += " fa-table__data-delete-column";
+					else localCellClassName = "fa-table__data-delete-column";
+				}
+			}
+			if (props.cellClassName) {
+				const cellClassName = isString(props.cellClassName) ? props.cellClassName : props.cellClassName({
+					row,
+					column,
+					rowIndex,
+					columnIndex
+				});
+				if (!cellClassName) return localCellClassName;
+				if (localCellClassName) return `${localCellClassName} ${cellClassName}`;
+				else return cellClassName;
+			} else return localCellClassName;
+		};
+		const handleHeaderCellClassName = ({ row, column, rowIndex, columnIndex }) => {
+			column.order = column.multiOrder === "ascending" || column.multiOrder === "descending" ? column.multiOrder : null;
+			if (props.headerCellClassName) {
+				if (isFunction(props.headerCellClassName)) return props.headerCellClassName({
+					row,
+					column,
+					rowIndex,
+					columnIndex
+				});
+				else return props.headerCellClassName;
+			}
+			return "";
+		};
+		const handleSpanMethod = ({ column, rowIndex }) => {
+			/** @description 原生的 span-method 会失效 */
+			const pKey = column.property ?? column.columnKey;
+			if (state.spanColumns.findIndex((f) => f.prop === pKey) !== -1) {
+				const rowspan = Number(state.tableSpanData[pKey]?.[rowIndex] ?? 0);
+				if (rowspan > 0) return {
+					rowspan,
+					colspan: 1
+				};
+				return {
+					rowspan: 0,
+					colspan: 0
+				};
+			}
+			return {
+				rowspan: 1,
+				colspan: 1
+			};
+		};
+		const handleHeaderDragend = (newWidth, oldWidth, column, event) => {
+			state.orgColumns.forEach((f) => {
+				if (column.property === f.prop) {
+					f.width = newWidth;
+					f.smallWidth = newWidth;
+				}
+			});
+			emit("headerDragend", newWidth, oldWidth, column, event);
+			if (props.columnsChange) notifyColumnsChange();
+		};
+		const handleImagePreview = (url) => {
+			state.previewList = [url];
+			state.imagePreview = true;
+		};
+		onMounted(async () => {
+			state.initParam = getInitParam();
+			defaultSearchTime();
+			Object.entries(getInitParam()).forEach(([key, value]) => {
+				state.searchParam[key] = value;
+			});
+			await tableSearch();
+			watch(() => props.columns, () => {
+				loadTableColumns();
+			}, {
+				deep: true,
+				immediate: true
+			});
+			watch(() => props.initParam, () => {
+				Object.entries(getInitParam()).forEach(([key, value]) => {
+					state.searchParam[key] = value;
+				});
+			}, { deep: true });
+			watch(() => props.data, () => {
+				if (!props.requestApi && props.autoRefresh) return tableSearch();
+			}, {
+				deep: true,
+				immediate: true
+			});
+			watchEffect(() => {
+				const element = elementRef.value;
+				if (element) {
+					const observer = new ResizeObserver((entries) => {
+						for (const entry of entries) {
+							const { width, height } = entry.contentRect;
+							state.tableWidth = width;
+							state.tableHeight = height;
+						}
+						resizeTableColumns();
+					});
+					observer.observe(element);
+					return () => {
+						observer.disconnect();
+					};
+				}
+			});
+		});
+		onActivated(() => {
+			handleTableColumnAutoWidth();
+		});
+		const tableColumnOmitNames = [
+			"multiOrder",
+			"columnId",
+			"order",
+			"sortableField",
+			"disabledSortable",
+			"spanProp",
+			"pureSearch",
+			"search"
+		];
+		const searchInputClearable = computed(() => {
+			const value = state.searchParam.searchValue;
+			return value !== void 0 && value !== null && value !== "" || state.searchValueUpdate.length > 0;
+		});
+		const elTableProps = useProps(props, tableProps, [
+			"data",
+			"spanMethod",
+			"headerCellClassName",
+			"cellClassName"
+		]);
+		useRender(() => createVNode("div", {
+			"ref": elementRef,
+			"class": [
+				"fa-table",
+				`fa-table-${_globalSize.value}`,
+				`fa-table__${props.tableKey ?? "notFound"}`,
+				{ fa__click__disabled: state.loading }
+			],
+			"style": {
+				"--fa-table-width": `${state.tableWidth ? `${state.tableWidth}px` : ""}`,
+				"--fa-table-height": `${state.tableHeight ? `${state.tableHeight}px` : ""}`
+			}
+		}, [
+			createVNode(tableSearchForm_default, {
+				"show": props.searchForm && state.searchForm,
+				"collapsedSearch": props.collapsedSearch,
+				"advancedSearchDrawer": props.advancedSearchDrawer,
+				"cols": props.searchFormCols,
+				"search": tableSearch,
+				"reset": tableReset
+			}, slots),
+			slots.topHeader && createVNode("div", { "class": "el-card fa-table__header" }, [slots.topHeader({
+				search: tableSearch,
+				...getTableDefaultSlots(state)
+			})]),
+			createVNode("div", { "class": "el-card fa-table__main" }, [
+				props.headerCard && createVNode("div", { "class": "fa-table__main-header" }, [createVNode("div", { "class": "fa-table__main-header-left" }, [slots.header?.({
+					search: tableSearch,
+					...getTableDefaultSlots(state)
+				})]), createVNode("div", { "class": "fa-table__main-header-right" }, [props.toolBtn && createVNode(Fragment, null, [
+					createVNode("div", { "class": "fa-table__main-header-right__div-search" }, [createVNode(ElInput, {
+						"class": "fa-table__main-header-right__input-search",
+						"disabled": state.loading,
+						"prefixIcon": Search,
+						"placeholder": "关键字搜索",
+						"modelValue": state.searchParam.searchValue,
+						"modelModifiers": { "trim": true },
+						"onUpdate:modelValue": ($event) => state.searchParam.searchValue = $event,
+						"clearable": searchInputClearable.value,
+						"onCompositionupdate": (e) => {
+							state.searchValueUpdate = e.data;
+						},
+						"onCompositionend": () => {
+							state.searchValueUpdate = "";
+						},
+						"onChange": () => {
+							tableSearch();
+						}
+					}, null), createVNode("div", { "class": "fa-table__main-header-right__div-search__hidden" }, [state.searchParam.searchValue, state.searchValueUpdate])]),
+					props.requestApi && !props.hideSearchTime && createVNode(ElDatePicker, mergeProps({ onChange: () => {
+						tableSearch();
+					} }, {
+						"class": "fa-table__main-header-right__data-search",
+						"popperClass": "fa-table__main-header-right__data-search__popper",
+						"disabled": state.loading,
+						"type": "daterange",
+						"modelValue": state.searchParam.searchTimeList,
+						"onUpdate:modelValue": ($event) => state.searchParam.searchTimeList = $event,
+						"defaultTime": createOneMonthRangeFromToday(props.futureSearchTime),
+						"shortcuts": createDateRangeShortcuts(props.futureSearchTime),
+						"valueFormat": "YYYY-MM-DD HH:mm:ss",
+						"clearable": false,
+						"unlinkPanels": true
+					}), null),
+					props.refreshBtn && createVNode(ElButton, {
+						"loading": state.loading,
+						"loadingIcon": Eleme,
+						"title": "刷新",
+						"circle": true,
+						"icon": Refresh,
+						"onClick": () => {
+							tableSearch();
+						}
+					}, null),
+					props.searchBtn && state.searchColumns.length > 0 && createVNode(ElButton, {
+						"loading": state.loading,
+						"loadingIcon": Eleme,
+						"title": state.searchForm ? "隐藏搜索栏" : "显示搜索栏",
+						"circle": true,
+						"icon": Search,
+						"onClick": () => state.searchForm = !state.searchForm
+					}, null),
+					props.columnSettingBtn && props.columns && createVNode(ElDropdown, {
+						"title": "表格列配置",
+						"trigger": "click"
+					}, {
+						default: () => createVNode(ElButton, {
+							"loading": state.loading,
+							"loadingIcon": Eleme,
+							"circle": true,
+							"icon": Setting
+						}, null),
+						dropdown: () => createVNode(ElDropdownMenu, null, { default: () => [slots.columnSetting?.(), createVNode(ElDropdownItem, {
+							"title": "表格列配置",
+							"divided": true,
+							"onClick": () => columnSettingRef.value?.open()
+						}, { default: () => [createTextVNode("表格列配置")] })] })
+					}),
+					slots.toolButton?.({
+						search: tableSearch,
+						...getTableDefaultSlots(state)
+					}),
+					slots.toolButtonAdv && createVNode(ElDropdown, {
+						"title": "高级操作",
+						"trigger": "click"
+					}, {
+						default: () => createVNode(ElButton, {
+							"loading": state.loading,
+							"loadingIcon": Eleme,
+							"circle": true,
+							"icon": More
+						}, null),
+						dropdown: () => createVNode(ElDropdownMenu, null, { default: () => [slots.toolButtonAdv?.({
+							search: tableSearch,
+							...getTableDefaultSlots(state)
+						})] })
+					})
+				])])]),
+				withDirectives(createVNode(ElTable, mergeProps(elTableProps.value, {
+					"ref": tableRef,
+					"element-loading-text": state.loadingText,
+					"data": state.tableData,
+					"spanMethod": handleSpanMethod,
+					"headerCellClassName": handleHeaderCellClassName,
+					"cellClassName": handleCellClassName,
+					"onSelection-change": handleSelectionChange,
+					"onSort-change": handleSortChange,
+					"onSelect": handleSelect,
+					"onSelect-all": handleSelectAll,
+					"onCurrent-change": handleCurrentChange,
+					"onHeader-dragend": handleHeaderDragend,
+					"onCell-mouse-enter": (row, column, cell, event) => emit("cellMouseEnter", row, column, cell, event),
+					"onCell-mouse-leave": (row, column, cell, event) => emit("cellMouseLeave", row, column, cell, event),
+					"onCell-click": (row, column, cell, event) => emit("cellClick", row, column, cell, event),
+					"onCell-dblclick": (row, column, cell, event) => emit("cellDblclick", row, column, cell, event),
+					"onCell-contextmenu": (row, column, cell, event) => emit("cellContextmenu", row, column, cell, event),
+					"onRow-click": (row, column, event) => {
+						if (column) emit("rowClick", row, column, event);
+					},
+					"onRow-contextmenu": (row, column, event) => {
+						if (column) emit("rowContextmenu", row, column, event);
+					},
+					"onRow-dblclick": (row, column, event) => {
+						if (column) emit("rowDblclick", row, column, event);
+					},
+					"onHeader-click": (column, event) => emit("headerClick", column, event),
+					"onHeader-contextmenu": (column, event) => emit("headerContextmenu", column, event),
+					"onFilter-change": (newFilters) => emit("filterChange", newFilters),
+					"onExpand-change": (row, expanded) => emit("expandChange", row, expanded),
+					"onScroll": (data) => emit("scroll", data)
+				}), {
+					append: () => slots.append?.(),
+					empty: () => createVNode("div", { "class": "fa-table__empty" }, [slots.empty ? slots.empty() : createVNode(Fragment, null, [createVNode(ElIcon, null, { default: () => [createVNode(NotData, null, null)] }), createVNode("div", null, [createTextVNode("暂无数据")])])]),
+					default: () => createVNode(Fragment, null, [
+						createVNode(ElTableColumn, {
+							"className": "fa-table__index-column",
+							"type": "index",
+							"fixed": "left",
+							"width": state.tablePagination.pageIndex * state.tablePagination.pageSize >= 100 ? state.tablePagination.pageIndex * state.tablePagination.pageSize >= 1e3 ? 50 : 40 : 30,
+							"align": "center",
+							"index": indexMethod,
+							"showOverflowTooltip": false,
+							"resizable": false,
+							"columnKey": "__table-index"
+						}, null),
+						createVNode(ElTableColumn, {
+							"className": "fa-table__selection-column",
+							"type": "selection",
+							"fixed": "left",
+							"width": 35,
+							"align": "center",
+							"reserveSelection": true,
+							"showOverflowTooltip": false,
+							"resizable": false,
+							"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",
+							"resizable": false
+						}), { default: ({ row, column, $index }) => createVNode(Fragment, null, [col.render?.({
+							row,
+							column,
+							$index,
+							...getTableDefaultSlots(state)
+						}), col.slot && slots[col.slot]?.({
+							row,
+							column,
+							$index,
+							...getTableDefaultSlots(state)
+						})]) }) : col.prop && createVNode(tableColumn_default, mergeProps(omit(col, tableColumnOmitNames), {
+							"hideImage": props.hideImage,
+							"resizable": true,
+							"onImagePreview": handleImagePreview,
+							"onCustomCellClick": handleCustomCellClick
+						}), slots)))
+					])
+				}), [[resolveDirective("loading"), state.loading]]),
+				createVNode("div", { "class": "fa-table__main-footer" }, [createVNode("div", { "class": "fa-table__main-footer__left" }, [slots.footer?.({
+					search: tableSearch,
+					...getTableDefaultSlots(state)
+				})]), slots.pagination ? slots.pagination({
+					pageIndex: state.tablePagination.pageIndex,
+					pageSize: state.tablePagination.pageSize,
+					totalRows: state.tablePagination.totalRows,
+					handleSizeChange,
+					handlePaginationChange
+				}) : createVNode(Fragment, null, [props.pagination ? createVNode(tablePagination_default, {
+					"pageSizes": props.pageSizes,
+					"onSizeChange": handleSizeChange,
+					"onCurrentChange": handlePaginationChange
+				}, null) : createVNode(ElPagination, {
+					"class": "fa-table-pagination",
+					"size": "small",
+					"layout": "total",
+					"total": state.tableData.length
+				}, null)])])
+			]),
+			state.imagePreview && createVNode(ElImageViewer, {
+				"closeOnPressEscape": true,
+				"hideOnClickModal": true,
+				"teleported": true,
+				"showProgress": true,
+				"onClose": () => state.imagePreview = false,
+				"urlList": state.previewList
+			}, null),
+			props.columnSettingBtn && createVNode(tableColumnSettingDialog_default, {
+				"ref": columnSettingRef,
+				"change": props.columnsChange
+			}, 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 组成的数组以清除指定列的过滤条件。 如果没有参数，清除所有过滤器 */
+			clearFilter: computed(() => tableRef.value?.clearFilter),
+			/** @description 对 Table 进行重新布局。 当表格可见性变化时，您可能需要调用此方法以获得正确的布局 */
+			doLayout: computed(() => tableRef.value?.doLayout),
+			/** @description 手动排序表格。 参数 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 */
+			columns: computed(() => tableRef.value?.columns),
+			/** @description 适用于 lazy Table, 需要设置 rowKey, 更新 key children */
+			updateKeyChildren: computed(() => tableRef.value?.updateKeyChildren),
+			/** @description 加载状态 */
+			loading: computed(() => state.loading),
+			/** @description 表格数据 */
+			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 列表 */
+			selectedListIds: computed(() => state.selectedListIds),
+			/** @description 部分选中数据 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 发生变化的时候可以通过此方法重新渲染表格 */
+			doRender,
+			/** @description Table 加载 */
+			doLoading
+		});
+	}
+});
+//#endregion
+export { table_default as default, faTableEmits, faTableProps, tableProps };
+
+//# sourceMappingURL=table.mjs.map