vxe-table 3.15.44 → 3.15.45

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

@@ -4,20 +4,27 @@ import { getTpImg, addClass, removeClass, hasControlKey } from '../../../ui/src/
 import { errLog } from '../../../ui/src/log';
 import XEUtils from 'xe-utils';
 const { getI18n, getIcon, renderEmptyElement } = VxeUI;
-function showDropTip(_vm, evnt, optEl, showLine, dragPos) {
-    const { prevDragToChild } = _vm;
-    const el = _vm.$refs.bodyElemRef;
-    if (!el) {
+function showDropTip($xeTableCustomPanel, evnt, optEl, showLine, dragPos) {
+    const customPanelInternalData = $xeTableCustomPanel.internalData;
+    const bodyWrapperElem = $xeTableCustomPanel.$refs.refBodyWrapperElem;
+    if (!bodyWrapperElem) {
         return;
     }
-    const wrapperRect = el.getBoundingClientRect();
+    const customBodyElem = $xeTableCustomPanel.$refs.refCustomBodyElem;
+    if (!customBodyElem) {
+        return;
+    }
+    const { prevDragToChild } = customPanelInternalData;
+    const bodyWrapperRect = bodyWrapperElem.getBoundingClientRect();
+    const customBodyRect = customBodyElem.getBoundingClientRect();
     if (optEl) {
-        const dragLineEl = _vm.$refs.refDragLineElem;
+        const dragLineEl = $xeTableCustomPanel.$refs.refDragLineElem;
         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);
@@ -28,17 +35,17 @@ function showDropTip(_vm, evnt, optEl, showLine, dragPos) {
             }
         }
     }
-    const dragTipEl = _vm.$refs.refDragTipElem;
+    const dragTipEl = $xeTableCustomPanel.$refs.refDragTipElem;
     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');
     }
 }
-function hideDropTip(_vm) {
-    const dragTipEl = _vm.$refs.refDragTipElem;
-    const dragLineEl = _vm.$refs.refDragLineElem;
+function hideDropTip($xeTableCustomPanel) {
+    const dragTipEl = $xeTableCustomPanel.$refs.refDragTipElem;
+    const dragLineEl = $xeTableCustomPanel.$refs.refDragLineElem;
     if (dragTipEl) {
         dragTipEl.style.display = '';
     }
@@ -46,9 +53,10 @@ function hideDropTip(_vm) {
         dragLineEl.style.display = '';
     }
 }
-const renderDragTip = (h, _vm) => {
-    const $xeTable = _vm.$xeTable;
-    const dragCol = $xeTable.dragColumnRef;
+const renderDragTip = (h, $xeTableCustomPanel) => {
+    const $xeTable = $xeTableCustomPanel.$xeTable;
+    const customPanelReactData = $xeTableCustomPanel.reactData;
+    const { dragTipText } = customPanelReactData;
     const columnDragOpts = $xeTable.computeColumnDragOpts;
     return h('div', {}, [
         h('div', {
@@ -73,13 +81,19 @@ const renderDragTip = (h, _vm) => {
                     h('span', {
                         class: ['vxe-table-custom-popup--drag-tip-sub-status', getIcon().TABLE_DRAG_STATUS_SUB_ROW]
                     }),
+                    h('span', {
+                        class: ['vxe-table-custom-popup--drag-tip-group-status', getIcon().TABLE_DRAG_STATUS_AGG_GROUP]
+                    }),
+                    h('span', {
+                        class: ['vxe-table-custom-popup--drag-tip-values-status', getIcon().TABLE_DRAG_STATUS_AGG_VALUES]
+                    }),
                     h('span', {
                         class: ['vxe-table-custom-popup--drag-tip-disabled-status', getIcon().TABLE_DRAG_DISABLED]
                     })
                 ]),
                 h('div', {
                     class: 'vxe-table-custom-popup--drag-tip-content'
-                }, getI18n('vxe.custom.cstmDragTarget', [dragCol && dragCol.type !== 'html' ? dragCol.getTitle() : '']))
+                }, `${dragTipText || ''}`)
             ])
         ])
     ]);
@@ -89,11 +103,11 @@ const renderSimplePanel = (h, _vm) => {
     const props = _vm;
     const $xeTable = _vm.$xeTable;
     const tableProps = $xeTable;
-    const reactData = $xeTable;
+    const tableReactData = $xeTable;
     const $xeGrid = $xeTable.$xeGrid;
     const { customStore } = props;
     const { treeConfig, rowGroupConfig, aggregateConfig } = tableProps;
-    const { isCustomStatus, customColumnList } = reactData;
+    const { isCustomStatus, customColumnList } = tableReactData;
     const customOpts = $xeTable.computeCustomOpts;
     const { immediate } = customOpts;
     const columnDragOpts = $xeTable.computeColumnDragOpts;
@@ -159,9 +173,9 @@ const renderSimplePanel = (h, _vm) => {
                             title: getI18n('vxe.custom.setting.colVisible')
                         },
                         on: {
-                            click: () => {
+                            click: (evnt) => {
                                 if (!isDisabled) {
-                                    _vm.changeCheckboxOption(column);
+                                    _vm.changeCheckboxOption(column, evnt);
                                 }
                             }
                         }
@@ -227,8 +241,8 @@ const renderSimplePanel = (h, _vm) => {
                                 title: getI18n(column.renderFixed === 'left' ? 'vxe.toolbar.cancelFixed' : 'vxe.toolbar.fixedLeft')
                             },
                             on: {
-                                click: () => {
-                                    _vm.changeFixedOption(column, 'left');
+                                click: ({ $event }) => {
+                                    _vm.changeFixedOption(column, 'left', $event);
                                 }
                             }
                         }),
@@ -241,8 +255,8 @@ const renderSimplePanel = (h, _vm) => {
                                 title: getI18n(column.renderFixed === 'right' ? 'vxe.toolbar.cancelFixed' : 'vxe.toolbar.fixedRight')
                             },
                             on: {
-                                click: () => {
-                                    _vm.changeFixedOption(column, 'right');
+                                click: ({ $event }) => {
+                                    _vm.changeFixedOption(column, 'right', $event);
                                 }
                             }
                         })
@@ -263,152 +277,157 @@ const renderSimplePanel = (h, _vm) => {
             : {}
     }, customStore.visible
         ? [
-            !treeConfig && (aggregateConfig || rowGroupConfig) && $xeTable.getPivotTableAggregateSimplePanel
-                ? h($xeTable.getPivotTableAggregateSimplePanel(), {
-                    props: {
-                        customStore
-                    }
-                })
-                : renderEmptyElement($xeTable),
             h('div', {
-                class: 'vxe-table-custom--handle-wrapper'
+                ref: 'refBodyWrapperElem',
+                class: 'vxe-table-custom-body-wrapper'
             }, [
+                !treeConfig && (aggregateConfig || rowGroupConfig) && $xeTable.getPivotTableAggregateSimplePanel
+                    ? h($xeTable.getPivotTableAggregateSimplePanel(), {
+                        props: {
+                            customStore
+                        }
+                    })
+                    : renderEmptyElement($xeTable),
                 h('div', {
-                    class: 'vxe-table-custom--header'
-                }, headerSlot
-                    ? $xeTable.callSlot(headerSlot, params, h)
-                    : [
-                        h('ul', {
-                            class: 'vxe-table-custom--panel-list'
-                        }, [
-                            h('li', {
-                                class: 'vxe-table-custom--option'
+                    ref: 'refCustomBodyElem',
+                    class: 'vxe-table-custom--handle-wrapper'
+                }, [
+                    h('div', {
+                        class: 'vxe-table-custom--header'
+                    }, headerSlot
+                        ? $xeTable.callSlot(headerSlot, params, h)
+                        : [
+                            h('ul', {
+                                class: 'vxe-table-custom--panel-list'
                             }, [
-                                allowVisible
-                                    ? h('div', {
-                                        class: ['vxe-table-custom--checkbox-option', {
-                                                'is--checked': isAllChecked,
-                                                'is--indeterminate': isAllIndeterminate
-                                            }],
-                                        attrs: {
-                                            title: getI18n('vxe.table.allTitle')
-                                        },
-                                        on: {
-                                            click: _vm.allOptionEvent
-                                        }
-                                    }, [
-                                        h('span', {
-                                            class: ['vxe-checkbox--icon', isAllIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : (isAllChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED)]
-                                        }),
-                                        h('span', {
+                                h('li', {
+                                    class: 'vxe-table-custom--option'
+                                }, [
+                                    allowVisible
+                                        ? h('div', {
+                                            class: ['vxe-table-custom--checkbox-option', {
+                                                    'is--checked': isAllChecked,
+                                                    'is--indeterminate': isAllIndeterminate
+                                                }],
+                                            attrs: {
+                                                title: getI18n('vxe.table.allTitle')
+                                            },
+                                            on: {
+                                                click: _vm.allOptionEvent
+                                            }
+                                        }, [
+                                            h('span', {
+                                                class: ['vxe-checkbox--icon', isAllIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : (isAllChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED)]
+                                            }),
+                                            h('span', {
+                                                class: 'vxe-checkbox--label'
+                                            }, getI18n('vxe.toolbar.customAll'))
+                                        ])
+                                        : h('span', {
                                             class: 'vxe-checkbox--label'
-                                        }, getI18n('vxe.toolbar.customAll'))
-                                    ])
-                                    : h('span', {
-                                        class: 'vxe-checkbox--label'
-                                    }, getI18n('vxe.table.customTitle'))
+                                        }, getI18n('vxe.table.customTitle'))
+                                ])
                             ])
-                        ])
+                        ]),
+                    h('div', {
+                        class: 'vxe-table-custom--body'
+                    }, [
+                        topSlot
+                            ? h('div', {
+                                class: 'vxe-table-custom--panel-top'
+                            }, $xeTable.callSlot(topSlot, params, h))
+                            : renderEmptyElement($xeTable),
+                        defaultSlot
+                            ? h('div', {
+                                class: 'vxe-table-custom--panel-body'
+                            }, $xeTable.callSlot(defaultSlot, params, h))
+                            : h('transition-group', {
+                                class: 'vxe-table-custom--panel-list',
+                                props: {
+                                    name: 'vxe-table-custom--list',
+                                    tag: 'ul'
+                                },
+                                on: customWrapperOns
+                            }, colVNs),
+                        bottomSlot
+                            ? h('div', {
+                                class: 'vxe-table-custom--panel-bottom'
+                            }, $xeTable.callSlot(bottomSlot, params, h))
+                            : renderEmptyElement($xeTable)
                     ]),
-                h('div', {
-                    ref: 'bodyElemRef',
-                    class: 'vxe-table-custom--body'
-                }, [
-                    topSlot
-                        ? h('div', {
-                            class: 'vxe-table-custom--panel-top'
-                        }, $xeTable.callSlot(topSlot, params, h))
-                        : renderEmptyElement($xeTable),
-                    defaultSlot
+                    customOpts.showFooter
                         ? h('div', {
-                            class: 'vxe-table-custom--panel-body'
-                        }, $xeTable.callSlot(defaultSlot, params, h))
-                        : h('transition-group', {
-                            class: 'vxe-table-custom--panel-list',
-                            props: {
-                                name: 'vxe-table-custom--list',
-                                tag: 'ul'
-                            },
-                            on: customWrapperOns
-                        }, colVNs),
-                    bottomSlot
-                        ? h('div', {
-                            class: 'vxe-table-custom--panel-bottom'
-                        }, $xeTable.callSlot(bottomSlot, params, h))
-                        : renderEmptyElement($xeTable),
-                    renderDragTip(h, _vm)
-                ]),
-                customOpts.showFooter
-                    ? h('div', {
-                        class: 'vxe-table-custom--footer'
-                    }, footerSlot
-                        ? $xeTable.callSlot(footerSlot, params, h)
-                        : [
-                            h('div', {
-                                class: 'vxe-table-custom--footer-buttons'
-                            }, [
-                                h(VxeUIButtonComponent, {
-                                    props: {
-                                        mode: 'text',
-                                        content: customOpts.resetButtonText || getI18n('vxe.table.customRestore'),
-                                        disabled: !isCustomStatus
-                                    },
-                                    on: {
-                                        click: _vm.resetCustomEvent
-                                    }
-                                }),
-                                immediate
-                                    ? h(VxeUIButtonComponent, {
-                                        props: {
-                                            mode: 'text',
-                                            content: customOpts.closeButtonText || getI18n('vxe.table.customClose')
-                                        },
-                                        on: {
-                                            click: _vm.cancelCloseEvent
-                                        }
-                                    })
-                                    : h(VxeUIButtonComponent, {
+                            class: 'vxe-table-custom--footer'
+                        }, footerSlot
+                            ? $xeTable.callSlot(footerSlot, params, h)
+                            : [
+                                h('div', {
+                                    class: 'vxe-table-custom--footer-buttons'
+                                }, [
+                                    h(VxeUIButtonComponent, {
                                         props: {
                                             mode: 'text',
-                                            content: customOpts.resetButtonText || getI18n('vxe.table.customCancel')
+                                            content: customOpts.resetButtonText || getI18n('vxe.table.customRestore'),
+                                            disabled: !isCustomStatus
                                         },
                                         on: {
-                                            click: _vm.cancelCustomEvent
+                                            click: _vm.resetCustomEvent
                                         }
                                     }),
-                                immediate
-                                    ? renderEmptyElement($xeTable)
-                                    : h(VxeUIButtonComponent, {
-                                        props: {
-                                            mode: 'text',
-                                            status: 'primary',
-                                            content: customOpts.confirmButtonText || getI18n('vxe.table.customConfirm')
-                                        },
-                                        on: {
-                                            click: _vm.confirmCustomEvent
-                                        }
-                                    })
+                                    immediate
+                                        ? h(VxeUIButtonComponent, {
+                                            props: {
+                                                mode: 'text',
+                                                content: customOpts.closeButtonText || getI18n('vxe.table.customClose')
+                                            },
+                                            on: {
+                                                click: _vm.cancelCloseEvent
+                                            }
+                                        })
+                                        : h(VxeUIButtonComponent, {
+                                            props: {
+                                                mode: 'text',
+                                                content: customOpts.resetButtonText || getI18n('vxe.table.customCancel')
+                                            },
+                                            on: {
+                                                click: _vm.cancelCustomEvent
+                                            }
+                                        }),
+                                    immediate
+                                        ? renderEmptyElement($xeTable)
+                                        : h(VxeUIButtonComponent, {
+                                            props: {
+                                                mode: 'text',
+                                                status: 'primary',
+                                                content: customOpts.confirmButtonText || getI18n('vxe.table.customConfirm')
+                                            },
+                                            on: {
+                                                click: _vm.confirmCustomEvent
+                                            }
+                                        })
+                                ])
                             ])
-                        ])
-                    : null
+                        : null
+                ]),
+                renderDragTip(h, _vm)
             ])
         ]
         : []);
 };
-const renderPopupPanel = (h, _vm) => {
+const renderPopupPanel = (h, $xeTableCustomPanel) => {
     const VxeUIModalComponent = VxeUI.getComponent('VxeModal');
     const VxeUIDrawerComponent = VxeUI.getComponent('VxeDrawer');
     const VxeUIButtonComponent = VxeUI.getComponent('VxeButton');
     const VxeUINumberInputComponent = VxeUI.getComponent('VxeInput');
-    const $xeTableCustomPanel = _vm;
-    const props = _vm;
-    const $xeTable = _vm.$xeTable;
+    const _vm = $xeTableCustomPanel;
+    const props = $xeTableCustomPanel;
+    const $xeTable = $xeTableCustomPanel.$xeTable;
     const tableProps = $xeTable;
-    const reactData = $xeTable;
+    const tableReactData = $xeTable;
     const $xeGrid = $xeTable.$xeGrid;
     const { customStore } = props;
     const { resizable: allResizable } = tableProps;
-    const { isCustomStatus, customColumnList } = reactData;
+    const { isCustomStatus, customColumnList } = tableReactData;
     const customOpts = $xeTable.computeCustomOpts;
     const { immediate } = customOpts;
     const columnDragOpts = $xeTable.computeColumnDragOpts;
@@ -493,9 +512,9 @@ const renderPopupPanel = (h, _vm) => {
                                 title: getI18n('vxe.custom.setting.colVisible')
                             },
                             on: {
-                                click: () => {
+                                click: (evnt) => {
                                     if (!isDisabled) {
-                                        _vm.changeCheckboxOption(column);
+                                        _vm.changeCheckboxOption(column, evnt);
                                     }
                                 }
                             }
@@ -601,8 +620,8 @@ const renderPopupPanel = (h, _vm) => {
                                     ]
                                 },
                                 on: {
-                                    input(value) {
-                                        _vm.changeFixedOption(column, value);
+                                    change({ label, $event }) {
+                                        _vm.changeFixedOption(column, label, $event);
                                     }
                                 }
                             })
@@ -613,92 +632,96 @@ const renderPopupPanel = (h, _vm) => {
     });
     const scopedSlots = {
         default: () => {
-            if (defaultSlot) {
-                return $xeTable.callSlot(defaultSlot, params, h);
-            }
             return h('div', {
-                ref: 'bodyElemRef',
-                class: 'vxe-table-custom-popup--body'
-            }, [
-                topSlot
-                    ? h('div', {
-                        class: 'vxe-table-custom-popup--table-top'
-                    }, $xeTable.callSlot(topSlot, params, h))
-                    : renderEmptyElement($xeTable),
-                h('div', {
-                    class: 'vxe-table-custom-popup--table-wrapper'
-                }, [
-                    h('table', {}, [
-                        h('colgroup', {}, [
-                            allowVisible
-                                ? h('col', {
-                                    class: 'vxe-table-custom-popup--table-col-seq'
-                                })
-                                : renderEmptyElement($xeTable),
-                            h('col', {
-                                class: 'vxe-table-custom-popup--table-col-title'
-                            }),
-                            allowResizable
-                                ? h('col', {
-                                    class: 'vxe-table-custom-popup--table-col-width'
-                                })
-                                : renderEmptyElement($xeTable),
-                            allowFixed
-                                ? h('col', {
-                                    class: 'vxe-table-custom-popup--table-col-fixed'
-                                })
-                                : renderEmptyElement($xeTable)
-                        ]),
-                        h('thead', {}, [
-                            h('tr', {}, [
-                                allowVisible
-                                    ? h('th', {}, [
-                                        h('div', {
-                                            class: ['vxe-table-custom--checkbox-option', {
-                                                    'is--checked': isAllChecked,
-                                                    'is--indeterminate': isAllIndeterminate
-                                                }],
-                                            attrs: {
-                                                title: getI18n('vxe.table.allTitle')
-                                            },
-                                            on: {
-                                                click: _vm.allOptionEvent
-                                            }
-                                        }, [
-                                            h('span', {
-                                                class: ['vxe-checkbox--icon', isAllIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : (isAllChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED)]
-                                            }),
-                                            h('span', {
-                                                class: 'vxe-checkbox--label'
-                                            }, getI18n('vxe.toolbar.customAll'))
-                                        ])
+                ref: 'refBodyWrapperElem',
+                class: 'vxe-table-custom-popup--body-wrapper'
+            }, defaultSlot
+                ? $xeTable.callSlot(defaultSlot, params, h)
+                : [
+                    h('div', {
+                        ref: 'refCustomBodyElem',
+                        class: 'vxe-table-custom-popup--handle-wrapper'
+                    }, [
+                        topSlot
+                            ? h('div', {
+                                class: 'vxe-table-custom-popup--table-top'
+                            }, $xeTable.callSlot(topSlot, params, h))
+                            : renderEmptyElement($xeTable),
+                        h('div', {
+                            class: 'vxe-table-custom-popup--table-wrapper'
+                        }, [
+                            h('table', {}, [
+                                h('colgroup', {}, [
+                                    allowVisible
+                                        ? h('col', {
+                                            class: 'vxe-table-custom-popup--table-col-seq'
+                                        })
+                                        : renderEmptyElement($xeTable),
+                                    h('col', {
+                                        class: 'vxe-table-custom-popup--table-col-title'
+                                    }),
+                                    allowResizable
+                                        ? h('col', {
+                                            class: 'vxe-table-custom-popup--table-col-width'
+                                        })
+                                        : renderEmptyElement($xeTable),
+                                    allowFixed
+                                        ? h('col', {
+                                            class: 'vxe-table-custom-popup--table-col-fixed'
+                                        })
+                                        : renderEmptyElement($xeTable)
+                                ]),
+                                h('thead', {}, [
+                                    h('tr', {}, [
+                                        allowVisible
+                                            ? h('th', {}, [
+                                                h('div', {
+                                                    class: ['vxe-table-custom--checkbox-option', {
+                                                            'is--checked': isAllChecked,
+                                                            'is--indeterminate': isAllIndeterminate
+                                                        }],
+                                                    attrs: {
+                                                        title: getI18n('vxe.table.allTitle')
+                                                    },
+                                                    on: {
+                                                        click: _vm.allOptionEvent
+                                                    }
+                                                }, [
+                                                    h('span', {
+                                                        class: ['vxe-checkbox--icon', isAllIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : (isAllChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED)]
+                                                    }),
+                                                    h('span', {
+                                                        class: 'vxe-checkbox--label'
+                                                    }, getI18n('vxe.toolbar.customAll'))
+                                                ])
+                                            ])
+                                            : renderEmptyElement($xeTable),
+                                        h('th', {}, getI18n('vxe.custom.setting.colTitle')),
+                                        allowResizable
+                                            ? h('th', {}, getI18n('vxe.custom.setting.colResizable'))
+                                            : renderEmptyElement($xeTable),
+                                        allowFixed
+                                            ? h('th', {}, getI18n(`vxe.custom.setting.${maxFixedSize ? 'colFixedMax' : 'colFixed'}`, [maxFixedSize]))
+                                            : renderEmptyElement($xeTable)
                                     ])
-                                    : renderEmptyElement($xeTable),
-                                h('th', {}, getI18n('vxe.custom.setting.colTitle')),
-                                allowResizable
-                                    ? h('th', {}, getI18n('vxe.custom.setting.colResizable'))
-                                    : renderEmptyElement($xeTable),
-                                allowFixed
-                                    ? h('th', {}, getI18n(`vxe.custom.setting.${maxFixedSize ? 'colFixedMax' : 'colFixed'}`, [maxFixedSize]))
-                                    : renderEmptyElement($xeTable)
+                                ]),
+                                h('transition-group', {
+                                    class: 'vxe-table-custom--panel-list',
+                                    props: {
+                                        tag: 'tbody',
+                                        name: 'vxe-table-custom--list'
+                                    }
+                                }, trVNs)
                             ])
                         ]),
-                        h('transition-group', {
-                            class: 'vxe-table-custom--panel-list',
-                            props: {
-                                tag: 'tbody',
-                                name: 'vxe-table-custom--list'
-                            }
-                        }, trVNs)
+                        bottomSlot
+                            ? h('div', {
+                                class: 'vxe-table-custom-popup--table-bottom'
+                            }, $xeTable.callSlot(bottomSlot, params, h))
+                            : renderEmptyElement($xeTable),
+                        renderDragTip(h, _vm)
                     ])
-                ]),
-                bottomSlot
-                    ? h('div', {
-                        class: 'vxe-table-custom-popup--table-bottom'
-                    }, $xeTable.callSlot(bottomSlot, params, h))
-                    : renderEmptyElement($xeTable),
-                renderDragTip(h, _vm)
-            ]);
+                ]);
         },
         footer: () => {
             if (footerSlot) {
@@ -814,27 +837,44 @@ export default {
             default: () => ({})
         }
     },
+    provide() {
+        const $xeTableCustomPanel = this;
+        return {
+            $xeTableCustomPanel
+        };
+    },
     inject: {
         $xeTable: {
             default: null
         }
     },
     data() {
+        const reactData = {
+            dragCol: null,
+            dragGroup: null,
+            dragValues: null,
+            dragTipText: ''
+        };
+        const internalData = {
+        // prevDragCol: undefined,
+        // prevDragToChild: false,
+        // prevDragPos: null
+        };
         return {
-            prevDragCol: undefined,
-            prevDragToChild: false,
-            prevDragPos: null
+            reactData,
+            internalData
         };
     },
     computed: {},
     created() {
+        const $xeTableCustomPanel = this;
         const VxeUIModalComponent = VxeUI.getComponent('VxeModal');
         const VxeUIDrawerComponent = VxeUI.getComponent('VxeDrawer');
         const VxeUIButtonComponent = VxeUI.getComponent('VxeButton');
         const VxeUINumberInputComponent = VxeUI.getComponent('VxeNumberInput');
         const VxeUIRadioGroupComponent = VxeUI.getComponent('VxeRadioGroup');
-        this.$nextTick(() => {
-            const $xeTable = this.$xeTable;
+        $xeTableCustomPanel.$nextTick(() => {
+            const $xeTable = $xeTableCustomPanel.$xeTable;
             const { customOpts } = $xeTable;
             const { mode } = customOpts;
             if (!VxeUIModalComponent && (mode === 'modal')) {
@@ -855,23 +895,27 @@ export default {
         });
     },
     render(h) {
-        const $xeTable = this.$xeTable;
+        const $xeTableCustomPanel = this;
+        const $xeTable = $xeTableCustomPanel.$xeTable;
         const customOpts = $xeTable.computeCustomOpts;
         if (['modal', 'drawer', 'popup'].includes(`${customOpts.mode}`)) {
-            return renderPopupPanel(h, this);
+            return renderPopupPanel(h, $xeTableCustomPanel);
         }
-        return renderSimplePanel(h, this);
+        return renderSimplePanel(h, $xeTableCustomPanel);
     },
     methods: {
         handleWrapperMouseenterEvent(evnt) {
-            const $xeTable = this.$xeTable;
+            const $xeTableCustomPanel = this;
+            const $xeTable = $xeTableCustomPanel.$xeTable;
             const { customStore } = this;
             customStore.activeWrapper = true;
             $xeTable.customOpenEvent(evnt);
         },
         handleWrapperMouseleaveEvent(evnt) {
-            const $xeTable = this.$xeTable;
-            const { customStore } = this;
+            const $xeTableCustomPanel = this;
+            const $xeTable = $xeTableCustomPanel.$xeTable;
+            const props = $xeTableCustomPanel;
+            const { customStore } = props;
             customStore.activeWrapper = false;
             setTimeout(() => {
                 if (!customStore.activeBtn && !customStore.activeWrapper) {
@@ -883,26 +927,30 @@ export default {
             return {};
         },
         confirmCustomEvent({ $event }) {
-            const $xeTable = this.$xeTable;
-            const reactData = $xeTable;
-            reactData.isCustomStatus = true;
+            const $xeTableCustomPanel = this;
+            const $xeTable = $xeTableCustomPanel.$xeTable;
+            const tableReactData = $xeTable;
+            tableReactData.isCustomStatus = true;
             $xeTable.saveCustom();
             $xeTable.closeCustom();
             $xeTable.emitCustomEvent('confirm', $event);
         },
         cancelCloseEvent({ $event }) {
-            const $xeTable = this.$xeTable;
+            const $xeTableCustomPanel = this;
+            const $xeTable = $xeTableCustomPanel.$xeTable;
             $xeTable.closeCustom();
             $xeTable.emitCustomEvent('close', $event);
         },
         cancelCustomEvent({ $event }) {
-            const $xeTable = this.$xeTable;
+            const $xeTableCustomPanel = this;
+            const $xeTable = $xeTableCustomPanel.$xeTable;
             $xeTable.cancelCustom();
             $xeTable.closeCustom();
             $xeTable.emitCustomEvent('cancel', $event);
         },
         handleResetCustomEvent(evnt) {
-            const $xeTable = this.$xeTable;
+            const $xeTableCustomPanel = this;
+            const $xeTable = $xeTableCustomPanel.$xeTable;
             $xeTable.resetCustom(true);
             $xeTable.closeCustom();
             $xeTable.emitCustomEvent('reset', evnt);
@@ -923,26 +971,11 @@ export default {
                 this.handleResetCustomEvent(evnt);
             }
         },
-        resetPopupCustomEvent(evnt) {
-            if (VxeUI.modal) {
-                VxeUI.modal.confirm({
-                    content: getI18n('vxe.custom.cstmConfirmRestore'),
-                    className: 'vxe-table--ignore-clear',
-                    escClosable: true
-                }).then(type => {
-                    if (type === 'confirm') {
-                        this.resetCustomEvent(evnt);
-                    }
-                });
-            }
-            else {
-                this.resetCustomEvent(evnt);
-            }
-        },
         handleOptionCheck(column) {
-            const $xeTable = this.$xeTable;
-            const reactData = $xeTable;
-            const { customColumnList } = reactData;
+            const $xeTableCustomPanel = this;
+            const $xeTable = $xeTableCustomPanel.$xeTable;
+            const tableReactData = $xeTable;
+            const { customColumnList } = tableReactData;
             const matchObj = XEUtils.findTree(customColumnList, item => item === column);
             if (matchObj && matchObj.parent) {
                 const { parent } = matchObj;
@@ -953,9 +986,10 @@ export default {
                 }
             }
         },
-        changeCheckboxOption(column) {
-            const $xeTable = this.$xeTable;
-            const reactData = $xeTable;
+        changeCheckboxOption(column, evnt) {
+            const $xeTableCustomPanel = this;
+            const $xeTable = $xeTableCustomPanel.$xeTable;
+            const tableReactData = $xeTable;
             const customOpts = $xeTable.computeCustomOpts;
             const isChecked = !column.renderVisible;
             if (customOpts.immediate) {
@@ -964,7 +998,7 @@ export default {
                     item.renderVisible = isChecked;
                     item.halfVisible = false;
                 });
-                reactData.isCustomStatus = true;
+                tableReactData.isCustomStatus = true;
                 $xeTable.handleCustom();
                 $xeTable.saveCustomStore('update:visible');
             }
@@ -976,28 +1010,33 @@ export default {
             }
             this.handleOptionCheck(column);
             $xeTable.checkCustomStatus();
+            $xeTable.dispatchEvent('custom-visible-change', { column, checked: isChecked }, evnt);
         },
         changeColumnWidth(column) {
-            const $xeTable = this.$xeTable;
-            const reactData = $xeTable;
+            const $xeTableCustomPanel = this;
+            const $xeTable = $xeTableCustomPanel.$xeTable;
+            const tableReactData = $xeTable;
             const customOpts = $xeTable.computeCustomOpts;
             if (customOpts.immediate) {
                 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');
                 }
             }
         },
-        changeFixedOption(column, colFixed) {
-            const $xeTable = this.$xeTable;
-            const reactData = $xeTable;
+        changeFixedOption(column, colFixed, evnt) {
+            const $xeTableCustomPanel = this;
+            const $xeTable = $xeTableCustomPanel.$xeTable;
+            const tableReactData = $xeTable;
             const isMaxFixedColumn = $xeTable.computeIsMaxFixedColumn;
             const customOpts = $xeTable.computeCustomOpts;
+            let targetFixed = null;
             if (customOpts.immediate) {
                 if (column.renderFixed === colFixed) {
+                    targetFixed = '';
                     XEUtils.eachTree([column], col => {
                         col.fixed = '';
                         col.renderFixed = '';
@@ -1005,37 +1044,70 @@ export default {
                 }
                 else {
                     if (!isMaxFixedColumn || column.renderFixed) {
+                        targetFixed = colFixed;
                         XEUtils.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.eachTree([column], col => {
                         col.renderFixed = '';
                     });
                 }
                 else {
                     if (!isMaxFixedColumn || column.renderFixed) {
+                        targetFixed = colFixed;
                         XEUtils.eachTree([column], col => {
                             col.renderFixed = colFixed;
                         });
                     }
                 }
             }
+            if (!targetFixed !== null) {
+                $xeTable.dispatchEvent('custom-fixed-change', { column, fixed: targetFixed }, evnt);
+            }
         },
-        allOptionEvent() {
-            const $xeTable = this.$xeTable;
+        allOptionEvent(evnt) {
+            const $xeTableCustomPanel = this;
+            const $xeTable = $xeTableCustomPanel.$xeTable;
+            const tableReactData = $xeTable;
+            const { customStore } = tableReactData;
+            const isAll = !customStore.isAll;
             $xeTable.toggleCustomAllCheckbox();
+            $xeTable.dispatchEvent('custom-visible-all', { checked: isAll }, evnt);
+        },
+        updateColDropTipContent() {
+            const $xeTableCustomPanel = this;
+            const $xeTable = $xeTableCustomPanel.$xeTable;
+            const customPanelReactData = $xeTableCustomPanel.reactData;
+            const { dragCol } = customPanelReactData;
+            const columnDragOpts = $xeTable.computeColumnDragOpts;
+            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;
         },
         sortMousedownEvent(evnt) {
-            const $xeTable = this.$xeTable;
+            const $xeTableCustomPanel = this;
+            const $xeTable = $xeTableCustomPanel.$xeTable;
+            const customPanelReactData = $xeTableCustomPanel.reactData;
             const btnEl = evnt.currentTarget;
             const cellEl = btnEl.parentElement;
             const tdEl = cellEl.parentElement;
@@ -1043,40 +1115,56 @@ export default {
             const colid = trEl.getAttribute('colid');
             const column = $xeTable.getColumnById(colid);
             trEl.draggable = true;
-            this.dragCol = column;
+            customPanelReactData.dragCol = column;
+            this.updateColDropTipContent();
             addClass(trEl, 'active--drag-origin');
         },
         sortMouseupEvent(evnt) {
+            const $xeTableCustomPanel = this;
+            const customPanelReactData = $xeTableCustomPanel.reactData;
             const btnEl = evnt.currentTarget;
             const cellEl = btnEl.parentElement;
             const tdEl = cellEl.parentElement;
             const trEl = tdEl.parentElement;
-            hideDropTip(this);
+            hideDropTip($xeTableCustomPanel);
             trEl.draggable = false;
-            this.dragCol = null;
+            customPanelReactData.dragCol = null;
             removeClass(trEl, 'active--drag-origin');
         },
         sortDragstartEvent(evnt) {
+            const $xeTableCustomPanel = this;
+            const customPanelReactData = $xeTableCustomPanel.reactData;
             if (evnt.dataTransfer) {
                 evnt.dataTransfer.setDragImage(getTpImg(), 0, 0);
             }
+            customPanelReactData.dragGroup = null;
+            customPanelReactData.dragValues = null;
         },
         sortDragendEvent(evnt) {
-            const $xeTable = this.$xeTable;
+            const $xeTableCustomPanel = this;
+            const $xeTable = $xeTableCustomPanel.$xeTable;
             const tableProps = $xeTable;
-            const reactData = $xeTable;
-            const internalData = $xeTable;
-            const { dragCol, prevDragPos, prevDragCol, prevDragToChild } = this;
+            const tableReactData = $xeTable;
+            const tableInternalData = $xeTable;
+            const customPanelReactData = $xeTableCustomPanel.reactData;
+            const customPanelInternalData = $xeTableCustomPanel.internalData;
             const { mouseConfig } = tableProps;
-            const { customColumnList } = reactData;
-            const { collectColumn } = internalData;
+            const { customColumnList } = tableReactData;
+            const { collectColumn } = tableInternalData;
             const customOpts = $xeTable.computeCustomOpts;
             const { immediate } = customOpts;
             const trEl = evnt.currentTarget;
             const columnDragOpts = $xeTable.computeColumnDragOpts;
             const { isCrossDrag, isSelfToChildDrag, 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;
@@ -1199,7 +1287,7 @@ export default {
                             nafIndex = XEUtils.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();
@@ -1221,23 +1309,28 @@ export default {
                             }
                         }, evnt);
                         if (immediate) {
-                            reactData.customColumnList = collectColumn.slice(0);
+                            tableReactData.customColumnList = collectColumn.slice(0);
                             $xeTable.handleColDragSwapColumn();
                         }
                     }).catch(() => {
                     });
                 }
             }
-            hideDropTip(this);
-            this.dragCol.value = null;
+            hideDropTip($xeTableCustomPanel);
+            customPanelReactData.dragCol = null;
+            customPanelReactData.dragGroup = null;
+            customPanelReactData.dragValues = null;
             trEl.draggable = false;
             trEl.removeAttribute('drag-pos');
             removeClass(trEl, 'active--drag-target');
             removeClass(trEl, 'active--drag-origin');
         },
         sortDragoverEvent(evnt) {
-            const $xeTable = this.$xeTable;
-            const { dragCol } = this;
+            const $xeTableCustomPanel = this;
+            const $xeTable = $xeTableCustomPanel.$xeTable;
+            const customPanelReactData = $xeTableCustomPanel.reactData;
+            const customPanelInternalData = $xeTableCustomPanel.internalData;
+            const { dragCol } = customPanelReactData;
             const customOpts = $xeTable.computeCustomOpts;
             const { immediate } = customOpts;
             const columnDragOpts = $xeTable.computeColumnDragOpts;
@@ -1246,6 +1339,8 @@ export default {
             const isControlKey = hasControlKey(evnt);
             const colid = optEl.getAttribute('colid');
             const column = $xeTable.getColumnById(colid);
+            customPanelReactData.dragGroup = null;
+            customPanelReactData.dragValues = null;
             // 是否移入有效列
             if (column && (isCrossDrag || column.level === 1)) {
                 evnt.preventDefault();
@@ -1255,13 +1350,13 @@ export default {
                     (!isCrossDrag && column.level > 1) ||
                     (!immediate && column.level > 1) ||
                     column.renderFixed) {
-                    showDropTip(this, evnt, optEl, false, dragPos);
+                    showDropTip($xeTableCustomPanel, evnt, optEl, false, dragPos);
                     return;
                 }
-                this.prevDragToChild = !!((isCrossDrag && isToChildDrag) && isControlKey && immediate);
-                this.prevDragCol = column;
-                this.prevDragPos = dragPos;
-                showDropTip(this, evnt, optEl, true, dragPos);
+                customPanelInternalData.prevDragToChild = !!((isCrossDrag && isToChildDrag) && isControlKey && immediate);
+                customPanelInternalData.prevDragCol = column;
+                customPanelInternalData.prevDragPos = dragPos;
+                showDropTip($xeTableCustomPanel, evnt, optEl, true, dragPos);
             }
         }
     }