vxe-table 4.13.44 → 4.13.45

package/lib/table/module/custom/hook.js

@@ -4,7 +4,7 @@ var _vue = require("vue");
 var _ui = require("../../../ui");
 var _xeUtils = _interopRequireDefault(require("xe-utils"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const tableCustomMethodKeys = ['openCustom', 'closeCustom', 'saveCustom', 'cancelCustom', 'resetCustom', 'toggleCustomAllCheckbox', 'setCustomAllCheckbox'];
+const tableCustomMethodKeys = ['openCustom', 'closeCustom', 'toggleCustom', 'saveCustom', 'cancelCustom', 'resetCustom', 'toggleCustomAllCheckbox', 'setCustomAllCheckbox'];
 _ui.VxeUI.hooks.add('tableCustomModule', {
   setupTable($xeTable) {
     const {
@@ -82,6 +82,15 @@ _ui.VxeUI.hooks.add('tableCustomModule', {
       }
       return (0, _vue.nextTick)();
     };
+    const toggleCustom = () => {
+      const {
+        customStore
+      } = reactData;
+      if (customStore.visible) {
+        return closeCustom();
+      }
+      return openCustom();
+    };
     const saveCustom = () => {
       const {
         customColumnList,
@@ -238,6 +247,7 @@ _ui.VxeUI.hooks.add('tableCustomModule', {
     const customMethods = {
       openCustom,
       closeCustom,
+      toggleCustom,
       saveCustom,
       cancelCustom,
       resetCustom(options) {

package/lib/table/module/custom/hook.min.js

@@ -1 +1 @@
-var _vue=require("vue"),_ui=require("../../../ui"),_xeUtils=_interopRequireDefault(require("xe-utils"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}let tableCustomMethodKeys=["openCustom","closeCustom","saveCustom","cancelCustom","resetCustom","toggleCustomAllCheckbox","setCustomAllCheckbox"];_ui.VxeUI.hooks.add("tableCustomModule",{setupTable(n){let{reactData:m,internalData:r}=n,{computeCustomOpts:c,computeRowGroupFields:o}=n.getComputeMaps(),s=n.getRefMaps().refElem,l=n.xeGrid,i=()=>{var e=m.customStore,t=s.value;let l=0;t&&(l=t.clientHeight-28),e.maxHeight=Math.max(88,l)},a=()=>{var{initStore:e,customStore:t}=m;return t.visible=!0,e.custom=!0,u(),v(),i(),(0,_vue.nextTick)().then(()=>i())},u=()=>{var e=m.customStore,t=r.collectColumn;if(e.visible){let l={},s={},i={};_xeUtils.default.eachTree(t,e=>{var t=e.getKey();e.renderFixed=e.fixed,e.renderVisible=e.visible,e.renderResizeWidth=e.renderWidth,l[t]=e.renderSortNumber,s[t]=e.fixed,i[t]=e.visible}),e.oldSortMaps=l,e.oldFixedMaps=s,e.oldVisibleMaps=i,m.customColumnList=t.slice(0)}},d=()=>{var e=m.customStore,t=c.value;return e.visible&&(e.visible=!1,t.immediate||n.handleCustom()),(0,_vue.nextTick)()};let t=e=>{var t=m.customStore,l=m.customColumnList,s=c.value;let{checkMethod:i,visibleMethod:r}=s,o=!!e;return s.immediate?(_xeUtils.default.eachTree(l,e=>{r&&!r({$table:n,column:e})||i&&!i({$table:n,column:e})||(e.visible=o,e.renderVisible=o,e.halfVisible=!1)}),t.isAll=o,m.isCustomStatus=!0,n.handleCustom(),n.saveCustomStore("update:visible")):(_xeUtils.default.eachTree(l,e=>{r&&!r({$table:n,column:e})||i&&!i({$table:n,column:e})||(e.renderVisible=o,e.halfVisible=!1)}),t.isAll=o),n.checkCustomStatus(),(0,_vue.nextTick)()};var e={openCustom:a,closeCustom:d,saveCustom:()=>{let{customColumnList:e,aggHandleFields:l,rowGroupList:t}=m;let{allowVisible:r,allowSort:o,allowFixed:a,allowResizable:u}=c.value;return _xeUtils.default.eachTree(e,(e,t,l,s,i)=>{i?e.fixed=i.fixed:(o&&(e.renderSortNumber=t+1),a&&(e.fixed=e.renderFixed)),u&&e.renderVisible&&(!e.children||e.children.length)&&e.renderResizeWidth!==e.renderWidth&&(e.resizeWidth=e.renderResizeWidth,e.renderWidth=e.renderResizeWidth),r&&(e.visible=e.renderVisible)}),m.isCustomStatus=!0,m.isDragColMove=!0,setTimeout(()=>{m.isDragColMove=!1},1e3),n.saveCustomStore("confirm").then(()=>{!n.handlePivotTableAggregateData||t.length===l.length&&!t.some((e,t)=>e.field!==l[t])||(l.length?n.setRowGroups(l):n.clearRowGroups())})},cancelCustom:()=>{var{customColumnList:e,customStore:t}=m;let{oldSortMaps:i,oldFixedMaps:r,oldVisibleMaps:o}=t,{allowVisible:a,allowSort:u,allowFixed:n,allowResizable:d}=c.value;return _xeUtils.default.eachTree(e,e=>{var t=e.getKey(),l=!!o[t],s=r[t]||"";a&&(e.renderVisible=l,e.visible=l),n&&(e.renderFixed=s,e.fixed=s),u&&(e.renderSortNumber=i[t]||0),d&&(e.renderResizeWidth=e.renderWidth)},{children:"children"}),(0,_vue.nextTick)()},resetCustom(e){let t=m.rowGroupList;var l=r.collectColumn;let s=c.value.checkMethod,i=Object.assign({visible:!0,resizable:!0===e,fixed:!0===e,sort:!0===e},e);return _xeUtils.default.eachTree(l,e=>{i.resizable&&(e.resizeWidth=0),i.fixed&&(e.fixed=e.defaultFixed),i.sort&&(e.renderSortNumber=e.sortNumber),s&&!s({$table:n,column:e})||(e.visible=e.defaultVisible),e.renderResizeWidth=e.renderWidth}),m.isCustomStatus=!1,n.saveCustomStore("reset"),n.handleCustom().then(()=>{var e;n.handlePivotTableAggregateData&&((e=o.value)||t).length&&(e&&e.length?n.setRowGroups(e):n.clearRowGroups())})},toggleCustomAllCheckbox(){var e=m.customStore,e=!e.isAll;return t(e)},setCustomAllCheckbox:t};let v=()=>{var e=m.customStore,t=r.collectColumn;let l=c.value.checkMethod;e.isAll=t.every(e=>!!l&&!l({$table:n,column:e})||e.renderVisible),e.isIndeterminate=!e.isAll&&t.some(e=>(!l||l({$table:n,column:e}))&&(e.renderVisible||e.halfVisible))},b=(e,t)=>{(l||n).dispatchEvent("custom",{type:e},t)};var h={checkCustomStatus:v,emitCustomEvent:b,triggerCustomEvent(e){var t=n.reactData.customStore;t.visible?(d(),b("close",e)):(t.btnEl=e.target,a(),b("open",e))},customOpenEvent(e){var t=n.reactData.customStore;t.visible||(t.activeBtn=!0,t.btnEl=e.target,n.openCustom(),n.emitCustomEvent("open",e))},customCloseEvent(e){var t=n.reactData.customStore;t.visible&&(t.activeBtn=!1,n.closeCustom(),n.emitCustomEvent("close",e))},handleUpdateCustomColumn:u};return Object.assign(Object.assign({},e),h)},setupGrid(e){return e.extendTableMethods(tableCustomMethodKeys)}});
+var _vue=require("vue"),_ui=require("../../../ui"),_xeUtils=_interopRequireDefault(require("xe-utils"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}let tableCustomMethodKeys=["openCustom","closeCustom","toggleCustom","saveCustom","cancelCustom","resetCustom","toggleCustomAllCheckbox","setCustomAllCheckbox"];_ui.VxeUI.hooks.add("tableCustomModule",{setupTable(n){let{reactData:m,internalData:r}=n,{computeCustomOpts:c,computeRowGroupFields:o}=n.getComputeMaps(),s=n.getRefMaps().refElem,l=n.xeGrid,i=()=>{var e=m.customStore,t=s.value;let l=0;t&&(l=t.clientHeight-28),e.maxHeight=Math.max(88,l)},u=()=>{var{initStore:e,customStore:t}=m;return t.visible=!0,e.custom=!0,a(),v(),i(),(0,_vue.nextTick)().then(()=>i())},a=()=>{var e=m.customStore,t=r.collectColumn;if(e.visible){let l={},s={},i={};_xeUtils.default.eachTree(t,e=>{var t=e.getKey();e.renderFixed=e.fixed,e.renderVisible=e.visible,e.renderResizeWidth=e.renderWidth,l[t]=e.renderSortNumber,s[t]=e.fixed,i[t]=e.visible}),e.oldSortMaps=l,e.oldFixedMaps=s,e.oldVisibleMaps=i,m.customColumnList=t.slice(0)}},d=()=>{var e=m.customStore,t=c.value;return e.visible&&(e.visible=!1,t.immediate||n.handleCustom()),(0,_vue.nextTick)()};let t=e=>{var t=m.customStore,l=m.customColumnList,s=c.value;let{checkMethod:i,visibleMethod:r}=s,o=!!e;return s.immediate?(_xeUtils.default.eachTree(l,e=>{r&&!r({$table:n,column:e})||i&&!i({$table:n,column:e})||(e.visible=o,e.renderVisible=o,e.halfVisible=!1)}),t.isAll=o,m.isCustomStatus=!0,n.handleCustom(),n.saveCustomStore("update:visible")):(_xeUtils.default.eachTree(l,e=>{r&&!r({$table:n,column:e})||i&&!i({$table:n,column:e})||(e.renderVisible=o,e.halfVisible=!1)}),t.isAll=o),n.checkCustomStatus(),(0,_vue.nextTick)()};var e={openCustom:u,closeCustom:d,toggleCustom:()=>{var e=m.customStore;return(e.visible?d:u)()},saveCustom:()=>{let{customColumnList:e,aggHandleFields:l,rowGroupList:t}=m;let{allowVisible:r,allowSort:o,allowFixed:u,allowResizable:a}=c.value;return _xeUtils.default.eachTree(e,(e,t,l,s,i)=>{i?e.fixed=i.fixed:(o&&(e.renderSortNumber=t+1),u&&(e.fixed=e.renderFixed)),a&&e.renderVisible&&(!e.children||e.children.length)&&e.renderResizeWidth!==e.renderWidth&&(e.resizeWidth=e.renderResizeWidth,e.renderWidth=e.renderResizeWidth),r&&(e.visible=e.renderVisible)}),m.isCustomStatus=!0,m.isDragColMove=!0,setTimeout(()=>{m.isDragColMove=!1},1e3),n.saveCustomStore("confirm").then(()=>{!n.handlePivotTableAggregateData||t.length===l.length&&!t.some((e,t)=>e.field!==l[t])||(l.length?n.setRowGroups(l):n.clearRowGroups())})},cancelCustom:()=>{var{customColumnList:e,customStore:t}=m;let{oldSortMaps:i,oldFixedMaps:r,oldVisibleMaps:o}=t,{allowVisible:u,allowSort:a,allowFixed:n,allowResizable:d}=c.value;return _xeUtils.default.eachTree(e,e=>{var t=e.getKey(),l=!!o[t],s=r[t]||"";u&&(e.renderVisible=l,e.visible=l),n&&(e.renderFixed=s,e.fixed=s),a&&(e.renderSortNumber=i[t]||0),d&&(e.renderResizeWidth=e.renderWidth)},{children:"children"}),(0,_vue.nextTick)()},resetCustom(e){let t=m.rowGroupList;var l=r.collectColumn;let s=c.value.checkMethod,i=Object.assign({visible:!0,resizable:!0===e,fixed:!0===e,sort:!0===e},e);return _xeUtils.default.eachTree(l,e=>{i.resizable&&(e.resizeWidth=0),i.fixed&&(e.fixed=e.defaultFixed),i.sort&&(e.renderSortNumber=e.sortNumber),s&&!s({$table:n,column:e})||(e.visible=e.defaultVisible),e.renderResizeWidth=e.renderWidth}),m.isCustomStatus=!1,n.saveCustomStore("reset"),n.handleCustom().then(()=>{var e;n.handlePivotTableAggregateData&&((e=o.value)||t).length&&(e&&e.length?n.setRowGroups(e):n.clearRowGroups())})},toggleCustomAllCheckbox(){var e=m.customStore,e=!e.isAll;return t(e)},setCustomAllCheckbox:t};let v=()=>{var e=m.customStore,t=r.collectColumn;let l=c.value.checkMethod;e.isAll=t.every(e=>!!l&&!l({$table:n,column:e})||e.renderVisible),e.isIndeterminate=!e.isAll&&t.some(e=>(!l||l({$table:n,column:e}))&&(e.renderVisible||e.halfVisible))},b=(e,t)=>{(l||n).dispatchEvent("custom",{type:e},t)};var h={checkCustomStatus:v,emitCustomEvent:b,triggerCustomEvent(e){var t=n.reactData.customStore;t.visible?(d(),b("close",e)):(t.btnEl=e.target,u(),b("open",e))},customOpenEvent(e){var t=n.reactData.customStore;t.visible||(t.activeBtn=!0,t.btnEl=e.target,n.openCustom(),n.emitCustomEvent("open",e))},customCloseEvent(e){var t=n.reactData.customStore;t.visible&&(t.activeBtn=!1,n.closeCustom(),n.emitCustomEvent("close",e))},handleUpdateCustomColumn:a};return Object.assign(Object.assign({},e),h)},setupGrid(e){return e.extendTableMethods(tableCustomMethodKeys)}});

package/lib/table/module/custom/panel.js

@@ -25,7 +25,8 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       default: () => ({})
     }
   },
-  setup(props) {
+  setup(props, context) {
+    const xID = _xeUtils.default.uniqueId();
     const VxeUIModalComponent = _ui.VxeUI.getComponent('VxeModal');
     const VxeUIDrawerComponent = _ui.VxeUI.getComponent('VxeDrawer');
     const VxeUIButtonComponent = _ui.VxeUI.getComponent('VxeButton');
@@ -34,8 +35,8 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     const $xeTable = (0, _vue.inject)('$xeTable', {});
     const {
       props: tableProps,
-      reactData,
-      internalData
+      reactData: tableReactData,
+      internalData: tableInternalData
     } = $xeTable;
     const {
       computeCustomOpts,
@@ -45,13 +46,29 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       computeResizableOpts
     } = $xeTable.getComputeMaps();
     const refElem = (0, _vue.ref)();
-    const bodyElemRef = (0, _vue.ref)();
+    const refBodyWrapperElem = (0, _vue.ref)();
+    const refCustomBodyElem = (0, _vue.ref)();
     const refDragLineElem = (0, _vue.ref)();
     const refDragTipElem = (0, _vue.ref)();
-    const dragColumnRef = (0, _vue.ref)();
-    let prevDragCol;
-    let prevDragToChild = false;
-    let prevDragPos;
+    const customPanelReactData = (0, _vue.reactive)({
+      dragCol: null,
+      dragGroup: null,
+      dragValues: null,
+      dragTipText: ''
+    });
+    const customPanelInternalData = {
+      // prevDragCol: undefined,
+      // prevDragToChild: false,
+      // prevDragPos: null
+    };
+    const refMaps = {
+      refElem,
+      refBodyWrapperElem,
+      refCustomBodyElem,
+      refDragLineElem,
+      refDragTipElem
+    };
+    const computeMaps = {};
     const handleWrapperMouseenterEvent = evnt => {
       const {
         customStore
@@ -73,7 +90,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     const confirmCustomEvent = ({
       $event
     }) => {
-      reactData.isCustomStatus = true;
+      tableReactData.isCustomStatus = true;
       $xeTable.saveCustom();
       $xeTable.closeCustom();
       $xeTable.emitCustomEvent('confirm', $event);
@@ -116,7 +133,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     const handleOptionCheck = column => {
       const {
         customColumnList
-      } = reactData;
+      } = tableReactData;
       const matchObj = _xeUtils.default.findTree(customColumnList, item => item === column);
       if (matchObj && matchObj.parent) {
         const {
@@ -129,7 +146,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         }
       }
     };
-    const changeCheckboxOption = column => {
+    const changeCheckboxOption = (column, evnt) => {
       const isChecked = !column.renderVisible;
       const customOpts = computeCustomOpts.value;
       if (customOpts.immediate) {
@@ -138,7 +155,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
           item.renderVisible = isChecked;
           item.halfVisible = false;
         });
-        reactData.isCustomStatus = true;
+        tableReactData.isCustomStatus = true;
         $xeTable.handleCustom();
         $xeTable.saveCustomStore('update:visible');
       } else {
@@ -149,6 +166,10 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       }
       handleOptionCheck(column);
       $xeTable.checkCustomStatus();
+      $xeTable.dispatchEvent('custom-visible-change', {
+        column,
+        checked: isChecked
+      }, evnt);
     };
     const changeColumnWidth = column => {
       const customOpts = computeCustomOpts.value;
@@ -156,62 +177,89 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         if (column.renderResizeWidth !== column.renderWidth) {
           column.resizeWidth = column.renderResizeWidth;
           column.renderWidth = column.renderResizeWidth;
-          reactData.isCustomStatus = true;
+          tableReactData.isCustomStatus = true;
           $xeTable.handleCustom();
           $xeTable.saveCustomStore('update:width');
         }
       }
     };
-    const changeFixedOption = (column, colFixed) => {
+    const changeFixedOption = (column, colFixed, evnt) => {
       const isMaxFixedColumn = computeIsMaxFixedColumn.value;
       const customOpts = computeCustomOpts.value;
+      let targetFixed = null;
       if (customOpts.immediate) {
         if (column.renderFixed === colFixed) {
+          targetFixed = '';
           _xeUtils.default.eachTree([column], col => {
             col.fixed = '';
             col.renderFixed = '';
           });
         } else {
           if (!isMaxFixedColumn || column.renderFixed) {
+            targetFixed = colFixed;
             _xeUtils.default.eachTree([column], col => {
               col.fixed = colFixed;
               col.renderFixed = colFixed;
             });
           }
         }
-        reactData.isCustomStatus = true;
+        tableReactData.isCustomStatus = true;
         $xeTable.handleCustom();
         $xeTable.saveCustomStore('update:fixed');
       } else {
         if (column.renderFixed === colFixed) {
+          targetFixed = '';
           _xeUtils.default.eachTree([column], col => {
             col.renderFixed = '';
           });
         } else {
           if (!isMaxFixedColumn || column.renderFixed) {
+            targetFixed = colFixed;
             _xeUtils.default.eachTree([column], col => {
               col.renderFixed = colFixed;
             });
           }
         }
       }
+      if (!targetFixed !== null) {
+        $xeTable.dispatchEvent('custom-fixed-change', {
+          column,
+          fixed: targetFixed
+        }, evnt);
+      }
     };
-    const allOptionEvent = () => {
+    const allOptionEvent = evnt => {
+      const {
+        customStore
+      } = tableReactData;
+      const isAll = !customStore.isAll;
       $xeTable.toggleCustomAllCheckbox();
+      $xeTable.dispatchEvent('custom-visible-all', {
+        checked: isAll
+      }, evnt);
     };
     const showDropTip = (evnt, optEl, showLine, dragPos) => {
-      const el = bodyElemRef.value;
-      if (!el) {
+      const bodyWrapperElem = refBodyWrapperElem.value;
+      if (!bodyWrapperElem) {
+        return;
+      }
+      const customBodyElem = refCustomBodyElem.value;
+      if (!customBodyElem) {
         return;
       }
-      const wrapperRect = el.getBoundingClientRect();
+      const {
+        prevDragToChild
+      } = customPanelInternalData;
+      const bodyWrapperRect = bodyWrapperElem.getBoundingClientRect();
+      const customBodyRect = customBodyElem.getBoundingClientRect();
       if (optEl) {
         const dragLineEl = refDragLineElem.value;
         if (dragLineEl) {
           if (showLine) {
             const optRect = optEl.getBoundingClientRect();
             dragLineEl.style.display = 'block';
-            dragLineEl.style.top = `${Math.max(1, optRect.y + el.scrollTop - wrapperRect.y)}px`;
+            dragLineEl.style.left = `${Math.max(0, customBodyRect.x - bodyWrapperRect.x)}px`;
+            dragLineEl.style.top = `${Math.max(1, optRect.y + bodyWrapperElem.scrollTop - bodyWrapperRect.y)}px`;
             dragLineEl.style.height = `${optRect.height}px`;
             dragLineEl.style.width = `${optRect.width}px`;
             dragLineEl.setAttribute('drag-pos', dragPos);
@@ -224,11 +272,31 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       const dragTipEl = refDragTipElem.value;
       if (dragTipEl) {
         dragTipEl.style.display = 'block';
-        dragTipEl.style.top = `${Math.min(el.clientHeight + el.scrollTop - dragTipEl.clientHeight, evnt.clientY + el.scrollTop - wrapperRect.y)}px`;
-        dragTipEl.style.left = `${Math.min(el.clientWidth + el.scrollLeft - dragTipEl.clientWidth, evnt.clientX + el.scrollLeft - wrapperRect.x)}px`;
+        dragTipEl.style.top = `${Math.min(bodyWrapperElem.clientHeight + bodyWrapperElem.scrollTop - dragTipEl.clientHeight, evnt.clientY + bodyWrapperElem.scrollTop - bodyWrapperRect.y)}px`;
+        dragTipEl.style.left = `${Math.min(bodyWrapperElem.clientWidth + bodyWrapperElem.scrollLeft - dragTipEl.clientWidth, evnt.clientX + bodyWrapperElem.scrollLeft - bodyWrapperRect.x)}px`;
         dragTipEl.setAttribute('drag-status', showLine ? prevDragToChild ? 'sub' : 'normal' : 'disabled');
       }
     };
+    const updateColDropTipContent = () => {
+      const {
+        dragCol
+      } = customPanelReactData;
+      const columnDragOpts = computeColumnDragOpts.value;
+      const {
+        tooltipMethod
+      } = columnDragOpts;
+      let tipContent = '';
+      if (tooltipMethod) {
+        const dtParams = {
+          $table: $xeTable,
+          column: dragCol
+        };
+        tipContent = `${tooltipMethod(dtParams) || ''}`;
+      } else {
+        tipContent = getI18n('vxe.custom.cstmDragTarget', [dragCol && dragCol.type !== 'html' ? dragCol.getTitle() : '']);
+      }
+      customPanelReactData.dragTipText = tipContent;
+    };
     const hideDropTip = () => {
       const dragTipEl = refDragTipElem.value;
       const dragLineEl = refDragLineElem.value;
@@ -247,7 +315,8 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       const colid = trEl.getAttribute('colid');
       const column = $xeTable.getColumnById(colid);
       trEl.draggable = true;
-      dragColumnRef.value = column;
+      customPanelReactData.dragCol = column;
+      updateColDropTipContent();
       (0, _dom.addClass)(trEl, 'active--drag-origin');
     };
     const sortMouseupEvent = evnt => {
@@ -257,13 +326,15 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       const trEl = tdEl.parentElement;
       hideDropTip();
       trEl.draggable = false;
-      dragColumnRef.value = null;
+      customPanelReactData.dragCol = null;
       (0, _dom.removeClass)(trEl, 'active--drag-origin');
     };
     const sortDragstartEvent = evnt => {
       if (evnt.dataTransfer) {
         evnt.dataTransfer.setDragImage((0, _dom.getTpImg)(), 0, 0);
       }
+      customPanelReactData.dragGroup = null;
+      customPanelReactData.dragValues = null;
     };
     const sortDragendEvent = evnt => {
       const {
@@ -271,16 +342,15 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       } = tableProps;
       const {
         customColumnList
-      } = reactData;
+      } = tableReactData;
       const {
         collectColumn
-      } = internalData;
+      } = tableInternalData;
       const customOpts = computeCustomOpts.value;
       const {
         immediate
       } = customOpts;
       const trEl = evnt.currentTarget;
-      const dragCol = dragColumnRef.value;
       const columnDragOpts = computeColumnDragOpts.value;
       const {
         isCrossDrag,
@@ -288,8 +358,22 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         isToChildDrag,
         dragEndMethod
       } = columnDragOpts;
+      const {
+        dragCol,
+        dragGroup,
+        dragValues
+      } = customPanelReactData;
+      const {
+        prevDragCol,
+        prevDragPos,
+        prevDragToChild
+      } = customPanelInternalData;
       const dragOffsetIndex = prevDragPos === 'bottom' ? 1 : 0;
-      if (prevDragCol && dragCol) {
+      if (dragGroup || dragValues) {
+        if ($xeTable.handlePivotTableAggregatePanelDragendEvent) {
+          $xeTable.handlePivotTableAggregatePanelDragendEvent(evnt);
+        }
+      } else if (prevDragCol && dragCol) {
         // 判断是否有拖动
         if (prevDragCol !== dragCol) {
           const dragColumn = dragCol;
@@ -415,7 +499,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
               nafIndex = _xeUtils.default.findIndexOf(customColumnList, item => item.id === newColumn.id);
               customColumnList.splice(nafIndex + dragOffsetIndex, 0, dragColumn);
             }
-            reactData.isDragColMove = true;
+            tableReactData.isDragColMove = true;
             if (mouseConfig) {
               if ($xeTable.clearSelected) {
                 $xeTable.clearSelected();
@@ -437,14 +521,16 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
               }
             }, evnt);
             if (immediate) {
-              reactData.customColumnList = collectColumn.slice(0);
+              tableReactData.customColumnList = collectColumn.slice(0);
               $xeTable.handleColDragSwapColumn();
             }
           }).catch(() => {});
         }
       }
       hideDropTip();
-      dragColumnRef.value = null;
+      customPanelReactData.dragCol = null;
+      customPanelReactData.dragGroup = null;
+      customPanelReactData.dragValues = null;
       trEl.draggable = false;
       trEl.removeAttribute('drag-pos');
       (0, _dom.removeClass)(trEl, 'active--drag-target');
@@ -464,7 +550,11 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       const isControlKey = (0, _dom.hasControlKey)(evnt);
       const colid = optEl.getAttribute('colid');
       const column = $xeTable.getColumnById(colid);
-      const dragCol = dragColumnRef.value;
+      const {
+        dragCol
+      } = customPanelReactData;
+      customPanelReactData.dragGroup = null;
+      customPanelReactData.dragValues = null;
       // 是否移入有效列
       if (column && (isCrossDrag || column.level === 1)) {
         evnt.preventDefault();
@@ -474,14 +564,16 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
           showDropTip(evnt, optEl, false, dragPos);
           return;
         }
-        prevDragToChild = !!(isCrossDrag && isToChildDrag && isControlKey && immediate);
-        prevDragCol = column;
-        prevDragPos = dragPos;
+        customPanelInternalData.prevDragToChild = !!(isCrossDrag && isToChildDrag && isControlKey && immediate);
+        customPanelInternalData.prevDragCol = column;
+        customPanelInternalData.prevDragPos = dragPos;
         showDropTip(evnt, optEl, true, dragPos);
       }
     };
     const renderDragTip = () => {
-      const dragCol = dragColumnRef.value;
+      const {
+        dragTipText
+      } = customPanelReactData;
       const columnDragOpts = computeColumnDragOpts.value;
       return (0, _vue.h)('div', {}, [(0, _vue.h)('div', {
         ref: refDragLineElem,
@@ -499,11 +591,15 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         class: ['vxe-table-custom-popup--drag-tip-normal-status', getIcon().TABLE_DRAG_STATUS_ROW]
       }), (0, _vue.h)('span', {
         class: ['vxe-table-custom-popup--drag-tip-sub-status', getIcon().TABLE_DRAG_STATUS_SUB_ROW]
+      }), (0, _vue.h)('span', {
+        class: ['vxe-table-custom-popup--drag-tip-group-status', getIcon().TABLE_DRAG_STATUS_AGG_GROUP]
+      }), (0, _vue.h)('span', {
+        class: ['vxe-table-custom-popup--drag-tip-values-status', getIcon().TABLE_DRAG_STATUS_AGG_VALUES]
       }), (0, _vue.h)('span', {
         class: ['vxe-table-custom-popup--drag-tip-disabled-status', getIcon().TABLE_DRAG_DISABLED]
       })]), (0, _vue.h)('div', {
         class: 'vxe-table-custom-popup--drag-tip-content'
-      }, getI18n('vxe.custom.cstmDragTarget', [dragCol && dragCol.type !== 'html' ? dragCol.getTitle() : '']))])])]);
+      }, `${dragTipText || ''}`)])])]);
     };
     const renderSimplePanel = () => {
       const $xeGrid = $xeTable.xeGrid;
@@ -519,7 +615,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       const {
         isCustomStatus,
         customColumnList
-      } = reactData;
+      } = tableReactData;
       const customOpts = computeCustomOpts.value;
       const {
         immediate
@@ -596,9 +692,9 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
               'is--disabled': isDisabled
             }],
             title: getI18n('vxe.custom.setting.colVisible'),
-            onClick: () => {
+            onClick: evnt => {
               if (!isDisabled) {
-                changeCheckboxOption(column);
+                changeCheckboxOption(column, evnt);
               }
             }
           }, [(0, _vue.h)('span', {
@@ -632,8 +728,10 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
             status: column.renderFixed === 'left' ? 'primary' : '',
             disabled: isDisabled || isHidden || isMaxFixedColumn && !column.renderFixed,
             title: getI18n(column.renderFixed === 'left' ? 'vxe.toolbar.cancelFixed' : 'vxe.toolbar.fixedLeft'),
-            onClick: () => {
-              changeFixedOption(column, 'left');
+            onClick: ({
+              $event
+            }) => {
+              changeFixedOption(column, 'left', $event);
             }
           }) : (0, _vue.createCommentVNode)(), VxeUIButtonComponent ? (0, _vue.h)(VxeUIButtonComponent, {
             mode: 'text',
@@ -641,8 +739,10 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
             status: column.renderFixed === 'right' ? 'primary' : '',
             disabled: isDisabled || isHidden || isMaxFixedColumn && !column.renderFixed,
             title: getI18n(column.renderFixed === 'right' ? 'vxe.toolbar.cancelFixed' : 'vxe.toolbar.fixedRight'),
-            onClick: () => {
-              changeFixedOption(column, 'right');
+            onClick: ({
+              $event
+            }) => {
+              changeFixedOption(column, 'right', $event);
             }
           }) : (0, _vue.createCommentVNode)()]) : (0, _vue.createCommentVNode)()]));
         }
@@ -656,9 +756,13 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         style: maxHeight && !['left', 'right'].includes(placement) ? {
           maxHeight: `${maxHeight}px`
         } : {}
-      }, customStore.visible ? [!treeConfig && (aggregateConfig || rowGroupConfig) && $xeTable.getPivotTableAggregateSimplePanel ? (0, _vue.h)($xeTable.getPivotTableAggregateSimplePanel(), {
+      }, customStore.visible ? [(0, _vue.h)('div', {
+        ref: refBodyWrapperElem,
+        class: 'vxe-table-custom-simple--body-wrapper'
+      }, [!treeConfig && (aggregateConfig || rowGroupConfig) && $xeTable.getPivotTableAggregateSimplePanel ? (0, _vue.h)($xeTable.getPivotTableAggregateSimplePanel(), {
         customStore
       }) : renderEmptyElement($xeTable), (0, _vue.h)('div', {
+        ref: refCustomBodyElem,
         class: 'vxe-table-custom--handle-wrapper'
       }, [(0, _vue.h)('div', {
         class: 'vxe-table-custom--header'
@@ -680,7 +784,6 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       }, getI18n('vxe.toolbar.customAll'))]) : (0, _vue.h)('span', {
         class: 'vxe-checkbox--label'
       }, getI18n('vxe.table.customTitle'))])])]), (0, _vue.h)('div', {
-        ref: bodyElemRef,
         class: 'vxe-table-custom--body'
       }, [topSlot ? (0, _vue.h)('div', {
         class: 'vxe-table-custom--panel-top'
@@ -694,7 +797,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         default: () => colVNs
       }), bottomSlot ? (0, _vue.h)('div', {
         class: 'vxe-table-custom--panel-bottom'
-      }, $xeTable.callSlot(bottomSlot, params)) : renderEmptyElement($xeTable), renderDragTip()]), customOpts.showFooter ? (0, _vue.h)('div', {
+      }, $xeTable.callSlot(bottomSlot, params)) : renderEmptyElement($xeTable)]), customOpts.showFooter ? (0, _vue.h)('div', {
         class: 'vxe-table-custom--footer'
       }, footerSlot ? $xeTable.callSlot(footerSlot, params) : [(0, _vue.h)('div', {
         class: 'vxe-table-custom--footer-buttons'
@@ -716,7 +819,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         status: 'primary',
         content: customOpts.confirmButtonText || getI18n('vxe.table.customConfirm'),
         onClick: confirmCustomEvent
-      }) : (0, _vue.createCommentVNode)()])]) : null])] : []);
+      }) : (0, _vue.createCommentVNode)()])]) : null]), renderDragTip()])] : []);
     };
     const renderPopupPanel = () => {
       const $xeGrid = $xeTable.xeGrid;
@@ -729,7 +832,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       const {
         isCustomStatus,
         customColumnList
-      } = reactData;
+      } = tableReactData;
       const customOpts = computeCustomOpts.value;
       const {
         immediate
@@ -829,9 +932,9 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
               'is--disabled': isDisabled
             }],
             title: getI18n('vxe.custom.setting.colVisible'),
-            onClick: () => {
+            onClick: evnt => {
               if (!isDisabled) {
-                changeCheckboxOption(column);
+                changeCheckboxOption(column, evnt);
               }
             }
           }, [(0, _vue.h)('span', {
@@ -896,20 +999,23 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
               value: 'right',
               disabled: isDisabled || isHidden || isMaxFixedColumn
             }],
-            'onUpdate:modelValue'(value) {
-              changeFixedOption(column, value);
+            onChange({
+              label,
+              $event
+            }) {
+              changeFixedOption(column, label, $event);
             }
           }) : (0, _vue.createCommentVNode)()]) : (0, _vue.createCommentVNode)()]));
         }
       });
       const scopedSlots = {
         default: () => {
-          if (defaultSlot) {
-            return $xeTable.callSlot(defaultSlot, params);
-          }
           return (0, _vue.h)('div', {
-            ref: bodyElemRef,
-            class: 'vxe-table-custom-popup--body'
+            ref: refBodyWrapperElem,
+            class: 'vxe-table-custom-popup--body-wrapper'
+          }, defaultSlot ? $xeTable.callSlot(defaultSlot, params) : [(0, _vue.h)('div', {
+            ref: refCustomBodyElem,
+            class: 'vxe-table-custom-popup--handle-wrapper'
           }, [topSlot ? (0, _vue.h)('div', {
             class: 'vxe-table-custom-popup--table-top'
           }, $xeTable.callSlot(topSlot, params)) : renderEmptyElement($xeTable), (0, _vue.h)('div', {
@@ -941,7 +1047,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
             default: () => trVNs
           })])]), bottomSlot ? (0, _vue.h)('div', {
             class: 'vxe-table-custom-popup--table-bottom'
-          }, $xeTable.callSlot(bottomSlot, params)) : renderEmptyElement($xeTable), renderDragTip()]);
+          }, $xeTable.callSlot(bottomSlot, params)) : renderEmptyElement($xeTable), renderDragTip()])]);
         },
         footer: () => {
           if (footerSlot) {
@@ -1039,6 +1145,21 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         (0, _log.errLog)('vxe.error.reqComp', ['vxe-radio-group']);
       }
     });
-    return renderVN;
+    const $xeTableCustomPanel = {
+      xID,
+      props,
+      context,
+      reactData: customPanelReactData,
+      internalData: customPanelInternalData,
+      xeTable: $xeTable,
+      getRefMaps: () => refMaps,
+      getComputeMaps: () => computeMaps,
+      renderVN
+    };
+    (0, _vue.provide)('$xeTableCustomPanel', $xeTableCustomPanel);
+    return $xeTableCustomPanel;
+  },
+  render() {
+    return this.renderVN();
   }
 });