ele-admin-plus 1.5.1-beta.3 → 1.5.1-beta.4

package/es/ele-modal-render/types.d.ts

@@ -11,52 +11,59 @@ import type {
 } from '../ele-app/plus';
 
 /**
- * 提供给内容组件的弹窗数据
+ * 弹窗 id
  */
-export interface ModalHolderProvider {
-  /** 关闭弹窗方法 */
-  closeModal: () => void;
-  /** 移除弹窗方法 */
-  removeModal: () => void;
-  /** 修改弹窗属性方法 */
-  setModalProps: (option?: Record<string, any>) => void;
-  /** 弹窗属性 */
-  modalProps: Ref<EleModalPropsAndEmits | EleDrawerPropsAndEmits>;
-}
+export type ModalItemId = string | number;
 
 /**
  * 弹窗类型
  */
-export type ModalItemType = 'modal' | 'drawer';
+export type ModalItemType = 'modal' | 'drawer' | 'custom';
 
 /**
- * 弹窗 id
+ * 弹窗组件属性
  */
-export type ModalItemId = string | number;
+export type ModalItemProps<T extends ModalItemType> = T extends 'drawer'
+  ? EleDrawerPropsAndEmits
+  : T extends 'modal'
+    ? EleModalPropsAndEmits
+    : Record<string, any>;
 
 /**
- * 弹窗内容组件属性
+ * 提供给内容组件的弹窗数据
  */
-export type ModalItemComponentProps =
-  | Record<string, any>
-  | ((data: ModalHolderProvider) => Record<string, any>);
+export interface ModalHolderProvider<T extends ModalItemType> {
+  /** 关闭弹窗方法 */
+  closeModal: () => void;
+  /** 移除弹窗方法 */
+  removeModal: () => void;
+  /** 修改弹窗属性方法 */
+  setModalProps: (option?: ModalItemProps<T>) => void;
+  /** 弹窗属性 */
+  modalProps: Ref<ModalItemProps<T>>;
+}
 
 /**
  * 弹窗数据配置
  */
-export interface ModalItemOption<T extends ModalItemType> {
+export interface ModalItem<
+  T extends ModalItemType,
+  P extends Record<string, any>
+> {
   /** 弹窗类型 */
   type?: T;
   /** 弹窗内容组件 */
-  component?: UserComponent;
+  component?: UserComponent<P>;
   /** 弹窗内容异步组件 */
-  asyncComponent?: AsyncComponentLoader;
+  asyncComponent?: AsyncComponentLoader<Component<P>>;
   /** 弹窗内容异步组件配置 */
   asyncComponentOptions?: Partial<AsyncComponentOptions>;
   /** 弹窗内容组件属性 */
-  componentProps?: ModalItemComponentProps;
+  componentProps?:
+    | (Record<string, any> & P)
+    | ((data: ModalHolderProvider<T>) => Record<string, any> & P);
   /** 弹窗属性 */
-  props?: T extends 'drawer' ? EleDrawerPropsAndEmits : EleModalPropsAndEmits;
+  props?: ModalItemProps<T>;
   /** 传递插槽 */
   slots?: SlotObject;
   /** 是否自定义弹窗组件 */
@@ -73,17 +80,14 @@ export interface ModalItemOption<T extends ModalItemType> {
   modalId?: ModalItemId;
 }
 
-/**
- * 打开的弹窗数据
- */
-export type ModalItem = ModalItemOption<'drawer'> | ModalItemOption<'modal'>;
-
 /**
  * 提供给后代组件的弹窗操作方法
  */
 export interface ModalUtilProvider {
   /** 打开弹窗 */
-  openModal: (option: ModalItem) => ModalItemId;
+  openModal: <T extends ModalItemType, P extends Record<string, any>>(
+    option: ModalItem<T, P>
+  ) => ModalItemId;
   /** 关闭弹窗 */
   closeModal: (modalId?: ModalItemId) => void;
   /** 关闭所有弹窗 */
@@ -91,32 +95,28 @@ export interface ModalUtilProvider {
   /** 修改弹窗失活状态 */
   updateModalState: (modalId?: ModalItemId, deactivated?: boolean) => void;
   /** 修改弹窗属性 */
-  updateModalProps: (
+  updateModalProps: <T extends ModalItemType>(
     modalId?: ModalItemId,
-    option?: Record<string, any>
+    option?: ModalItemProps<T>
   ) => void;
 }
 
 /**
  * 弹窗操作方法
  */
-export interface UseModalMethods<T extends ModalItemType | unknown = unknown> {
+export interface UseModalMethods {
   /** 打开弹窗 */
-  openModal: (
-    option: T extends 'drawer'
-      ? ModalItemOption<'drawer'>
-      : T extends 'modal'
-        ? ModalItemOption<'modal'>
-        : ModalItem
+  openModal: <T extends ModalItemType, P extends Record<string, any>>(
+    option: ModalItem<T, P>
   ) => ModalItemId;
   /** 关闭所有弹窗(是否只关闭当前组件中打开的弹窗) */
   closeAllModal: (current?: boolean) => void;
   /** 关闭弹窗(指定弹窗 id 或者当前内容组件所在弹窗) */
   closeModal: (modalId?: ModalItemId) => void;
   /** 修改弹窗属性(指定弹窗 id 或者当前内容组件所在弹窗) */
-  setModalProps: (
-    modalId?: ModalItemId | Record<string, any>,
-    options?: Record<string, any>
+  setModalProps: <T extends ModalItemType>(
+    modalId?: ModalItemId | ModalItemProps<T>,
+    options?: ModalItemProps<T>
   ) => void;
 }
 
@@ -124,17 +124,19 @@ export interface UseModalMethods<T extends ModalItemType | unknown = unknown> {
  * useModalRender 返回类型
  */
 export interface UseModalRenderResult {
-  modals: Ref<ModalItem[]>;
-  openModal: (option: ModalItem) => ModalItemId;
+  modals: Ref<ModalItem<ModalItemType, Record<string, any>>[]>;
+  openModal: <T extends ModalItemType, P extends Record<string, any>>(
+    option: ModalItem<T, P>
+  ) => ModalItemId;
   closeModal: (modalId?: ModalItemId) => void;
   closeAllModal: () => void;
   removeModal: (modalId?: ModalItemId) => void;
   removeAllModal: () => void;
   updateModalVisible: (modalId?: ModalItemId, visible?: boolean) => void;
   updateModalState: (modalId?: ModalItemId, deactivated?: boolean) => void;
-  updateModalProps: (
+  updateModalProps: <T extends ModalItemType>(
     modalId?: ModalItemId,
-    option?: Record<string, any>
+    option?: ModalItemProps<T>
   ) => void;
 }
 
@@ -142,9 +144,7 @@ export interface UseModalRenderResult {
  * useModal 返回类型
  */
 export interface UseModalResult<T extends ModalItemType>
-  extends UseModalMethods<T> {
+  extends UseModalMethods {
   ModalHolder: Component;
-  modalProps?: Ref<
-    T extends 'drawer' ? EleDrawerPropsAndEmits : EleModalPropsAndEmits
-  >;
+  modalProps?: Ref<ModalItemProps<T>>;
 }

package/es/ele-modal-render/use-modal.d.ts

@@ -1,3 +1,3 @@
-import { UseModalResult, ModalItemType } from './types';
+import { ModalItemType, UseModalResult } from './types';
 
 export declare function useModal<T extends ModalItemType>(): UseModalResult<T>;

package/es/ele-modal-render/util.d.ts

@@ -1,5 +1,5 @@
 import { InjectionKey } from 'vue';
-import { ModalUtilProvider, ModalHolderProvider, UseModalRenderResult } from './types';
+import { ModalItemType, ModalUtilProvider, ModalHolderProvider, UseModalRenderResult } from './types';
 
 /**
  * 弹窗渲染器容器注入键名
@@ -8,7 +8,7 @@ export declare const MODAL_UTIL_KEY: InjectionKey<ModalUtilProvider>;
 /**
  * 直接父级的弹窗渲染器注入键名
  */
-export declare const MODAL_HOLDER_KEY: InjectionKey<ModalHolderProvider>;
+export declare const MODAL_HOLDER_KEY: InjectionKey<ModalHolderProvider<ModalItemType>>;
 /**
  * 弹窗渲染器数据操作
  */

package/es/ele-modal-render/util.js

@@ -3,9 +3,7 @@ import ModalLoading from "./components/modal-loading";
 const MODAL_UTIL_KEY = Symbol(
   "modalUtil"
 );
-const MODAL_HOLDER_KEY = Symbol(
-  "modalHolder"
-);
+const MODAL_HOLDER_KEY = Symbol("modalHolder");
 function getItemComponent(item, onLoaded) {
   const { component, asyncComponent, custom, asyncComponentOptions } = item;
   if (component && typeof component === "object") {

package/es/ele-popconfirm/index.d.ts

@@ -218,8 +218,8 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     hidePopper: () => void;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     cancel: (_e: MouseEvent) => void;
-    confirm: (_e: MouseEvent) => void;
     "update:visible": (value: boolean) => void;
+    confirm: (_e: MouseEvent) => void;
     "before-enter": () => void;
     "before-leave": () => void;
     "after-enter": () => void;
@@ -422,8 +422,8 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     arrowBg: StringConstructor;
 }>> & Readonly<{
     onCancel?: ((_e: MouseEvent) => any) | undefined;
-    onConfirm?: ((_e: MouseEvent) => any) | undefined;
     "onUpdate:visible"?: ((value: boolean) => any) | undefined;
+    onConfirm?: ((_e: MouseEvent) => any) | undefined;
     "onBefore-enter"?: (() => any) | undefined;
     "onBefore-leave"?: (() => any) | undefined;
     "onAfter-enter"?: (() => any) | undefined;
@@ -451,8 +451,8 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     arrowOffset: number;
     virtualTriggering: boolean;
     gpuAcceleration: boolean;
-    confirmButtonType: ("" | "default" | "primary" | "success" | "warning" | "info" | "danger" | "text") | undefined;
-    cancelButtonType: ("" | "default" | "primary" | "success" | "warning" | "info" | "danger" | "text") | undefined;
+    confirmButtonType: ("" | "success" | "primary" | "warning" | "info" | "default" | "danger" | "text") | undefined;
+    cancelButtonType: ("" | "success" | "primary" | "warning" | "info" | "default" | "danger" | "text") | undefined;
     iconColor: string;
     hideIcon: boolean;
     hideConfirmButton: boolean;

package/es/ele-popconfirm-provider/util.js

@@ -7,18 +7,24 @@ function usePopconfirmProvider() {
   const popconfirmVirtualRef = shallowRef();
   const popconfirmProps = shallowRef({});
   const openPopconfirm = (triggerEl, props) => {
-    if (triggerEl == null || popconfirmVirtualRef.value === triggerEl) {
+    if (triggerEl == null) {
+      return;
+    }
+    if (popconfirmVirtualRef.value === triggerEl) {
+      popconfirmProps.value = props || {};
       return;
     }
     popconfirmRef.value && popconfirmRef.value.hidePopper();
     nextTick(() => {
       popconfirmProps.value = props || {};
       popconfirmVirtualRef.value = triggerEl;
-      nextTick(() => {
-        if (popconfirmRef.value) {
-          unref(popconfirmRef.value.tooltipRef)?.handleOpen?.();
-        }
-      });
+      if (!popconfirmProps.value.disabled) {
+        nextTick(() => {
+          if (popconfirmRef.value) {
+            unref(popconfirmRef.value.tooltipRef)?.handleOpen?.();
+          }
+        });
+      }
     });
   };
   provide(POPCONFIRM_KEY, {

package/es/ele-printer/index.d.ts

@@ -18,8 +18,8 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
 }>, {
     print: (options?: any) => void;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "update:modelValue": (_value: boolean) => void;
     done: () => void;
+    "update:modelValue": (_value: boolean) => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     modelValue: BooleanConstructor;
     headerStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
@@ -33,8 +33,8 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     static: BooleanConstructor;
     options: ObjectConstructor;
 }>> & Readonly<{
-    "onUpdate:modelValue"?: ((_value: boolean) => any) | undefined;
     onDone?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((_value: boolean) => any) | undefined;
 }>, {
     modelValue: boolean;
     static: boolean;

package/es/ele-printer/util.d.ts

@@ -8,7 +8,7 @@ export declare const printingClass = "ele-printing";
  * @param options 参数
  * @param userOptions 自定义参数
  */
-export declare function mergeOptions(options?: any, userOptions?: any): any;
+export declare function mergeOptions(options?: Record<string, any>, userOptions?: Record<string, any>): Record<string, any> | undefined;
 /**
  * 创建并获取打印容器
  */

package/es/ele-printer/util.js

@@ -1,5 +1,6 @@
 import { onBeforeUnmount } from "vue";
 import { useTimer } from "../utils/hook";
+import { escape } from "../utils/common";
 const printContainerId = "ele-printer-container";
 const printFrameId = "ele-printer-iframe";
 const printingClass = "ele-printing";
@@ -20,28 +21,13 @@ function getPrintContainer() {
   document.body.appendChild(elem);
   return elem;
 }
-function getOptionCss(opt) {
-  const css = ["@page {"];
-  if (opt.margin != null && opt.margin !== "") {
-    const v = typeof opt.margin === "number" ? opt.margin + "px" : opt.margin;
-    css.push(`margin: ${v};`);
-  }
-  if (opt.direction != null && opt.direction !== "") {
-    css.push(`size: ${opt.direction};`);
-  }
-  if (opt.orientation != null && opt.orientation !== "") {
-    css.push(`page-orientation: ${opt.orientation};`);
-  }
-  css.push("}");
-  return css.join(" ");
-}
 function removePrintFrame() {
   const pFrame = document.getElementById(printFrameId);
   if (pFrame) {
+    const url = pFrame.getAttribute("src");
     if (pFrame.parentNode) {
       pFrame.parentNode.removeChild(pFrame);
     }
-    const url = pFrame.getAttribute("src");
     if (url) {
       try {
         window.URL.revokeObjectURL(url);
@@ -64,6 +50,39 @@ function getPrintFrame() {
   elem.focus();
   return elem;
 }
+function getOptionCss(opt) {
+  const css = ["@page {"];
+  if (opt.margin != null && opt.margin !== "") {
+    const v = typeof opt.margin === "number" ? `${opt.margin}px` : opt.margin;
+    css.push(`margin: ${escape(v)};`);
+  }
+  if (opt.direction != null && opt.direction !== "") {
+    css.push(`size: ${escape(opt.direction)};`);
+  }
+  if (opt.orientation != null && opt.orientation !== "") {
+    css.push(`page-orientation: ${escape(opt.orientation)};`);
+  }
+  css.push("}");
+  return css.join(" ");
+}
+function initFormEl(containerEl) {
+  Array.from(containerEl.querySelectorAll("input")).forEach(
+    (el) => {
+      if (el.value === "") {
+        const type = el.getAttribute("type");
+        if (type && ["button", "submit", "reset"].includes(type)) {
+          return;
+        }
+      }
+      el.setAttribute("value", el.value);
+    }
+  );
+  Array.from(containerEl.querySelectorAll("textarea")).forEach(
+    (el) => {
+      el.innerText = el.value;
+    }
+  );
+}
 function doPrintOnFrame(opt, printId, timeout) {
   const pFrame = getPrintFrame();
   const pWin = pFrame.contentWindow;
@@ -75,36 +94,31 @@ function doPrintOnFrame(opt, printId, timeout) {
   if (!pDoc) {
     return;
   }
-  const container = getPrintContainer();
-  Array.from(
-    container.querySelectorAll('input[type="text"], input[type="number"]')
-  ).forEach((el) => {
-    el.setAttribute("value", el.value);
-  });
-  pDoc.open();
-  const printOption = opt.options ? `JSON.parse('${JSON.stringify(opt.options)}')` : "";
+  initFormEl(getPrintContainer());
+  const printOption = opt.options ? `JSON.parse(${JSON.stringify(JSON.stringify(opt.options))})` : "";
+  const printJsStr = `window.print(${printOption});
+    window.parent.postMessage('elePrintDone_${Number(printId)}', '*');`;
+  const printJsFuncStr = `setTimeout(function() { ${printJsStr} }, ${Number(timeout)});`;
+  const printTitle = opt.title ? JSON.stringify(String(opt.title)) : void 0;
   const optHtml = `
   <style type="text/css" media="print">
     ${getOptionCss(opt)}
   </style>
   <script>
-    const $html = document.querySelector('html');
+    const $html = document.documentElement;
     if($html && $html.classList && $html.classList.add) {
       $html.classList.add('${printingClass}');
     }
     window.onload = function() {
-      if(${opt.title == null ? 0 : 1}) {
-        document.title = '${opt.title}';
+      if(${printTitle == null ? 0 : 1}) {
+        document.title = ${printTitle};
       }
-      ${"setTimeout(() => {"}
-        window.print(${printOption});
-        window.parent.postMessage('elePrintDone_${printId}', '*');
-      ${["}, ", timeout, ");"].join("")}
+      ${printJsFuncStr}
     };
   <\/script>
   `;
-  const html = document.querySelector("html")?.outerHTML || "";
-  const content = html.replace(/<script/g, '<textarea style="display:none;" ').replace(/<\/script>/g, "</textarea>").replace(/<\/html>/, optHtml + "</html>");
+  const content = document.documentElement.outerHTML.replace(/<script/g, '<textarea style="display:none;" ').replace(/<\/script>/g, "</textarea>").replace(/<\/html>/, `${optHtml}</html>`);
+  pDoc.open();
   pDoc.write(`<!DOCTYPE html>${content}`);
   pDoc.close();
   return pWin;
@@ -119,7 +133,7 @@ function usePrinter(done) {
       doPrintOnFrame(option, printId, printTimeout);
       return;
     }
-    const $html = document.querySelector("html");
+    const $html = document.documentElement;
     if (!$html) {
       done && done();
       return;
@@ -171,18 +185,25 @@ function printPdf(option) {
     try {
       pFrame.contentWindow && pFrame.contentWindow.print(option.options);
       option.done && option.done();
-      window.URL.revokeObjectURL(url);
-      return;
+      try {
+        window.URL.revokeObjectURL(url);
+      } catch (e) {
+        console.error(e);
+      }
     } catch (e) {
       console.error(e);
+      if (!option.arraybuffer && option.url) {
+        try {
+          window.URL.revokeObjectURL(url);
+        } catch (e2) {
+          console.error(e2);
+        }
+        window.open(option.url);
+      } else {
+        window.open(url);
+      }
+      option.done && option.done();
     }
-    if (!option.arraybuffer && option.url) {
-      window.URL.revokeObjectURL(url);
-      window.open(option.url);
-    } else {
-      window.open(url);
-    }
-    option.done && option.done();
   };
   const doPrint = (buffer) => {
     const blob = new window.Blob([buffer], { type: "application/pdf" });

package/es/ele-pro-form/index.js

@@ -2,7 +2,7 @@ import { defineComponent, useModel, ref, computed, watch, onBeforeUnmount, creat
 import { ElForm } from "element-plus";
 import { useLocale } from "../ele-config-provider/receiver";
 import { eachTree } from "../utils/common";
-import { useContentSlot } from "../utils/hook";
+import { useContentSlot } from "../ele-viewer/util";
 import { translateJsCode } from "./components/render-core";
 import { ChildrenRender } from "./components/render-util";
 import ProFormFooter from "./components/pro-form-footer";

package/es/ele-pro-layout/index.d.ts

@@ -183,10 +183,10 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     };
 }>, {
     layoutRef: import('vue').Ref<EleAdminLayoutInstance, EleAdminLayoutInstance>;
-    openModal: (option: import('../ele-modal-render/types').ModalItem) => import('../ele-modal-render/types').ModalItemId;
+    openModal: <T extends import('../ele-modal-render/types').ModalItemType, P extends Record<string, any>>(option: import('../ele-modal-render/types').ModalItem<T, P>) => import('../ele-modal-render/types').ModalItemId;
     closeModal: (modalId?: import('../ele-modal-render/types').ModalItemId) => void;
     closeAllModal: () => void;
-    updateModalProps: (modalId?: import('../ele-modal-render/types').ModalItemId, option?: Record<string, any>) => void;
+    updateModalProps: <T extends import('../ele-modal-render/types').ModalItemType>(modalId?: import('../ele-modal-render/types').ModalItemId, option?: import('../ele-modal-render/types').ModalItemProps<T>) => void;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     tabContextMenu: (_option: TabItemEventOption) => void;
     "update:maximized": (_maximized: boolean) => void;
@@ -370,11 +370,12 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
 }>, {
     height: string | number;
     transitionDelay: number;
-    expanded: boolean;
     uniqueOpened: boolean;
     collapse: boolean;
     ellipsis: boolean;
+    expanded: boolean;
     compact: boolean;
+    responsive: boolean;
     tabBar: TabBar;
     breadcrumb: boolean | EleBreadcrumbProps;
     backTop: boolean | EleBacktopProps;
@@ -394,7 +395,6 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     sideboxIconSlot: string;
     menuScrollToActive: boolean;
     keepAlive: boolean;
-    responsive: boolean;
     redirectPath: string;
     fluid: boolean;
     compressOnEsc: boolean;

package/es/ele-pro-table/components/tool-column-list.d.ts

@@ -22,6 +22,8 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     fixedLeftTooltip: (_el: HTMLElement) => void;
     fixedRightTooltip: (_el: HTMLElement) => void;
     colWidthChange: (_item: ColItem, _width?: string | number | undefined) => void;
+    sortStart: () => void;
+    sortEnd: () => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     /** 列配置数据 */
     data: PropType<ColItem[]>;
@@ -43,6 +45,8 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     onFixedLeftTooltip?: ((_el: HTMLElement) => any) | undefined;
     onFixedRightTooltip?: ((_el: HTMLElement) => any) | undefined;
     onColWidthChange?: ((_item: ColItem, _width?: string | number | undefined) => any) | undefined;
+    onSortStart?: (() => any) | undefined;
+    onSortEnd?: (() => any) | undefined;
 }>, {
     sortable: boolean;
     allowFixed: boolean;

package/es/ele-pro-table/components/tool-column-list.js

@@ -44,7 +44,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     fixedRight: (_item) => true,
     fixedLeftTooltip: (_el) => true,
     fixedRightTooltip: (_el) => true,
-    colWidthChange: (_item, _width) => true
+    colWidthChange: (_item, _width) => true,
+    sortStart: () => true,
+    sortEnd: () => true
   },
   setup(__props, { emit: __emit }) {
     const props = __props;
@@ -88,6 +90,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const handleSortChange = (colItems) => {
       handleChildSortChange(colItems, props.parent);
     };
+    const handleSortStart = () => {
+      emit("sortStart");
+    };
+    const handleSortEnd = () => {
+      emit("sortEnd");
+    };
     return (_ctx, _cache) => {
       const _component_ToolColumnList = resolveComponent("ToolColumnList", true);
       return openBlock(), createBlock(unref(VueDraggable), {
@@ -98,7 +106,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         handle: ".ele-tool-column-handle",
         componentData: { class: "ele-tool-column-list" },
         forceFallback: true,
-        "onUpdate:modelValue": handleSortChange
+        "onUpdate:modelValue": handleSortChange,
+        onStart: handleSortStart,
+        onEnd: handleSortEnd
       }, {
         item: withCtx(({ element: d }) => [
           createElementVNode("div", _hoisted_1, [
@@ -167,7 +177,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               onFixedRight: handleFixedRight,
               onFixedLeftTooltip: handleChildFixedLeftTooltip,
               onFixedRightTooltip: handleChildFixedRightTooltip,
-              onColWidthChange: handleColWidthChange
+              onColWidthChange: handleColWidthChange,
+              onSortStart: handleSortStart,
+              onSortEnd: handleSortEnd
             }, null, 8, ["data", "parent", "sortable", "allowWidth", "columnWidthPlaceholder"])) : createCommentVNode("", true)
           ])
         ]),

package/es/ele-pro-table/components/tool-column.js

@@ -38,6 +38,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const colItems = ref([]);
     const isCheckAll = ref(false);
     const isIndeterminate = ref(false);
+    const isDragging = ref(false);
     const initColItems = () => {
       const { cols, checkAll, indeterminate } = getColItems(
         props.columns,
@@ -162,6 +163,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       initColItems();
       updateColumns(true);
     };
+    const handleSortStart = () => {
+      isDragging.value = true;
+    };
+    const handleSortEnd = () => {
+      isDragging.value = false;
+    };
     watch(
       [() => props.columns, () => props.locale],
       () => {
@@ -193,7 +200,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           }, {
             body: withCtx(() => [
               createElementVNode("div", {
-                class: normalizeClass(["ele-popover-body ele-tool-column", { "is-sortable": __props.sortable }])
+                class: normalizeClass(["ele-popover-body ele-tool-column", [{ "is-sortable": __props.sortable }, { "is-dragging": isDragging.value }]])
               }, [
                 createElementVNode("div", _hoisted_1, [
                   createElementVNode("div", _hoisted_2, [
@@ -219,7 +226,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   onFixedLeft: handleFixedLeft,
                   onFixedRight: handleFixedRight,
                   onFixedLeftTooltip: handleFixedLeftTooltip,
-                  onFixedRightTooltip: handleFixedRightTooltip
+                  onFixedRightTooltip: handleFixedRightTooltip,
+                  onSortStart: handleSortStart,
+                  onSortEnd: handleSortEnd
                 }, null, 8, ["data", "sortable", "allowFixed"])) : createCommentVNode("", true)
               ], 2)
             ]),