@qin-ui/antd-vue-pro 2.5.2 → 2.6.0

package/es/index.js

@@ -1,7 +1,7 @@
 import "./antd-vue-pro.css";
-import { defineComponent, createBlock, renderSlot, openBlock, resolveDynamicComponent, normalizeProps, mergeProps, withCtx, createElementBlock, Fragment, createTextVNode, toDisplayString, inject, computed, toValue, ref, createCommentVNode, createSlots, renderList, createVNode, toRaw, resolveComponent, unref, provide, useSlots, shallowRef, onUpdated, triggerRef, createElementVNode, withModifiers, normalizeStyle, nextTick, mergeModels, useModel, watch, getCurrentInstance, onMounted, normalizeClass, guardReactiveProps } from "vue";
-import { Transfer, TreeSelect, Slider, Switch, RadioGroup, CheckboxGroup, TimePicker, RangePicker, DatePicker, Cascader, Select, InputNumber, InputPassword, InputSearch, Textarea, Input, Row, Col, FormItem, Form, Space, Button, theme, Dropdown, Menu, MenuItem, Checkbox, MenuDivider, Table } from "ant-design-vue";
-import { useForm as useForm$1, resolveLocaleName, zhTW, enUS, zhCN, format, useReactiveAttrs, cloneDeep, getObject, InjectionFormSlotsKey, isPlainObject, resolveFieldIdentity, isObjectItem, toPath, createFormProxy, InjectionFormKey, omitBy, camelizeProperties, useFields as useFields$1, useFormRef as useFormRef$1, useSearchFormExpand, pick, isPromise, useTable as useTable$1, omit } from "@qin-ui/pro-components-core";
+import { defineComponent, createBlock, renderSlot, openBlock, resolveDynamicComponent, normalizeProps, mergeProps, withCtx, createElementBlock, Fragment, createTextVNode, toDisplayString, inject, computed, toValue, ref, onBeforeUnmount, createCommentVNode, createSlots, renderList, createVNode, watch, h, toRaw, unref, provide, useSlots, shallowRef, onUpdated, triggerRef, createElementVNode, withModifiers, normalizeStyle, nextTick, mergeModels, useModel, useAttrs, Teleport, onDeactivated, onMounted, getCurrentInstance, normalizeClass, guardReactiveProps } from "vue";
+import { Transfer, TreeSelect, Slider, Switch, RadioGroup, CheckboxGroup, TimePicker, RangePicker, DatePicker, Cascader, Select, InputNumber, InputPassword, InputSearch, Textarea, Input, FormItem, Col, Row, Form, Space, Button, theme, Dropdown, Menu, MenuItem, Checkbox, MenuDivider, Tooltip, Table } from "ant-design-vue";
+import { useForm as useForm$1, resolveLocaleName, zhTW, enUS, zhCN, format, useReactiveAttrs, cloneDeep, getObject, InjectionFormSlotsKey, isPlainObject, resolveFieldIdentity, toPath, isObjectItem, InjectionFormKey, createFormProxy, omitBy, camelizeProperties, useFields as useFields$1, useFormRef as useFormRef$1, useSearchFormExpand, pick, isPromise, useTable as useTable$1, omit } from "@qin-ui/pro-components-core";
 import { enUS as enUS2, useFormData, zhCN as zhCN2, zhTW as zhTW2 } from "@qin-ui/pro-components-core";
 import { useConfigContextInject } from "ant-design-vue/es/config-provider/context";
 import { useInjectFormItemContext, useProvideFormItemContext } from "ant-design-vue/es/form/FormItemContext";
@@ -154,7 +154,7 @@ const ensureInjectConfig = (key) => {
   DYNAMIC_INJECT_CONFIG[key] = created;
   return created;
 };
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   ...{ name: "ContainerFragment", inheritAttrs: false },
   __name: "index",
   props: {
@@ -172,7 +172,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   ...{ name: "SlotComponent", inheritAttrs: false },
   __name: "index",
   props: {
@@ -265,7 +265,7 @@ const useLocale = () => {
   };
   return { t, lang };
 };
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   ...{ name: "BaseField", inheritAttrs: false },
   __name: "index",
   props: {
@@ -278,6 +278,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
       // 原始值直接传递，引用值克隆快照
       typeof val === "object" && val !== null ? cloneDeep(val) : val
     );
+    const isSameValue = (a, b) => a === b || a !== a && b !== b;
     const props = __props;
     const { t } = useLocale();
     const form = useForm(false);
@@ -291,9 +292,21 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
       },
       clearValidate: formItemContext.clearValidate
     });
+    let pendingChange = false;
+    let pendingChangeValue;
     const triggerFormItemChange = (value2) => {
-      emit("field-value-change", value2);
+      pendingChangeValue = value2;
+      if (pendingChange) return;
+      pendingChange = true;
+      queueMicrotask(() => {
+        if (!pendingChange) return;
+        pendingChange = false;
+        emit("field-value-change", pendingChangeValue);
+      });
     };
+    onBeforeUnmount(() => {
+      pendingChange = false;
+    });
     const attrs = useReactiveAttrs();
     const pickerVal = attrs.picker;
     const injectConfigKey = typeof props.component === "string" ? [props.component, pickerVal].filter(Boolean).join(".") : "";
@@ -315,12 +328,17 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
         let newVal = val;
         const { valueFormatter } = groupedAttrs.value;
         const setFormatter = typeof valueFormatter === "function" ? valueFormatter : typeof valueFormatter === "object" && typeof (valueFormatter == null ? void 0 : valueFormatter.set) === "function" ? valueFormatter.set : void 0;
+        const oldVal = (_a = form.getFormData) == null ? void 0 : _a.call(form, props.path);
         if (setFormatter) {
-          const oldVal = setFormatter.length > 1 ? cloneDeepIfObject((_a = form.getFormData) == null ? void 0 : _a.call(form, props.path)) : void 0;
-          newVal = setFormatter(val, oldVal);
+          newVal = setFormatter(
+            val,
+            setFormatter.length > 1 ? cloneDeepIfObject(oldVal) : void 0
+          );
+        }
+        if (!isSameValue(newVal, oldVal)) {
+          (_b = form.setFormData) == null ? void 0 : _b.call(form, props.path, newVal);
+          triggerFormItemChange(newVal);
         }
-        (_b = form.setFormData) == null ? void 0 : _b.call(form, props.path, newVal);
-        triggerFormItemChange(newVal);
         const { onUpdateValue } = groupedAttrs.value;
         if (typeof onUpdateValue === "function") {
           onUpdateValue(val);
@@ -378,7 +396,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
       getComponentComputedProps: () => groupedAttrs.value.attrs
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$e, {
+      return openBlock(), createBlock(_sfc_main$g, {
         component: groupedAttrs.value.componentContainer,
         path: props.path
       }, {
@@ -394,7 +412,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
               return {
                 name,
                 fn: withCtx((scoped) => [
-                  createVNode(_sfc_main$d, mergeProps({
+                  createVNode(_sfc_main$f, mergeProps({
                     path: props.path
                   }, scoped, { component: slot }), null, 16, ["path", "component"])
                 ])
@@ -407,8 +425,206 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const formItemPropKeys = Object.keys(formItemProps()).concat([
+  "formItemContainer"
+]);
+const gridItemPropKeys = Object.keys(colProps());
+const gridItemPropKeySet = new Set(gridItemPropKeys);
+const formItemPropKeySet = new Set(formItemPropKeys);
+const formItemSlotKeySet = new Set(FORM_ITEM_SLOT_KEYS);
+const groupField = (field, rawInject) => {
+  let gridItemProps2 = {};
+  let formItemProps2 = {};
+  const componentProps = { slots: {} };
+  const formItemSlots = {};
+  if (isPlainObject(field)) {
+    const { path: _path, name: _name, fields, formItemClass, formItemStyle, hidden, span, getFormItemRef, getComponentRef, getFormItemComputedProps, getComponentComputedProps, slots = {}, formItemDataAttrs = {}, componentDataAttrs = {}, extraProps, formItemContainer, ...rest } = field;
+    const { class: injectClassName, style: injectStyle, span: injectSpan, xs, sm, md, lg, xl, xxl, formItemContainer: injectFormItemContainer, ...injectRest } = rawInject;
+    const initGridItemProps = span || span === 0 ? { span } : { xs, sm, md, lg, xl, xxl, span: injectSpan };
+    gridItemProps2 = fields ? { ...initGridItemProps, span: span ?? 24 } : initGridItemProps;
+    const container = formItemContainer ?? injectFormItemContainer;
+    formItemProps2 = mergeProps(
+      injectRest,
+      { class: injectClassName, style: injectStyle },
+      { class: toValue(formItemClass), style: toValue(formItemStyle) },
+      formItemDataAttrs
+    );
+    Object.keys(rest).forEach((k) => {
+      if (gridItemPropKeySet.has(k)) {
+        gridItemProps2[k] = rest[k];
+      } else if (formItemPropKeySet.has(k)) {
+        formItemProps2[k] = rest[k];
+      } else {
+        componentProps[k] = rest[k];
+      }
+    });
+    Object.assign(componentProps, componentDataAttrs);
+    Object.keys(slots).forEach((k) => {
+      if (formItemSlotKeySet.has(k)) {
+        formItemSlots[k] = slots[k];
+      } else {
+        componentProps.slots[k] = slots[k];
+      }
+    });
+    if (formItemSlots.label && formItemProps2.label !== void 0) {
+      delete formItemProps2.label;
+    }
+    return {
+      path: resolveFieldIdentity(field),
+      gridItemProps: gridItemProps2,
+      formItemProps: formItemProps2,
+      formItemSlots,
+      componentProps,
+      formItemContainer: container,
+      rawField: field
+    };
+  }
+  return {
+    path: resolveFieldIdentity(field),
+    gridItemProps: gridItemProps2,
+    formItemProps: formItemProps2,
+    formItemSlots,
+    componentProps,
+    rawField: field
+  };
+};
+function useGroupedField(field) {
+  const config = INJECT_CONFIG["pro-form-item"];
+  const injectFormItemProps = inject(config.injectionKey, config.default);
+  return computed(
+    () => groupField(toValue(field), toValue(injectFormItemProps) || {})
+  );
+}
+const _sfc_main$d = defineComponent({
+  name: "BaseFormItem",
+  inheritAttrs: false,
+  props: {
+    /** 字段配置 */
+    field: { type: Object, required: true },
+    /** 是否启用网格布局 */
+    grid: {
+      type: [Boolean, Object],
+      default: void 0
+    },
+    /** 上层下发的禁用状态 */
+    disabled: { type: Boolean, default: void 0 },
+    /** FormItem 实例登记回调 */
+    setFormItemRef: {
+      type: Function,
+      default: void 0
+    },
+    /** 控件实例登记回调 */
+    setComponentRef: {
+      type: Function,
+      default: void 0
+    }
+  },
+  setup(props) {
+    const grouped = useGroupedField(() => props.field);
+    const enableGrid = computed(() => !!props.grid);
+    const componentKey = computed(() => {
+      const field = props.field;
+      const component = toValue(field.component);
+      if (typeof component !== "string") return "component-object";
+      return `string:${component}:${toValue(field.picker) ?? ""}`;
+    });
+    let formItemInstance;
+    const setItemRef = (el) => {
+      var _a;
+      formItemInstance = el;
+      (_a = props.setFormItemRef) == null ? void 0 : _a.call(
+        props,
+        props.field,
+        el,
+        () => grouped.value.formItemProps
+      );
+    };
+    const setFieldRef = (el) => {
+      var _a;
+      (_a = props.setComponentRef) == null ? void 0 : _a.call(props, props.field, el);
+    };
+    watch(
+      () => props.field,
+      (next, prev) => {
+        var _a, _b;
+        if (!prev || prev === next) return;
+        (_a = props.setFormItemRef) == null ? void 0 : _a.call(props, prev, null, () => grouped.value.formItemProps);
+        (_b = props.setComponentRef) == null ? void 0 : _b.call(props, prev, null);
+      },
+      { flush: "pre" }
+    );
+    const onFieldValueChange = () => {
+      var _a, _b;
+      if (((_a = grouped.value.formItemProps) == null ? void 0 : _a.autoLink) === false) return;
+      (_b = formItemInstance == null ? void 0 : formItemInstance.onFieldChange) == null ? void 0 : _b.call(formItemInstance);
+    };
+    const withContainer = (node, component, containerProps) => component ? h(component, containerProps, { default: () => node }) : node;
+    const renderFormItemSlots = (groupedField) => {
+      const slots = {};
+      Object.entries(groupedField.formItemSlots).forEach(([name, slot]) => {
+        slots[name] = (scope) => h(_sfc_main$f, {
+          path: groupedField.path,
+          component: slot,
+          ...scope || {}
+        });
+      });
+      slots.default = () => {
+        const field = props.field;
+        if (field.fields) {
+          return h(_sfc_main$c, {
+            grid: field.grid ?? props.grid,
+            fields: field.fields,
+            disabled: toValue(field.disabled)
+          });
+        }
+        return h(_sfc_main$e, {
+          key: componentKey.value,
+          ref: setFieldRef,
+          ...groupedField.componentProps,
+          path: groupedField.path,
+          onFieldValueChange
+        });
+      };
+      return slots;
+    };
+    return () => {
+      const groupedField = grouped.value;
+      let node = h(
+        FormItem,
+        {
+          ...groupedField.formItemProps,
+          ref: setItemRef,
+          name: toPath(groupedField.path),
+          path: groupedField.path
+        },
+        renderFormItemSlots(groupedField)
+      );
+      node = withContainer(node, groupedField.formItemContainer, {
+        path: groupedField.path
+      });
+      node = withContainer(
+        node,
+        enableGrid.value ? Col : void 0,
+        groupedField.gridItemProps
+      );
+      return node;
+    };
+  }
+});
 const fieldKeyMap = /* @__PURE__ */ new WeakMap();
 let fieldKeySeed = 0;
+const rowKeyMap = /* @__PURE__ */ new WeakMap();
+let rowKeySeed = 0;
+const getRowKey = (row) => {
+  const raw = toRaw(row);
+  let key = rowKeyMap.get(raw);
+  if (key === void 0) {
+    key = ++rowKeySeed;
+    rowKeyMap.set(raw, key);
+  }
+  return key;
+};
+const isIndexSegment = (segment) => /^(?:0|[1-9]\d*)$/.test(segment);
 const getFieldKey = (field) => {
   if (field === null || typeof field !== "object")
     return `raw_${String(field)}`;
@@ -420,82 +636,35 @@ const getFieldKey = (field) => {
   }
   return key;
 };
-const formItemPropKeys = Object.keys(formItemProps()).concat([
-  "formItemContainer"
-]);
-const gridItemPropKeys = Object.keys(colProps());
-const gridItemPropKeySet = new Set(gridItemPropKeys);
-const formItemPropKeySet = new Set(formItemPropKeys);
-const formItemSlotKeySet = new Set(FORM_ITEM_SLOT_KEYS);
-function useGroupFieldAttrs(validFields) {
-  const config = INJECT_CONFIG["pro-form-item"];
-  const injectFormItemProps = inject(config.injectionKey, config.default);
-  return computed(() => {
-    const rawInject = toValue(injectFormItemProps) || {};
-    return validFields.value.map((field) => {
-      let gridItemProps2 = {};
-      let formItemProps2 = {};
-      const componentProps = { slots: {} };
-      const formItemSlots = {};
-      if (isPlainObject(field)) {
-        const { path: _path, name: _name, fields, formItemClass, formItemStyle, hidden, span, getFormItemRef, getComponentRef, getFormItemComputedProps, getComponentComputedProps, slots = {}, formItemDataAttrs = {}, componentDataAttrs = {}, extraProps, formItemContainer, ...rest } = field;
-        const { class: injectClassName, style: injectStyle, span: injectSpan, xs, sm, md, lg, xl, xxl, formItemContainer: injectFormItemContainer, ...injectRest } = rawInject;
-        const initGridItemProps = span || span === 0 ? { span } : { xs, sm, md, lg, xl, xxl, span: injectSpan };
-        gridItemProps2 = fields ? { ...initGridItemProps, span: span ?? 24 } : initGridItemProps;
-        const container = formItemContainer ?? injectFormItemContainer;
-        formItemProps2 = mergeProps(
-          injectRest,
-          { class: injectClassName, style: injectStyle },
-          { class: toValue(formItemClass), style: toValue(formItemStyle) },
-          formItemDataAttrs
-        );
-        Object.keys(rest).forEach((k) => {
-          if (gridItemPropKeySet.has(k)) {
-            gridItemProps2[k] = rest[k];
-          } else if (formItemPropKeySet.has(k)) {
-            formItemProps2[k] = rest[k];
-          } else {
-            componentProps[k] = rest[k];
-          }
-        });
-        Object.assign(componentProps, componentDataAttrs);
-        Object.keys(slots).forEach((k) => {
-          if (formItemSlotKeySet.has(k)) {
-            formItemSlots[k] = slots[k];
-          } else {
-            componentProps.slots[k] = slots[k];
-          }
-        });
-        if (formItemSlots.label && formItemProps2.label !== void 0) {
-          delete formItemProps2.label;
-        }
-        const raw2 = resolveFieldIdentity(field);
-        return {
-          path: raw2,
-          gridItemProps: gridItemProps2,
-          formItemProps: formItemProps2,
-          formItemSlots,
-          componentProps,
-          formItemContainer: container,
-          rawField: field,
-          renderKey: getFieldKey(field)
-        };
-      }
-      const raw = resolveFieldIdentity(field);
-      return {
-        path: raw,
-        gridItemProps: gridItemProps2,
-        formItemProps: formItemProps2,
-        formItemSlots,
-        componentProps,
-        rawField: field,
-        renderKey: getFieldKey(field)
-      };
-    });
-  });
-}
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
-  ...{ name: "BaseFormItem", inheritAttrs: false },
+const getFieldDataKey = (field, rawFormData) => {
+  const path = resolveFieldIdentity(field);
+  if (!path || rawFormData === null || rawFormData === void 0) {
+    return getFieldKey(field);
+  }
+  const segments = toPath(path);
+  let node = rawFormData;
+  const rowIds = [];
+  let lastRowIndex = -1;
+  for (let i = 0; i < segments.length; i++) {
+    if (Array.isArray(node)) {
+      const segment = segments[i];
+      if (!isIndexSegment(segment)) break;
+      const element = node[Number(segment)];
+      if (element === null || typeof element !== "object") break;
+      rowIds.push(getRowKey(toRaw(element)));
+      lastRowIndex = i;
+      node = element;
+      continue;
+    }
+    if (node === null || typeof node !== "object") break;
+    node = node[segments[i]];
+  }
+  if (lastRowIndex === -1) return getFieldKey(field);
+  const rest = segments.slice(lastRowIndex + 1).join(".");
+  return `data:${rowIds.join("/")}:${rest}`;
+};
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
+  ...{ name: "BaseFormItems", inheritAttrs: false },
   __name: "index",
   props: {
     grid: { type: [Boolean, Object], default: void 0 },
@@ -512,6 +681,20 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
         )
       )
     );
+    const injectedForm = inject(InjectionFormKey, void 0);
+    const renderedFields = computed(() => {
+      const rawFormData = (injectedForm == null ? void 0 : injectedForm.formData) ? toRaw(injectedForm.formData) : void 0;
+      const seen = /* @__PURE__ */ new Map();
+      return validFields.value.map((field) => {
+        const baseKey = getFieldDataKey(field, rawFormData);
+        const count = seen.get(baseKey) ?? 0;
+        seen.set(baseKey, count + 1);
+        return {
+          field,
+          key: count === 0 ? baseKey : `${String(baseKey)}#${count}`
+        };
+      });
+    });
     useProviderDisabled(computed(() => props.disabled));
     const config = INJECT_CONFIG["pro-form"];
     const injectFormConfig = inject(config.injectionKey, config.default);
@@ -545,20 +728,14 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
         }
       }
     };
-    const onFieldValueChange = (item) => {
-      var _a, _b;
-      if (((_a = item.formItemProps) == null ? void 0 : _a.autoLink) === false) return;
-      const instance = formItemInstanceMap.get(toRaw(item.rawField));
-      (_b = instance == null ? void 0 : instance.onFieldChange) == null ? void 0 : _b.call(instance);
-    };
-    const setFormItemRef = (field, el, formItemProps2) => {
+    const setFormItemRef = (field, el, getFormItemProps) => {
       if (!field || typeof field !== "object") return;
       const raw = toRaw(field);
       if (el) {
         formItemInstanceMap.set(raw, el);
         defineFieldAccessors(raw, {
           getFormItemRef: () => formItemInstanceMap.get(raw),
-          getFormItemComputedProps: () => formItemProps2
+          getFormItemComputedProps: getFormItemProps
         });
       } else {
         formItemInstanceMap.delete(raw);
@@ -587,73 +764,35 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
         delete raw.getComponentComputedProps;
       }
     };
-    const groupedFields = useGroupFieldAttrs(validFields);
     return (_ctx, _cache) => {
-      const _component_BaseFormItem = resolveComponent("BaseFormItem");
-      return openBlock(), createBlock(_sfc_main$e, mergeProps({
-        component: enableGrid.value ? unref(Row) : void 0
-      }, computedGridProps.value), {
+      return enableGrid.value ? (openBlock(), createBlock(unref(Row), normalizeProps(mergeProps({ key: 0 }, computedGridProps.value)), {
         default: withCtx(() => [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(groupedFields), (item) => {
-            return openBlock(), createBlock(_sfc_main$e, mergeProps({
-              key: item.renderKey,
-              component: enableGrid.value ? unref(Col) : void 0
-            }, { ref_for: true }, item.gridItemProps), {
-              default: withCtx(() => [
-                createVNode(_sfc_main$e, {
-                  component: item.formItemContainer,
-                  path: item.path
-                }, {
-                  default: withCtx(() => [
-                    createVNode(unref(FormItem), mergeProps({ ref_for: true }, item.formItemProps, {
-                      ref_for: true,
-                      ref: (el) => setFormItemRef(item.rawField, el, item.formItemProps),
-                      name: unref(toPath)(item.path),
-                      path: item.path
-                    }), createSlots({
-                      default: withCtx(() => [
-                        item.rawField.fields ? (openBlock(), createBlock(_component_BaseFormItem, {
-                          key: 0,
-                          grid: item.rawField.grid ?? props.grid,
-                          fields: item.rawField.fields,
-                          disabled: toValue(item.rawField.disabled)
-                        }, null, 8, ["grid", "fields", "disabled"])) : (openBlock(), createBlock(_sfc_main$c, mergeProps({
-                          key: 1,
-                          ref_for: true,
-                          ref: (el) => setComponentRef(item.rawField, el)
-                        }, { ref_for: true }, item.componentProps, {
-                          path: item.path,
-                          onFieldValueChange: ($event) => onFieldValueChange(item)
-                        }), null, 16, ["path", "onFieldValueChange"]))
-                      ]),
-                      _: 2
-                    }, [
-                      renderList(item.formItemSlots, (slot, name) => {
-                        return {
-                          name,
-                          fn: withCtx((scoped) => [
-                            createVNode(_sfc_main$d, mergeProps({
-                              path: item.path,
-                              component: slot
-                            }, { ref_for: true }, scoped), null, 16, ["path", "component"])
-                          ])
-                        };
-                      })
-                    ]), 1040, ["name", "path"])
-                  ]),
-                  _: 2
-                }, 1032, ["component", "path"])
-              ]),
-              _: 2
-            }, 1040, ["component"]);
+          (openBlock(true), createElementBlock(Fragment, null, renderList(renderedFields.value, (item) => {
+            return openBlock(), createBlock(_sfc_main$d, {
+              key: item.key,
+              field: item.field,
+              grid: props.grid,
+              disabled: props.disabled,
+              "set-form-item-ref": setFormItemRef,
+              "set-component-ref": setComponentRef
+            }, null, 8, ["field", "grid", "disabled"]);
           }), 128))
         ]),
         _: 1
-      }, 16, ["component"]);
+      }, 16)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(renderedFields.value, (item) => {
+        return openBlock(), createBlock(_sfc_main$d, {
+          key: item.key,
+          field: item.field,
+          grid: props.grid,
+          disabled: props.disabled,
+          "set-form-item-ref": setFormItemRef,
+          "set-component-ref": setComponentRef
+        }, null, 8, ["field", "grid", "disabled"]);
+      }), 128));
     };
   }
 });
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   ...{ name: "ProForm", inheritAttrs: false },
   __name: "index",
   props: {
@@ -716,7 +855,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
         model: formData.value
       }, formAttrs.value, { class: "pro-form" }), {
         default: withCtx(() => [
-          createVNode(_sfc_main$b, {
+          createVNode(_sfc_main$c, {
             fields: fields.value,
             grid: props.grid
           }, null, 8, ["fields", "grid"]),
@@ -740,7 +879,7 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const _sfc_main$9 = {};
+const _sfc_main$a = {};
 const _hoisted_1$3 = {
   focusable: "false",
   "data-icon": "down",
@@ -755,8 +894,8 @@ function _sfc_render$2(_ctx, _cache) {
     createElementVNode("path", { d: "M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z" }, null, -1)
   ])]);
 }
-const DownOutlined = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$2]]);
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const DownOutlined = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$2]]);
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   ...{ name: "SearchForm" },
   __name: "SearchForm",
   props: {
@@ -814,7 +953,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
       emitSearch();
     };
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$a, mergeProps(layoutProps.value, {
+      return openBlock(), createBlock(_sfc_main$b, mergeProps(layoutProps.value, {
         form: props.form,
         class: "pro-table_search-form transition",
         onSubmit: withModifiers(onSearchSubmit, ["prevent"])
@@ -895,8 +1034,8 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const SearchForm = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-bf6cca54"]]);
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const SearchForm = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-bf6cca54"]]);
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "DefaultSearchFormContainer",
   setup(__props) {
     const { token } = theme.useToken();
@@ -910,8 +1049,8 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const DefaultSearchFormContainer = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-570a1898"]]);
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const DefaultSearchFormContainer = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-570a1898"]]);
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "DefaultTableContainer",
   setup(__props) {
     const { token } = theme.useToken();
@@ -925,8 +1064,8 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const DefaultTableContainer = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-e5c97b2f"]]);
-const _sfc_main$5 = {};
+const DefaultTableContainer = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-e5c97b2f"]]);
+const _sfc_main$6 = {};
 const _hoisted_1$2 = {
   focusable: "false",
   "data-icon": "column-height",
@@ -941,8 +1080,8 @@ function _sfc_render$1(_ctx, _cache) {
     createElementVNode("path", { d: "M840 836H184c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h656c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zm0-724H184c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h656c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zM610.8 378c6 0 9.4-7 5.7-11.7L515.7 238.7a7.14 7.14 0 00-11.3 0L403.6 366.3a7.23 7.23 0 005.7 11.7H476v268h-62.8c-6 0-9.4 7-5.7 11.7l100.8 127.5c2.9 3.7 8.5 3.7 11.3 0l100.8-127.5c3.7-4.7.4-11.7-5.7-11.7H548V378h62.8z" }, null, -1)
   ])]);
 }
-const ColumnHeightOutlined = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["render", _sfc_render$1]]);
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const ColumnHeightOutlined = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render$1]]);
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "SizeControl",
   props: /* @__PURE__ */ mergeModels({
     effectiveSize: { default: void 0 }
@@ -999,8 +1138,8 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const SizeControl = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-950f061f"]]);
-const _sfc_main$3 = {};
+const SizeControl = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-950f061f"]]);
+const _sfc_main$4 = {};
 const _hoisted_1$1 = {
   focusable: "false",
   "data-icon": "filter",
@@ -1015,8 +1154,8 @@ function _sfc_render(_ctx, _cache) {
     createElementVNode("path", { d: "M880.1 154H143.9c-24.5 0-39.8 26.7-27.5 48L349 597.4V838c0 17.7 14.2 32 31.8 32h262.4c17.6 0 31.8-14.3 31.8-32V597.4L907.7 202c12.2-21.3-3.1-48-27.6-48zM603.4 798H420.6V642h182.9v156zm9.6-236.6l-9.5 16.6h-183l-9.5-16.6L212.7 226h598.6L613 561.4z" }, null, -1)
   ])]);
 }
-const FilterOutlined = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render]]);
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const FilterOutlined = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render]]);
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "ColumnControl",
   props: {
     columns: {},
@@ -1181,7 +1320,303 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const ColumnControl = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-58650608"]]);
+const ColumnControl = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-58650608"]]);
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  ...{ name: "TableEllipsisTooltip", inheritAttrs: false },
+  __name: "TableEllipsisTooltip",
+  props: {
+    open: { type: Boolean, default: false },
+    content: { default: "" },
+    anchorStyle: { default: () => ({
+      position: "fixed",
+      pointerEvents: "none",
+      opacity: 0
+    }) },
+    container: { type: Function, default: () => void 0 }
+  },
+  setup(__props) {
+    const props = __props;
+    const attrs = useAttrs();
+    const HostTooltip = Tooltip;
+    const tooltipRef = ref(null);
+    const forceAlign = async () => {
+      var _a;
+      if (!props.open) return;
+      await nextTick();
+      const instance = tooltipRef.value;
+      (_a = (instance == null ? void 0 : instance.forceAlign) ?? (instance == null ? void 0 : instance.forcePopupAlign)) == null ? void 0 : _a();
+    };
+    watch(() => props.anchorStyle, forceAlign, { deep: true });
+    watch(
+      () => props.open,
+      (value) => {
+        if (value) forceAlign();
+      }
+    );
+    const getContainerNode = () => {
+      var _a;
+      const container = (_a = props.container) == null ? void 0 : _a.call(props);
+      if (container) return container;
+      return typeof document !== "undefined" ? document.body : void 0;
+    };
+    const getPopupContainer2 = () => getContainerNode() ?? document.body;
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(Teleport, {
+        to: getContainerNode() ?? "body"
+      }, [
+        createVNode(unref(HostTooltip), mergeProps(unref(attrs), {
+          ref_key: "tooltipRef",
+          ref: tooltipRef,
+          open: __props.open,
+          title: __props.content,
+          trigger: [],
+          "get-popup-container": getPopupContainer2
+        }), {
+          default: withCtx(() => [
+            createElementVNode("span", {
+              class: "pro-table_ellipsis-tooltip-anchor",
+              style: normalizeStyle(__props.anchorStyle),
+              "aria-hidden": "true"
+            }, null, 4)
+          ]),
+          _: 1
+        }, 16, ["open", "title"])
+      ], 8, ["to"]);
+    };
+  }
+});
+const ELLIPSIS_TOOLTIP_CELL_ATTR = "data-pro-table-ellipsis";
+const PRO_TABLE_ROOT_ATTR = "data-pro-table-root";
+const ANCHOR_BASE_STYLE = {
+  position: "fixed",
+  pointerEvents: "none",
+  opacity: 0
+};
+const getCellText = (cell) => {
+  const text = cell.innerText || cell.textContent || "";
+  return text.replace(/\s+/g, " ").trim();
+};
+const measureCell = (cell) => {
+  const text = getCellText(cell);
+  return {
+    text,
+    overflow: Boolean(text) && cell.scrollWidth > cell.clientWidth
+  };
+};
+function useEllipsisTooltip(rootRef, enabled, delay, leaveDelay) {
+  const open = ref(false);
+  const content = ref("");
+  const anchorStyle = ref({
+    ...ANCHOR_BASE_STYLE
+  });
+  let activeCell = null;
+  let pendingCell = null;
+  let openTimer = null;
+  let closeTimer = null;
+  const clearOpenTimer = () => {
+    if (openTimer === null) return;
+    clearTimeout(openTimer);
+    openTimer = null;
+    pendingCell = null;
+  };
+  const clearCloseTimer = () => {
+    if (closeTimer === null) return;
+    clearTimeout(closeTimer);
+    closeTimer = null;
+  };
+  const close = () => {
+    clearOpenTimer();
+    clearCloseTimer();
+    open.value = false;
+    activeCell = null;
+  };
+  const getEventRoot = (node) => {
+    var _a;
+    const element = node instanceof Element ? node : node == null ? void 0 : node.parentElement;
+    return ((_a = element == null ? void 0 : element.closest) == null ? void 0 : _a.call(element, `[${PRO_TABLE_ROOT_ATTR}]`)) ?? null;
+  };
+  const getCellFromEvent = (event) => {
+    var _a;
+    const target = event.target;
+    const cell = (_a = target == null ? void 0 : target.closest) == null ? void 0 : _a.call(target, `[${ELLIPSIS_TOOLTIP_CELL_ATTR}]`);
+    if (!(cell instanceof HTMLElement)) return null;
+    const root = rootRef.value;
+    if (!root) return null;
+    if (cell.closest(`[${PRO_TABLE_ROOT_ATTR}]`) !== root) return null;
+    return cell;
+  };
+  const onMouseOver = (event) => {
+    const cell = getCellFromEvent(event);
+    if (!cell) return;
+    clearCloseTimer();
+    if (cell === activeCell || cell === pendingCell) return;
+    close();
+    const measurement = measureCell(cell);
+    if (!measurement.overflow) return;
+    const rect = cell.getBoundingClientRect();
+    if (!rect.width || !rect.height) return;
+    content.value = measurement.text;
+    anchorStyle.value = {
+      ...ANCHOR_BASE_STYLE,
+      left: `${rect.left}px`,
+      top: `${rect.top}px`,
+      width: `${rect.width}px`,
+      height: `${rect.height}px`
+    };
+    pendingCell = cell;
+    openTimer = setTimeout(
+      () => {
+        openTimer = null;
+        pendingCell = null;
+        if (!cell.isConnected) return;
+        activeCell = cell;
+        open.value = true;
+      },
+      Math.max(0, delay.value)
+    );
+  };
+  const onMouseOut = (event) => {
+    if (!activeCell && !pendingCell) return;
+    const owner = activeCell ?? pendingCell;
+    const target = event.target;
+    if (!owner || !target || !owner.contains(target)) return;
+    const related = event.relatedTarget;
+    if (related && owner.contains(related)) {
+      const relatedRoot = getEventRoot(related);
+      if (!relatedRoot || relatedRoot === rootRef.value) return;
+      close();
+      return;
+    }
+    if (pendingCell) {
+      close();
+      return;
+    }
+    clearCloseTimer();
+    const delayMs = Math.max(0, leaveDelay.value);
+    if (delayMs === 0) {
+      close();
+      return;
+    }
+    closeTimer = setTimeout(() => {
+      closeTimer = null;
+      close();
+    }, delayMs);
+  };
+  const onViewportChange = () => close();
+  let listening = false;
+  const addViewportListeners = () => {
+    if (listening || typeof window === "undefined") return;
+    listening = true;
+    window.addEventListener("scroll", onViewportChange, true);
+    window.addEventListener("resize", onViewportChange);
+  };
+  const removeViewportListeners = () => {
+    if (!listening) return;
+    listening = false;
+    window.removeEventListener("scroll", onViewportChange, true);
+    window.removeEventListener("resize", onViewportChange);
+  };
+  onDeactivated(close);
+  onMounted(() => {
+    if (enabled.value) addViewportListeners();
+  });
+  watch(enabled, (value) => {
+    if (value) {
+      addViewportListeners();
+    } else {
+      removeViewportListeners();
+      close();
+    }
+  });
+  onBeforeUnmount(() => {
+    removeViewportListeners();
+    clearOpenTimer();
+    clearCloseTimer();
+  });
+  return {
+    open,
+    content,
+    anchorStyle,
+    onMouseOver,
+    onMouseOut,
+    close
+  };
+}
+function useEllipsisTooltipColumns(getColumns, globalEnabled = () => false) {
+  const originalColumns = /* @__PURE__ */ new WeakMap();
+  const registerColumnClone = (next, source) => {
+    if (next !== source && isObjectItem(next) && !originalColumns.has(next)) {
+      originalColumns.set(next, source);
+    }
+    return next;
+  };
+  const resolveOriginalColumn = (column) => {
+    const raw = toRaw(column);
+    const source = originalColumns.get(raw) ?? raw.__originColumn__;
+    if (!isObjectItem(source)) return column;
+    return originalColumns.get(toRaw(source)) ?? source;
+  };
+  const resolveSorterColumn = (sorter) => sorter && typeof sorter === "object" && sorter.column ? { ...sorter, column: resolveOriginalColumn(sorter.column) } : sorter;
+  const transformColumns = (columns, global, ancestors = /* @__PURE__ */ new Set()) => {
+    const list = [];
+    let changed = false;
+    let hasTooltip = false;
+    for (const column of columns) {
+      if (!isObjectItem(column) || toValue(column.hidden)) {
+        changed = true;
+        continue;
+      }
+      let childChanged = false;
+      let childColumns = column.children;
+      let childHasTooltip = false;
+      if (Array.isArray(column.children) && column.children.length > 0) {
+        if (ancestors.has(column)) {
+          changed = true;
+          continue;
+        }
+        ancestors.add(column);
+        const child = transformColumns(column.children, global, ancestors);
+        ancestors.delete(column);
+        childChanged = child.changed;
+        childColumns = child.columns;
+        childHasTooltip = child.hasTooltip;
+      }
+      const ellipsis = column.ellipsis;
+      const explicit = ellipsis === false ? false : isPlainObject(ellipsis) ? ellipsis.showTooltip : void 0;
+      const tooltipEnabled = explicit === false ? false : global || explicit === true;
+      let next = column;
+      if (childChanged || tooltipEnabled) {
+        const { showTooltip: _showTooltip, ...restEllipsis } = isPlainObject(
+          ellipsis
+        ) ? ellipsis : {};
+        const customCell = column.customCell;
+        next = {
+          ...column,
+          ...childChanged ? { children: childColumns } : {},
+          ...tooltipEnabled ? {
+            ellipsis: { ...restEllipsis, showTitle: false },
+            customCell: (record, rowIndex, cellColumn) => ({
+              ...(customCell == null ? void 0 : customCell(record, rowIndex, cellColumn)) ?? {},
+              [ELLIPSIS_TOOLTIP_CELL_ATTR]: ""
+            })
+          } : {}
+        };
+        registerColumnClone(next, column);
+        changed = true;
+      }
+      if (tooltipEnabled || childHasTooltip) hasTooltip = true;
+      list.push(next);
+    }
+    return { columns: changed ? list : columns, changed, hasTooltip };
+  };
+  const state = computed(() => transformColumns(getColumns(), globalEnabled()));
+  return {
+    columns: computed(() => state.value.columns),
+    hasTooltip: computed(() => state.value.hasTooltip),
+    resolveOriginalColumn,
+    resolveSorterColumn
+  };
+}
 const _hoisted_1 = { class: "pro-table_header" };
 const _hoisted_2 = {
   key: 0,
@@ -1209,7 +1644,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     immediateSearch: { type: Boolean, default: void 0 },
     control: { type: [Boolean, Object], default: void 0 },
     searchFormConfig: { default: void 0 },
-    tableContainer: { type: [Object, Function, Boolean], default: void 0 }
+    tableContainer: { type: [Object, Function, Boolean], default: void 0 },
+    ellipsisTooltip: { type: [Boolean, Object], default: void 0 }
   }, {
     "size": {},
     "sizeModifiers": {},
@@ -1245,6 +1681,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       return rest;
     });
     const attrs = useReactiveAttrs();
+    const rootRef = ref(null);
     const size = useModel(__props, "size");
     const loading = useModel(__props, "loading");
     let searchSequence = 0;
@@ -1332,19 +1769,6 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const effectiveSize = computed(() => {
       return size.value ?? injectAttrs.value.size;
     });
-    const computedTableProps = computed(() => {
-      const merged = {
-        ...injectAttrs.value,
-        ...omitBy(
-          pick(camelAttrs.value, tableProperties),
-          (value) => value === void 0
-        )
-      };
-      delete merged.onChange;
-      merged.size = effectiveSize.value;
-      merged.loading = void 0;
-      return merged;
-    });
     const computedTableContainer = computed(() => {
       const container = props.tableContainer ?? injectProps.value.tableContainer ?? DefaultTableContainer;
       return container ? container : void 0;
@@ -1371,39 +1795,84 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       const needIndex = props.addIndexColumn ?? injectProps.value.addIndexColumn;
       return needIndex ? [indexColumn.value, ...cols] : cols;
     });
-    const filterVisibleColumns = (columns, ancestors = /* @__PURE__ */ new Set()) => {
-      const list = [];
-      let changed = false;
-      for (const column of columns) {
-        if (!isObjectItem(column) || toValue(column.hidden)) {
-          changed = true;
-          continue;
-        }
-        if (Array.isArray(column.children) && column.children.length > 0) {
-          if (ancestors.has(column)) {
-            changed = true;
-            continue;
-          }
-          ancestors.add(column);
-          const filtered = filterVisibleColumns(column.children, ancestors);
-          ancestors.delete(column);
-          if (filtered.changed) {
-            changed = true;
-            list.push({ ...column, children: filtered.list });
-            continue;
-          }
-        }
-        list.push(column);
+    const ellipsisTooltipValue = computed(
+      () => props.ellipsisTooltip ?? injectProps.value.ellipsisTooltip
+    );
+    const ellipsisTooltipConfig = computed(
+      () => typeof ellipsisTooltipValue.value === "object" && ellipsisTooltipValue.value ? ellipsisTooltipValue.value : {}
+    );
+    const ellipsisTooltipGlobal = computed(
+      () => Boolean(ellipsisTooltipValue.value)
+    );
+    const {
+      columns: visibleComputedColumns,
+      hasTooltip: ellipsisTooltipEnabled,
+      resolveOriginalColumn,
+      resolveSorterColumn
+    } = useEllipsisTooltipColumns(
+      () => computedColumns.value,
+      () => ellipsisTooltipGlobal.value
+    );
+    const computedTableProps = computed(() => {
+      const merged = {
+        ...injectAttrs.value,
+        ...omitBy(
+          pick(camelAttrs.value, tableProperties),
+          (value) => value === void 0
+        )
+      };
+      delete merged.onChange;
+      const resizeColumn = merged.onResizeColumn;
+      if (typeof resizeColumn === "function") {
+        merged.onResizeColumn = (width, column) => resizeColumn(width, resolveOriginalColumn(column));
       }
-      return { list, changed };
-    };
-    const visibleComputedColumns = computed(() => {
-      return filterVisibleColumns(computedColumns.value).list;
+      merged.size = effectiveSize.value;
+      merged.loading = void 0;
+      return merged;
     });
+    const ellipsisTooltipContainer = computed(() => {
+      const getPopupContainer2 = ellipsisTooltipConfig.value.getPopupContainer;
+      if (!getPopupContainer2) return void 0;
+      return () => {
+        if (typeof document === "undefined") return void 0;
+        const root = rootRef.value ?? document.body;
+        return getPopupContainer2(root) ?? document.body;
+      };
+    });
+    const ellipsisTooltipDelay = computed(
+      () => Math.max(0, (ellipsisTooltipConfig.value.mouseEnterDelay ?? 0.2) * 1e3)
+    );
+    const ellipsisTooltipLeaveDelay = computed(
+      () => Math.max(0, (ellipsisTooltipConfig.value.mouseLeaveDelay ?? 0.1) * 1e3)
+    );
+    const ellipsisTooltipProps = computed(() => {
+      const config2 = ellipsisTooltipConfig.value;
+      const {
+        getPopupContainer: _getPopupContainer,
+        mouseEnterDelay: _mouseEnterDelay,
+        mouseLeaveDelay: _mouseLeaveDelay,
+        ...rest
+      } = config2;
+      return rest;
+    });
+    const {
+      open: ellipsisTooltipOpen,
+      content: ellipsisTooltipContent,
+      anchorStyle: ellipsisTooltipAnchorStyle,
+      onMouseOver: onEllipsisMouseOver,
+      onMouseOut: onEllipsisMouseOut,
+      close: closeEllipsisTooltip
+    } = useEllipsisTooltip(
+      rootRef,
+      ellipsisTooltipEnabled,
+      ellipsisTooltipDelay,
+      ellipsisTooltipLeaveDelay
+    );
     const computedDataSource = computed(() => {
       var _a;
       return resolveOwnedProp("dataSource") ?? toValue((_a = props.table) == null ? void 0 : _a.dataSource) ?? [];
     });
+    watch([visibleComputedColumns, computedDataSource], closeEllipsisTooltip);
     const computedPagination = computed(() => {
       var _a, _b, _c;
       const attrsPagination = resolveOwnedProp("pagination");
@@ -1445,7 +1914,14 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         );
         if (shadowed.length) warnPaginationShadow(shadowed);
       }
-      (_d = attrs.onChange ?? injectProps.value.onChange) == null ? void 0 : _d(...args);
+      const nextArgs = [...args];
+      const sorterArg = nextArgs[2];
+      if (Array.isArray(sorterArg)) {
+        nextArgs[2] = sorterArg.map(resolveSorterColumn);
+      } else if (sorterArg) {
+        nextArgs[2] = resolveSorterColumn(sorterArg);
+      }
+      (_d = attrs.onChange ?? injectProps.value.onChange) == null ? void 0 : _d(...nextArgs);
       _search();
     };
     const searchFormVisible = computed(() => {
@@ -1485,10 +1961,17 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
+        ref_key: "rootRef",
+        ref: rootRef,
         class: normalizeClass(["pro-table", unref(attrs).class]),
-        style: normalizeStyle(unref(attrs).style)
+        "data-pro-table-root": "",
+        style: normalizeStyle(unref(attrs).style),
+        onMouseover: _cache[1] || (_cache[1] = //@ts-ignore
+        (...args) => unref(onEllipsisMouseOver) && unref(onEllipsisMouseOver)(...args)),
+        onMouseout: _cache[2] || (_cache[2] = //@ts-ignore
+        (...args) => unref(onEllipsisMouseOut) && unref(onEllipsisMouseOut)(...args))
       }, [
-        searchFormVisible.value || _ctx.$slots["search-form"] ? (openBlock(), createBlock(_sfc_main$e, {
+        searchFormVisible.value || _ctx.$slots["search-form"] ? (openBlock(), createBlock(_sfc_main$g, {
           key: 0,
           component: computedSearchFormConfig.value.container
         }, {
@@ -1511,7 +1994,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           }),
           _: 3
         }, 8, ["component"])) : createCommentVNode("", true),
-        createVNode(_sfc_main$e, { component: computedTableContainer.value }, {
+        createVNode(_sfc_main$g, { component: computedTableContainer.value }, {
           default: withCtx(() => [
             createElementVNode("div", _hoisted_1, [
               _ctx.$slots["button-bar"] ? (openBlock(), createElementBlock("div", _hoisted_2, [
@@ -1536,7 +2019,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
               ])) : createCommentVNode("", true)
             ]),
             renderSlot(_ctx.$slots, "table", normalizeProps(guardReactiveProps({
-              columns: visibleComputedColumns.value,
+              columns: unref(visibleComputedColumns),
               dataSource: computedDataSource.value,
               pagination: computedPagination.value,
               loading: loading.value,
@@ -1545,7 +2028,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             })), () => [
               createVNode(unref(Table), mergeProps({ class: "pro-table_content" }, computedTableProps.value, {
                 loading: loading.value,
-                columns: visibleComputedColumns.value,
+                columns: unref(visibleComputedColumns),
                 "data-source": computedDataSource.value,
                 pagination: computedPagination.value,
                 onChange: onTableChange
@@ -1562,12 +2045,19 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             ], true)
           ]),
           _: 3
-        }, 8, ["component"])
-      ], 6);
+        }, 8, ["component"]),
+        unref(ellipsisTooltipEnabled) ? (openBlock(), createBlock(_sfc_main$2, mergeProps({
+          key: 1,
+          open: unref(ellipsisTooltipOpen),
+          content: unref(ellipsisTooltipContent),
+          "anchor-style": unref(ellipsisTooltipAnchorStyle),
+          container: ellipsisTooltipContainer.value
+        }, ellipsisTooltipProps.value), null, 16, ["open", "content", "anchor-style", "container"])) : createCommentVNode("", true)
+      ], 38);
     };
   }
 });
-const ProTable = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-05315c95"]]);
+const ProTable = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-35945e54"]]);
 function useTable(params) {
   return useTable$1(params);
 }
@@ -1655,7 +2145,7 @@ const index = {
    * ```
    */
   install(app) {
-    app.component(_sfc_main$a.name, _sfc_main$a);
+    app.component(_sfc_main$b.name, _sfc_main$b);
     app.component(ProTable.name, ProTable);
     app.component(
       _sfc_main.name ?? "ProComponentProvider",
@@ -1664,12 +2154,12 @@ const index = {
   }
 };
 export {
-  _sfc_main$e as ContainerFragment,
+  _sfc_main$g as ContainerFragment,
   LOCALE_INJECT_KEY,
   _sfc_main as ProComponentProvider,
-  _sfc_main$a as ProForm,
+  _sfc_main$b as ProForm,
   ProTable,
-  _sfc_main$d as SlotComponent,
+  _sfc_main$f as SlotComponent,
   index as default,
   enUS2 as enUS,
   useFields,