@antdv-vue/pro-table 0.0.0-stage → 2.0.3

package/dist/useFetchData.js

@@ -0,0 +1,243 @@
+import { postDataPipeline } from "./utils/index.js";
+import { computed, ref } from "vue";
+import { runFunction, useDebounceFn, useEffect, useMountMergeState, usePrevious } from "@antdv-vue/pro-utils";
+//#region src/useFetchData.ts
+/**
+* 组合用户的配置和默认值
+*/
+function mergeOptionAndPageInfo({ pageInfo }) {
+	if (pageInfo.value) {
+		const { current, pageSize, defaultPageSize } = pageInfo.value;
+		return {
+			current: current || 1,
+			total: 0,
+			pageSize: pageSize || defaultPageSize || 20
+		};
+	}
+	return {
+		current: 1,
+		total: 0,
+		pageSize: 20
+	};
+}
+function useFetchData(getData, defaultData, options) {
+	/**
+	* 用于保存组件是否被卸载的状态的引用
+	*/
+	const umount = ref(false);
+	/**
+	* 用于保存 AbortController 实例的引用，方便需要时进行请求的取消操作
+	*/
+	const abortRef = ref(null);
+	/**
+	* useFetchData 钩子的配置项
+	*/
+	const { onLoad, manual, polling, onRequestError, debounceTime = ref(20), effects = [], dataSource, loading, pageInfo, onLoadingChange, onPageInfoChange, onDataSourceChange } = options || {};
+	/** 是否首次加载的指示器 */
+	const manualRequest = ref(manual.value);
+	/** 轮询的setTime ID 存储 */
+	const pollingSetTime = ref(null);
+	/**
+	* 用于存储最新的数据，这样可以在切换的时候保持数据的一致性
+	*/
+	const [tableDataList, setTableDataList] = useMountMergeState(() => defaultData, {
+		value: dataSource,
+		defaultValue: defaultData,
+		onChange: onDataSourceChange
+	});
+	/**
+	* 表格的加载状态
+	*/
+	const [tableLoading, setTableLoading] = useMountMergeState(() => false, {
+		value: computed(() => typeof loading.value === "object" ? loading.value?.spinning : loading.value),
+		onChange: onLoadingChange
+	});
+	/**
+	* 表示页面信息的类型  useMountMergeState 钩子的初始值和参数
+	* @property {number} current 当前页码
+	* @property {number} pageSize 页面大小
+	* @property {number} total 数据总量
+	*/
+	const [pageInfoState, setPageInfoState] = useMountMergeState(() => mergeOptionAndPageInfo(options), { onChange: onPageInfoChange });
+	/**
+	* 用于比较并设置页面信息和回调函数的引用更新
+	*/
+	const setPageInfo = (changePageInfo) => {
+		if (changePageInfo.current !== pageInfoState.value.current || changePageInfo.pageSize !== pageInfoState.value.pageSize || changePageInfo.total !== pageInfoState.value.total) setPageInfoState(changePageInfo);
+	};
+	const [pollingLoading, setPollingLoading] = useMountMergeState(false);
+	const setDataAndLoading = (newData, dataTotal) => {
+		setTableDataList(newData);
+		if (pageInfoState?.value.total !== dataTotal) setPageInfo({
+			...pageInfoState.value,
+			total: dataTotal || newData.length
+		});
+	};
+	/**
+	* 上一页的页码
+	*/
+	const prePage = usePrevious(computed(() => pageInfoState.value.current));
+	/**
+	* 上一页的页面大小
+	*/
+	const prePageSize = usePrevious(computed(() => pageInfoState.value.pageSize));
+	/**
+	* 上一页的轮询时间
+	*/
+	const prePolling = usePrevious(polling);
+	const requestFinally = () => {
+		setTableLoading(false);
+		setPollingLoading(false);
+	};
+	/** 请求数据 */
+	const fetchList = async (isPolling, signal) => {
+		if (manualRequest.value) {
+			manualRequest.value = false;
+			return;
+		}
+		if (!isPolling) setTableLoading(true);
+		else setPollingLoading(true);
+		const { pageSize, current } = pageInfoState.value || {};
+		try {
+			const pageParams = pageInfo.value !== false ? {
+				current,
+				pageSize
+			} : void 0;
+			const { data = [], success, total = 0, ...rest } = await getData.value?.(pageParams) || {};
+			if (signal?.aborted) return [];
+			if (success === false) return [];
+			const responseData = postDataPipeline(data, [options.postData].filter((item) => item));
+			if (signal?.aborted) return [];
+			setDataAndLoading(responseData, total);
+			onLoad?.(responseData, rest);
+			return responseData;
+		} catch (e) {
+			if (signal?.aborted) return [];
+			if (onRequestError === void 0) throw new Error(e);
+			if (tableDataList.value === void 0) setTableDataList([]);
+			onRequestError(e);
+		} finally {
+			if (!signal?.aborted) requestFinally();
+		}
+		return [];
+	};
+	/**
+	* 该函数用于进行数据请求，可以用于轮询或单次请求。
+	* 通过使用 AbortController 取消之前的请求，避免出现请求堆积。
+	* 若需要轮询，则在一定时间后再次调用该函数，最小时间为 200ms，避免一直处于 loading 状态。
+	* 如果请求被取消，则返回空。
+	*/
+	const fetchListDebounce = useDebounceFn(async (isPolling) => {
+		if (pollingSetTime.value) {
+			clearTimeout(pollingSetTime.value);
+			pollingSetTime.value = null;
+		}
+		if (!getData.value) return;
+		const abort = new AbortController();
+		abortRef.value = abort;
+		try {
+			/**
+			* 这段代码使用了 Promise.race，同时发起了两个异步请求。
+			* fetchList 函数发起一个数据请求，而第二个 Promise 是等待通过 AbortSignal 取得一个信号。
+			* 如果第二个 Promise 得到了一个 AbortSignal 的信号，就会触发 reject，Promise.race 的结果也会结束。
+			* 这样，就达到了取消请求的目的。如果 fetchList 函数先返回了结果，那么该结果就是 Promise.race 的结果，
+			* 此时第二个 Promise 就会被取消。
+			*/
+			const msg = await Promise.race([fetchList(isPolling, abort.signal), new Promise((_, reject) => {
+				abortRef.value?.signal.addEventListener("abort", () => {
+					reject(/* @__PURE__ */ new Error("aborted"));
+					fetchListDebounce.cancel();
+					requestFinally();
+				});
+			})]);
+			if (abort.signal.aborted) return;
+			const needPolling = runFunction(polling?.value, msg);
+			if (needPolling && !umount.value) pollingSetTime.value = setTimeout(() => fetchListDebounce.run(needPolling), Math.max(needPolling, 2e3));
+			return msg;
+		} catch (e) {
+			if (e === "aborted") return;
+			throw e;
+		}
+	}, debounceTime.value || 30);
+	/**
+	* 取消请求
+	*/
+	const abortFetch = () => {
+		abortRef.value?.abort();
+		fetchListDebounce.cancel();
+		requestFinally();
+	};
+	useEffect(() => {
+		if (!polling.value && pollingSetTime.value) {
+			clearTimeout(pollingSetTime.value);
+			pollingSetTime.value = null;
+		}
+		if (!prePolling.value && polling.value) (async () => await fetchListDebounce.run(true))();
+		return () => {
+			if (pollingSetTime.value) {
+				clearTimeout(pollingSetTime.value);
+				pollingSetTime.value = null;
+			}
+		};
+	}, [polling]);
+	useEffect(() => {
+		umount.value = false;
+		return () => {
+			umount.value = true;
+		};
+	}, []);
+	/** PageIndex 改变的时候自动刷新 */
+	useEffect(() => {
+		const { current, pageSize } = pageInfoState.value || {};
+		if ((!prePage.value || prePage.value === current) && (!prePageSize.value || prePageSize.value === pageSize)) return;
+		if (pageInfo.value && tableDataList.value && tableDataList.value.length > pageSize || 0) return;
+		if (current !== void 0 && tableDataList.value && tableDataList.value.length <= pageSize) {
+			abortFetch();
+			(async () => await fetchListDebounce.run(false))();
+		}
+	}, [() => pageInfoState?.value.current]);
+	useEffect(() => {
+		if (!prePageSize.value) return;
+		abortFetch();
+		(async () => await fetchListDebounce.run(false))();
+	}, [() => pageInfoState.value.pageSize]);
+	/**
+	* 检查是否有正在进行的请求需要被中止。如果是，则使用 abort 中的方法来中止请求。
+	* 接下来，使用名为 fetchListDebounce 的防抖函数并传入 false 参数。这个函数可以防止请求过于频繁地发出，通过延迟执行传递给它的函数来实现。
+	* 最后，检查是否有正在进行的请求，如果有，则中止它。
+	*/
+	useEffect(() => {
+		abortFetch();
+		(async () => await fetchListDebounce.run(false))();
+		if (!manual.value) manualRequest.value = false;
+		return () => abortFetch();
+	}, [...effects, manual]);
+	return {
+		dataSource: tableDataList,
+		setDataSource: setTableDataList,
+		loading: computed(() => typeof loading.value === "object" ? {
+			...loading.value,
+			spinning: tableLoading.value
+		} : tableLoading.value),
+		reload: async () => {
+			abortFetch();
+			await fetchListDebounce.run(false);
+		},
+		pageInfo: pageInfoState,
+		pollingLoading,
+		reset: async () => {
+			const { defaultPageSize = 20, current = 1 } = pageInfo.value || {};
+			setPageInfo({
+				current,
+				total: 0,
+				pageSize: defaultPageSize
+			});
+		},
+		setPageInfo: async (info) => setPageInfo({
+			...pageInfoState.value,
+			...info
+		})
+	};
+}
+//#endregion
+export { useFetchData as default };

package/dist/utils/cellRenderToFromItem.d.ts

@@ -0,0 +1,52 @@
+import { ContainerReturnType } from "../Store/Provide.js";
+import { ProColumnType } from "../typing.js";
+import * as _$vue from "vue";
+import { ProFormFieldProps } from "@antdv-vue/pro-form";
+import { ProFieldValueObjectType, ProFieldValueType, ProSchemaComponentTypes, UseEditableUtilType } from "@antdv-vue/pro-utils";
+import { ProFieldEmptyText } from "@antdv-vue/pro-field";
+import { NamePath } from "antdv-next/dist/form/types";
+import { AnyObject, Key as Key$1, VueNode as VueNode$1 } from "@v-c/util/dist/type";
+
+//#region src/utils/cellRenderToFromItem.d.ts
+interface CellRenderFromItemProps<T extends AnyObject, U extends Record<string, any>, ValueType extends (ProFieldValueType | ProFieldValueObjectType)> {
+  text: VueNode$1;
+  valueType: ProColumnType<T, ValueType>['valueType'];
+  index: number;
+  rowData?: T;
+  columnEmptyText?: ProFieldEmptyText;
+  columnProps?: ProColumnType<T, ValueType> & {
+    entity: T;
+  };
+  type?: ProSchemaComponentTypes;
+  recordKey?: Key$1;
+  mode: 'edit' | 'read';
+  /**
+   * If there is, use EditableTable in the Form
+   */
+  prefixName?: NamePath<string | number | boolean>;
+  counter?: ContainerReturnType<T, U, ValueType>;
+  proFieldProps?: ProFormFieldProps;
+  subName?: string[];
+  editableUtils?: UseEditableUtilType<T>;
+}
+/**
+ * 拼接用于编辑的 key
+ */
+declare function spellNamePath(...rest: any[]): Key$1[];
+/**
+ * 根据不同的类型来转化数值
+ *
+ * @param config
+ */
+declare function cellRenderToFromItem<T extends AnyObject, U extends Record<string, any>, ValueType extends (ProFieldValueType | ProFieldValueObjectType)>(config: CellRenderFromItemProps<T, U, ValueType>): string | number | boolean | void | _$vue.ComponentOptions<any, any, any, _$vue.ComputedOptions, _$vue.MethodOptions, any, any, any, string, {}, {}, string, {}, {}, {}, string, _$vue.ComponentProvideOptions> | _$vue.FunctionalComponent<any, {}, any, {}> | {
+  new (...args: any[]): any;
+  __isFragment?: never;
+  __isTeleport?: never;
+  __isSuspense?: never;
+} | _$vue.VNode<_$vue.RendererNode, _$vue.RendererElement, {
+  [key: string]: any;
+}> | (string | number | boolean | void | _$vue.Component | _$vue.VNode<_$vue.RendererNode, _$vue.RendererElement, {
+  [key: string]: any;
+}> | null | undefined)[] | null;
+//#endregion
+export { cellRenderToFromItem as default, spellNamePath };

package/dist/utils/cellRenderToFromItem.js

@@ -0,0 +1,163 @@
+import { Fragment, createVNode, defineComponent, isVNode, mergeProps } from "vue";
+import { ProForm, ProFormField, useFieldContextInject } from "@antdv-vue/pro-form";
+import { useIntl } from "@antdv-vue/pro-provider";
+import { FormItem, InlineErrorFormItem, getFieldPropsOrFormItemProps, runFunction } from "@antdv-vue/pro-utils";
+//#region src/utils/cellRenderToFromItem.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const SHOW_EMPTY_TEXT_LIST = [
+	"",
+	null,
+	void 0
+];
+/**
+* 拼接用于编辑的 key
+*/
+function spellNamePath(...rest) {
+	return rest.filter((index) => index !== void 0).map((item) => {
+		if (typeof item === "number") return item.toString();
+		return item;
+	}).flat(1);
+}
+const CellRenderFromItem = /* @__PURE__ */ defineComponent((props, { expose }) => {
+	const intl = useIntl();
+	const formContext = useFieldContextInject();
+	const editableForm = ProForm.useFormInstance();
+	expose({});
+	return () => {
+		const { columnProps, prefixName, text, counter, rowData, index, recordKey, subName, proFieldProps, editableUtils } = props;
+		const key = recordKey || index;
+		const realIndex = editableUtils?.getRealIndex?.(rowData) ?? index;
+		const formItemName = spellNamePath(prefixName, prefixName ? subName : [], prefixName ? realIndex : key, columnProps?.key ?? columnProps?.dataIndex ?? index);
+		const rowName = formItemName.slice(0, -1);
+		const needProps = [editableForm, {
+			...columnProps,
+			rowKey: rowName,
+			rowIndex: index,
+			isEditable: true
+		}];
+		const generateFormItem = () => {
+			const formItemProps = { ...getFieldPropsOrFormItemProps(columnProps?.formItemProps, ...needProps) };
+			formItemProps.messageVariables = {
+				label: columnProps?.title || intl.value.getMessage({
+					id: "editableTable.defaultFieldLabel",
+					defaultMessage: "此项"
+				}),
+				type: columnProps?.valueType || intl.value.getMessage({
+					id: "editableTable.defaultFieldType",
+					defaultMessage: "文本"
+				}),
+				...formItemProps?.messageVariables
+			};
+			formItemProps.initialValue = (prefixName ? null : text) ?? formItemProps?.initialValue ?? columnProps?.initialValue;
+			let fieldDom = createVNode(ProFormField, mergeProps({
+				"key": formItemName.join("-"),
+				"name": formItemName,
+				"proFormFieldKey": key,
+				"ignoreFormItem": true,
+				"fieldProps": {
+					style: { width: "100%" },
+					...getFieldPropsOrFormItemProps(columnProps?.fieldProps, ...needProps)
+				}
+			}, proFieldProps), null);
+			/**
+			* 如果没有自定义直接返回
+			*/
+			if (columnProps?.formItemRender) {
+				fieldDom = columnProps.formItemRender({
+					...columnProps,
+					index,
+					isEditable: true,
+					type: "table"
+				}, {
+					defaultRender: () => createVNode(Fragment, null, [fieldDom]),
+					type: "form",
+					recordKey,
+					record: {
+						...rowData,
+						...editableForm?.getFieldValue(rowName)
+					},
+					isEditable: true
+				}, editableForm, props.editableUtils);
+				if (columnProps.ignoreFormItem) return createVNode(Fragment, null, [fieldDom]);
+			}
+			return createVNode(InlineErrorFormItem, mergeProps({ "key": formItemName.join("-") }, formItemProps, {
+				"errorType": "popover",
+				"popoverProps": { getPopupContainer: formContext.getPopupContainer?.value || (() => counter?.rootDomRef?.value || document.body) },
+				"name": formItemName
+			}), _isSlot(fieldDom) ? fieldDom : { default: () => [fieldDom] });
+		};
+		if (formItemName.length === 0) return null;
+		if (typeof columnProps?.formItemRender === "function" || typeof columnProps?.fieldProps === "function" || typeof columnProps?.formItemProps === "function") return createVNode(FormItem, { "noStyle": true }, { default: () => generateFormItem() });
+		return generateFormItem();
+	};
+}, {
+	name: "CellRenderFromItem",
+	inheritAttrs: false,
+	props: [
+		"columnEmptyText",
+		"columnProps",
+		"counter",
+		"editableUtils",
+		"index",
+		"mode",
+		"mode",
+		"prefixName",
+		"proFieldProps",
+		"recordKey",
+		"rowData",
+		"subName",
+		"text",
+		"type",
+		"valueType"
+	]
+});
+/**
+* 根据不同的类型来转化数值
+*
+* @param config
+*/
+function cellRenderToFromItem(config) {
+	const { text, valueType, rowData, columnProps, index } = config;
+	if ((!valueType || ["textarea", "text"].includes(valueType.toString())) && !columnProps?.valueEnum && config.mode === "read") return SHOW_EMPTY_TEXT_LIST.includes(text) ? config.columnEmptyText : text;
+	if (typeof valueType === "function" && rowData) return cellRenderToFromItem({
+		...config,
+		valueType: valueType(rowData, config.type) || "text"
+	});
+	const columnKey = columnProps?.key || columnProps?.dataIndex?.toString();
+	const dependencies = columnProps?.dependencies ? [
+		config.prefixName,
+		config.prefixName ? index?.toString() : config.recordKey?.toString(),
+		columnProps?.dependencies
+	].filter(Boolean).flat(1) : [];
+	/**
+	* 生成公用的 proField dom 配置
+	*/
+	const proFieldProps = {
+		valueEnum: runFunction(columnProps?.valueEnum, rowData),
+		request: columnProps?.request,
+		dependencies: columnProps?.dependencies ? [dependencies] : void 0,
+		originDependencies: columnProps?.dependencies ? [columnProps?.dependencies] : void 0,
+		params: runFunction(columnProps?.params, rowData, columnProps),
+		readonly: columnProps?.readonly,
+		text: valueType === "index" || valueType === "indexBorder" ? index : text,
+		mode: config.mode,
+		formItemRender: void 0,
+		valueType,
+		record: rowData,
+		proFieldProps: {
+			emptyText: config.columnEmptyText,
+			proFieldKey: columnKey ? `table-field-${columnKey}` : void 0
+		}
+	};
+	/** 只读模式直接返回就好了，不需要处理 formItem */
+	if (config.mode !== "edit") return createVNode(ProFormField, mergeProps({
+		"mode": "read",
+		"ignoreFormItem": true,
+		"fieldProps": getFieldPropsOrFormItemProps(columnProps?.fieldProps, null, columnProps)
+	}, proFieldProps), null);
+	return createVNode(CellRenderFromItem, mergeProps({ "key": config.recordKey }, config, { "proFieldProps": proFieldProps }), null);
+}
+//#endregion
+export { cellRenderToFromItem as default, spellNamePath };

package/dist/utils/columnRender.d.ts

@@ -0,0 +1,54 @@
+import { ContainerReturnType } from "../Store/Provide.js";
+import { ProColumns } from "../typing.js";
+import { ProFieldValueObjectType, ProFieldValueType, ProSchemaComponentTypes, UseEditableUtilType } from "@antdv-vue/pro-utils";
+import { ProFieldEmptyText } from "@antdv-vue/pro-field";
+import { AnyObject, VueNode as VueNode$1 } from "@v-c/util/dist/type";
+import * as _$vue_jsx_runtime0 from "vue/jsx-runtime";
+
+//#region src/utils/columnRender.d.ts
+/** 转化列的定义 */
+interface ColumnRenderInterface<T extends Record<string, any>, U extends Record<string, any>, ValueType extends (ProFieldValueType | ProFieldValueObjectType)> {
+  columnProps: ProColumns<T, ValueType>;
+  text: VueNode$1;
+  rowData: T;
+  index: number;
+  columnEmptyText?: ProFieldEmptyText;
+  type: ProSchemaComponentTypes;
+  counter?: ContainerReturnType<T, U, ValueType>;
+  editableUtils?: UseEditableUtilType<T>;
+  subName?: string[];
+  marginSM?: number;
+}
+declare function isMergeCell(dom: VueNode$1): any;
+/**
+ * 增加了 icon 的功能 render title
+ *
+ * @param item
+ */
+declare function renderColumnsTitle<T extends Record<string, any>, P extends (ProFieldValueType | ProFieldValueObjectType)>(item: ProColumns<T, P>): _$vue_jsx_runtime0.JSX.Element;
+/**
+ * 默认的 filter 方法
+ *
+ * @param value
+ * @param record
+ * @param dataIndex
+ */
+declare function defaultOnFilter(value: string, record: any, dataIndex: string | string[]): boolean;
+/**
+ * 这个组件负责单元格的具体渲染
+ *
+ */
+declare function columnRender<T extends AnyObject, U extends Record<string, any>, ValueType extends (ProFieldValueType | ProFieldValueObjectType)>({
+  columnProps,
+  text,
+  rowData,
+  index,
+  columnEmptyText,
+  counter,
+  type,
+  marginSM,
+  subName,
+  editableUtils
+}: ColumnRenderInterface<T, U, ValueType>): VueNode$1;
+//#endregion
+export { columnRender as default, defaultOnFilter, isMergeCell, renderColumnsTitle };

package/dist/utils/columnRender.js

@@ -0,0 +1,148 @@
+import cellRenderToFromItem from "./cellRenderToFromItem.js";
+import { Fragment, createVNode, defineComponent, isVNode } from "vue";
+import { LabelIconTip, genCopyable, isNil } from "@antdv-vue/pro-utils";
+import { Divider, Flex, Space } from "antdv-next";
+import get from "@v-c/util/dist/utils/get";
+//#region src/utils/columnRender.tsx
+/** 转化列的定义 */
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+function isMergeCell(dom) {
+	return dom && isVNode(dom) && dom?.props?.colSpan;
+}
+/**
+* 增加了 icon 的功能 render title
+*
+* @param item
+*/
+function renderColumnsTitle(item) {
+	const { title } = item;
+	const ellipsis = typeof item?.ellipsis === "boolean" ? item?.ellipsis : item?.ellipsis?.showTitle;
+	if (title && typeof title === "function") return createVNode(Fragment, null, [title(item, "table", createVNode(LabelIconTip, {
+		"label": null,
+		"tooltip": item.tooltip
+	}, null))]);
+	return createVNode(LabelIconTip, {
+		"label": title,
+		"tooltip": item.tooltip,
+		"ellipsis": ellipsis
+	}, null);
+}
+/** 判断是否为不可编辑的单元格 */
+function isNotEditableCell(text, record, index, editable) {
+	if (typeof editable === "boolean") return !editable;
+	return editable?.(text, record, index) === false;
+}
+/**
+* 默认的 filter 方法
+*
+* @param value
+* @param record
+* @param dataIndex
+*/
+function defaultOnFilter(value, record, dataIndex) {
+	const recordElement = Array.isArray(dataIndex) ? get(record, dataIndex) : record[dataIndex];
+	return String(String(recordElement)) === String(value);
+}
+const EditableOptionActions = /* @__PURE__ */ defineComponent((props, { expose }) => {
+	expose({});
+	return () => {
+		const { editableUtils, rowData, index, columnProps, marginSM, type } = props;
+		const actions = editableUtils?.actionRender?.({
+			...rowData,
+			index
+		});
+		if (!actions) return null;
+		return type === "table" ? createVNode(Space, {
+			"align": "center",
+			"size": 0,
+			"separator": createVNode(Divider, { "orientation": "vertical" }, null)
+		}, _isSlot(actions) ? actions : { default: () => [actions] }) : createVNode(Flex, {
+			"align": "center",
+			"gap": marginSM,
+			"justify": columnProps?.align === "center" ? "center" : "flex-start"
+		}, _isSlot(actions) ? actions : { default: () => [actions] });
+	};
+}, {
+	name: "EditableOptionActions",
+	inheritAttrs: false,
+	props: [
+		"editableUtils",
+		"rowData",
+		"index",
+		"columnProps",
+		"type",
+		"marginSM"
+	]
+});
+/**
+* 这个组件负责单元格的具体渲染
+*
+*/
+function columnRender({ columnProps, text, rowData, index, columnEmptyText, counter, type, marginSM, subName, editableUtils }) {
+	const { action, prefixName } = counter;
+	const { isEditable, recordKey } = editableUtils?.isEditable?.({
+		...rowData,
+		index
+	});
+	const { renderText = (val) => val } = columnProps;
+	const renderTextStr = renderText(text, rowData, index, action?.value);
+	const mode = isEditable && !isNotEditableCell(text, rowData, index, columnProps?.editable) ? "edit" : "read";
+	const textDom = cellRenderToFromItem({
+		text: renderTextStr,
+		valueType: columnProps.valueType || "text",
+		index,
+		rowData,
+		subName,
+		columnProps: {
+			...columnProps,
+			entity: rowData
+		},
+		counter,
+		columnEmptyText,
+		type,
+		recordKey,
+		mode,
+		prefixName: prefixName?.value,
+		editableUtils
+	});
+	const dom = mode === "edit" ? textDom : genCopyable(textDom, columnProps, renderTextStr, text);
+	/** 如果是编辑模式，并且 renderFormItem 存在直接走 renderFormItem */
+	if (mode === "edit") {
+		if (columnProps.valueType === "option") return createVNode(EditableOptionActions, {
+			"type": type,
+			"marginSM": marginSM,
+			"columnProps": columnProps,
+			"editableUtils": editableUtils,
+			"rowData": rowData,
+			"index": columnProps.index || index
+		}, null);
+		return dom;
+	}
+	if (!columnProps.render) {
+		const isVueRenderNode = isVNode(dom) || ["string", "number"].includes(typeof dom);
+		return !isNil(dom) && isVueRenderNode ? dom : null;
+	}
+	const renderDom = columnProps.render(dom, rowData, index, {
+		...action?.value,
+		...editableUtils
+	}, {
+		...columnProps,
+		isEditable,
+		type: "table"
+	});
+	if (isMergeCell(renderDom)) return renderDom;
+	if (renderDom && columnProps.valueType === "option" && Array.isArray(renderDom)) return type === "table" ? createVNode(Space, {
+		"align": "center",
+		"size": 0,
+		"separator": createVNode(Divider, { "orientation": "vertical" }, null)
+	}, _isSlot(renderDom) ? renderDom : { default: () => [renderDom] }) : createVNode(Flex, {
+		"gap": 8,
+		"align": "center",
+		"justify": "flex-start"
+	}, _isSlot(renderDom) ? renderDom : { default: () => [renderDom] });
+	return renderDom;
+}
+//#endregion
+export { columnRender as default, defaultOnFilter, isMergeCell, renderColumnsTitle };

package/dist/utils/columnSort.d.ts

@@ -0,0 +1,7 @@
+import { ColumnsState } from "../Store/Provide.js";
+import { ProColumns } from "../typing.js";
+
+//#region src/utils/columnSort.d.ts
+declare function columnSort<T, ValueType>(columnsMap?: Record<string, ColumnsState>): (a: ProColumns<T, ValueType>, b: ProColumns<T, ValueType>) => number;
+//#endregion
+export { columnSort };

package/dist/utils/columnSort.js

@@ -0,0 +1,17 @@
+//#region src/utils/columnSort.ts
+function columnSort(columnsMap) {
+	return (a, b) => {
+		const { fixed: aFixed, index: aIndex } = a;
+		const { fixed: bFixed, index: bIndex } = b;
+		if (aFixed === "start" && bFixed !== "start" || bFixed === "end" && aFixed !== "end") return -2;
+		if (bFixed === "start" && aFixed !== "start" || aFixed === "end" && bFixed !== "end") return 2;
+		const aKey = a.key || `${aIndex}`;
+		const bKey = b.key || `${bIndex}`;
+		if (columnsMap) {
+			if (columnsMap[aKey]?.order || columnsMap[bKey]?.order) return (columnsMap[aKey]?.order || 0) - (columnsMap[bKey]?.order || 0);
+		}
+		return (a.index || 0) - (b.index || 0);
+	};
+}
+//#endregion
+export { columnSort };