vxe-table 4.13.44 → 4.13.46

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

@@ -1,4 +1,4 @@
-import { h, inject, ref, nextTick, TransitionGroup, createCommentVNode } from 'vue';
+import { h, inject, ref, provide, nextTick, TransitionGroup, createCommentVNode, reactive } from 'vue';
 import { defineVxeComponent } from '../../../ui/src/comp';
 import { VxeUI } from '../../../ui';
 import { formatText } from '../../../ui/src/utils';
@@ -14,23 +14,40 @@ export default defineVxeComponent({
             default: () => ({})
         }
     },
-    setup(props) {
+    setup(props, context) {
+        const xID = XEUtils.uniqueId();
         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');
         const $xeTable = inject('$xeTable', {});
-        const { props: tableProps, reactData, internalData } = $xeTable;
+        const { props: tableProps, reactData: tableReactData, internalData: tableInternalData } = $xeTable;
         const { computeCustomOpts, computeColumnDragOpts, computeColumnOpts, computeIsMaxFixedColumn, computeResizableOpts } = $xeTable.getComputeMaps();
         const refElem = ref();
-        const bodyElemRef = ref();
+        const refBodyWrapperElem = ref();
+        const refCustomBodyElem = ref();
         const refDragLineElem = ref();
         const refDragTipElem = ref();
-        const dragColumnRef = ref();
-        let prevDragCol;
-        let prevDragToChild = false;
-        let prevDragPos;
+        const customPanelReactData = reactive({
+            dragCol: null,
+            prevDragGroup: null,
+            prevDragValues: null,
+            dragTipText: ''
+        });
+        const customPanelInternalData = {
+        // prevDragCol: undefined,
+        // prevDragToChild: false,
+        // prevDragPos: null
+        };
+        const refMaps = {
+            refElem,
+            refBodyWrapperElem,
+            refCustomBodyElem,
+            refDragLineElem,
+            refDragTipElem
+        };
+        const computeMaps = {};
         const handleWrapperMouseenterEvent = (evnt) => {
             const { customStore } = props;
             customStore.activeWrapper = true;
@@ -46,7 +63,7 @@ export default defineVxeComponent({
             }, 300);
         };
         const confirmCustomEvent = ({ $event }) => {
-            reactData.isCustomStatus = true;
+            tableReactData.isCustomStatus = true;
             $xeTable.saveCustom();
             $xeTable.closeCustom();
             $xeTable.emitCustomEvent('confirm', $event);
@@ -82,7 +99,7 @@ export default defineVxeComponent({
             }
         };
         const handleOptionCheck = (column) => {
-            const { customColumnList } = reactData;
+            const { customColumnList } = tableReactData;
             const matchObj = XEUtils.findTree(customColumnList, item => item === column);
             if (matchObj && matchObj.parent) {
                 const { parent } = matchObj;
@@ -93,7 +110,7 @@ export default defineVxeComponent({
                 }
             }
         };
-        const changeCheckboxOption = (column) => {
+        const changeCheckboxOption = (column, evnt) => {
             const isChecked = !column.renderVisible;
             const customOpts = computeCustomOpts.value;
             if (customOpts.immediate) {
@@ -102,7 +119,7 @@ export default defineVxeComponent({
                     item.renderVisible = isChecked;
                     item.halfVisible = false;
                 });
-                reactData.isCustomStatus = true;
+                tableReactData.isCustomStatus = true;
                 $xeTable.handleCustom();
                 $xeTable.saveCustomStore('update:visible');
             }
@@ -114,6 +131,7 @@ export default defineVxeComponent({
             }
             handleOptionCheck(column);
             $xeTable.checkCustomStatus();
+            $xeTable.dispatchEvent('custom-visible-change', { column, checked: isChecked }, evnt);
         };
         const changeColumnWidth = (column) => {
             const customOpts = computeCustomOpts.value;
@@ -121,17 +139,19 @@ export default 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.eachTree([column], col => {
                         col.fixed = '';
                         col.renderFixed = '';
@@ -139,47 +159,63 @@ export default defineVxeComponent({
                 }
                 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);
+            }
         };
-        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 wrapperRect = el.getBoundingClientRect();
+            const customBodyElem = refCustomBodyElem.value;
+            if (!customBodyElem) {
+                return;
+            }
+            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);
@@ -193,11 +229,28 @@ export default 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;
@@ -216,7 +269,8 @@ export default defineVxeComponent({
             const colid = trEl.getAttribute('colid');
             const column = $xeTable.getColumnById(colid);
             trEl.draggable = true;
-            dragColumnRef.value = column;
+            customPanelReactData.dragCol = column;
+            updateColDropTipContent();
             addClass(trEl, 'active--drag-origin');
         };
         const sortMouseupEvent = (evnt) => {
@@ -226,26 +280,34 @@ export default defineVxeComponent({
             const trEl = tdEl.parentElement;
             hideDropTip();
             trEl.draggable = false;
-            dragColumnRef.value = null;
+            customPanelReactData.dragCol = null;
             removeClass(trEl, 'active--drag-origin');
         };
         const sortDragstartEvent = (evnt) => {
             if (evnt.dataTransfer) {
                 evnt.dataTransfer.setDragImage(getTpImg(), 0, 0);
             }
+            customPanelInternalData.prevDragGroup = null;
+            customPanelInternalData.prevDragValues = null;
         };
         const sortDragendEvent = (evnt) => {
             const { mouseConfig } = tableProps;
-            const { customColumnList } = reactData;
-            const { collectColumn } = internalData;
+            const { customColumnList } = tableReactData;
+            const { collectColumn } = tableInternalData;
             const customOpts = computeCustomOpts.value;
             const { immediate } = customOpts;
             const trEl = evnt.currentTarget;
-            const dragCol = dragColumnRef.value;
             const columnDragOpts = computeColumnDragOpts.value;
             const { isCrossDrag, isSelfToChildDrag, isToChildDrag, dragEndMethod } = columnDragOpts;
+            const { dragCol } = customPanelReactData;
+            const { prevDragCol, prevDragGroup, prevDragValues, prevDragPos, prevDragToChild } = customPanelInternalData;
             const dragOffsetIndex = prevDragPos === 'bottom' ? 1 : 0;
-            if (prevDragCol && dragCol) {
+            if (prevDragGroup || prevDragValues) {
+                if ($xeTable.handlePivotTableAggregatePanelDragendEvent) {
+                    $xeTable.handlePivotTableAggregatePanelDragendEvent(evnt);
+                }
+            }
+            else if (prevDragCol && dragCol) {
                 // 判断是否有拖动
                 if (prevDragCol !== dragCol) {
                     const dragColumn = dragCol;
@@ -368,7 +430,7 @@ export default defineVxeComponent({
                             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();
@@ -390,7 +452,7 @@ export default defineVxeComponent({
                             }
                         }, evnt);
                         if (immediate) {
-                            reactData.customColumnList = collectColumn.slice(0);
+                            tableReactData.customColumnList = collectColumn.slice(0);
                             $xeTable.handleColDragSwapColumn();
                         }
                     }).catch(() => {
@@ -398,7 +460,9 @@ export default defineVxeComponent({
                 }
             }
             hideDropTip();
-            dragColumnRef.value = null;
+            customPanelReactData.dragCol = null;
+            customPanelInternalData.prevDragGroup = null;
+            customPanelInternalData.prevDragValues = null;
             trEl.draggable = false;
             trEl.removeAttribute('drag-pos');
             removeClass(trEl, 'active--drag-target');
@@ -413,7 +477,9 @@ export default defineVxeComponent({
             const isControlKey = hasControlKey(evnt);
             const colid = optEl.getAttribute('colid');
             const column = $xeTable.getColumnById(colid);
-            const dragCol = dragColumnRef.value;
+            const { dragCol } = customPanelReactData;
+            customPanelInternalData.prevDragGroup = null;
+            customPanelInternalData.prevDragValues = null;
             // 是否移入有效列
             if (column && (isCrossDrag || column.level === 1)) {
                 evnt.preventDefault();
@@ -426,14 +492,14 @@ export default 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 h('div', {}, [
                 h('div', {
@@ -458,13 +524,19 @@ export default defineVxeComponent({
                             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 || ''}`)
                     ])
                 ])
             ]);
@@ -474,7 +546,7 @@ export default defineVxeComponent({
             const tableProps = $xeTable.props;
             const { customStore } = props;
             const { treeConfig, rowGroupConfig, aggregateConfig } = tableProps;
-            const { isCustomStatus, customColumnList } = reactData;
+            const { isCustomStatus, customColumnList } = tableReactData;
             const customOpts = computeCustomOpts.value;
             const { immediate } = customOpts;
             const columnDragOpts = computeColumnDragOpts.value;
@@ -533,9 +605,9 @@ export default defineVxeComponent({
                                         'is--disabled': isDisabled
                                     }],
                                 title: getI18n('vxe.custom.setting.colVisible'),
-                                onClick: () => {
+                                onClick: (evnt) => {
                                     if (!isDisabled) {
-                                        changeCheckboxOption(column);
+                                        changeCheckboxOption(column, evnt);
                                     }
                                 }
                             }, [
@@ -587,8 +659,8 @@ export default 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);
                                         }
                                     })
                                     : createCommentVNode(),
@@ -599,8 +671,8 @@ export default 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);
                                         }
                                     })
                                     : createCommentVNode()
@@ -622,115 +694,120 @@ export default defineVxeComponent({
                     : {}
             }, customStore.visible
                 ? [
-                    !treeConfig && (aggregateConfig || rowGroupConfig) && $xeTable.getPivotTableAggregateSimplePanel
-                        ? h($xeTable.getPivotTableAggregateSimplePanel(), {
-                            customStore
-                        })
-                        : renderEmptyElement($xeTable),
                     h('div', {
-                        class: 'vxe-table-custom--handle-wrapper'
+                        ref: refBodyWrapperElem,
+                        class: 'vxe-table-custom-simple--body-wrapper'
                     }, [
+                        !treeConfig && (aggregateConfig || rowGroupConfig) && $xeTable.getPivotTableAggregateSimplePanel
+                            ? h($xeTable.getPivotTableAggregateSimplePanel(), {
+                                customStore
+                            })
+                            : renderEmptyElement($xeTable),
                         h('div', {
-                            class: 'vxe-table-custom--header'
-                        }, headerSlot
-                            ? $xeTable.callSlot(headerSlot, params)
-                            : [
-                                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('ul', {
+                                        class: 'vxe-table-custom--panel-list'
                                     }, [
-                                        allowVisible
-                                            ? h('div', {
-                                                class: ['vxe-table-custom--checkbox-option', {
-                                                        'is--checked': isAllChecked,
-                                                        'is--indeterminate': isAllIndeterminate
-                                                    }],
-                                                title: getI18n('vxe.table.allTitle'),
-                                                onClick: 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
+                                                        }],
+                                                    title: getI18n('vxe.table.allTitle'),
+                                                    onClick: 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))
+                                    : renderEmptyElement($xeTable),
+                                defaultSlot
+                                    ? h('div', {
+                                        class: 'vxe-table-custom--panel-body'
+                                    }, $xeTable.callSlot(defaultSlot, params))
+                                    : h(TransitionGroup, Object.assign({ class: 'vxe-table-custom--panel-list', name: 'vxe-table-custom--list', tag: 'ul' }, customWrapperOns), {
+                                        default: () => colVNs
+                                    }),
+                                bottomSlot
+                                    ? h('div', {
+                                        class: 'vxe-table-custom--panel-bottom'
+                                    }, $xeTable.callSlot(bottomSlot, params))
+                                    : renderEmptyElement($xeTable)
                             ]),
-                        h('div', {
-                            ref: bodyElemRef,
-                            class: 'vxe-table-custom--body'
-                        }, [
-                            topSlot
-                                ? h('div', {
-                                    class: 'vxe-table-custom--panel-top'
-                                }, $xeTable.callSlot(topSlot, params))
-                                : renderEmptyElement($xeTable),
-                            defaultSlot
+                            customOpts.showFooter
                                 ? h('div', {
-                                    class: 'vxe-table-custom--panel-body'
-                                }, $xeTable.callSlot(defaultSlot, params))
-                                : h(TransitionGroup, Object.assign({ class: 'vxe-table-custom--panel-list', name: 'vxe-table-custom--list', tag: 'ul' }, customWrapperOns), {
-                                    default: () => colVNs
-                                }),
-                            bottomSlot
-                                ? h('div', {
-                                    class: 'vxe-table-custom--panel-bottom'
-                                }, $xeTable.callSlot(bottomSlot, params))
-                                : renderEmptyElement($xeTable),
-                            renderDragTip()
-                        ]),
-                        customOpts.showFooter
-                            ? h('div', {
-                                class: 'vxe-table-custom--footer'
-                            }, footerSlot
-                                ? $xeTable.callSlot(footerSlot, params)
-                                : [
-                                    h('div', {
-                                        class: 'vxe-table-custom--footer-buttons'
-                                    }, [
-                                        VxeUIButtonComponent
-                                            ? h(VxeUIButtonComponent, {
-                                                mode: 'text',
-                                                content: customOpts.resetButtonText || getI18n('vxe.table.customRestore'),
-                                                disabled: !isCustomStatus,
-                                                onClick: resetCustomEvent
-                                            })
-                                            : createCommentVNode(),
-                                        immediate
-                                            ? (VxeUIButtonComponent
-                                                ? h(VxeUIButtonComponent, {
-                                                    mode: 'text',
-                                                    content: customOpts.closeButtonText || getI18n('vxe.table.customClose'),
-                                                    onClick: cancelCloseEvent
-                                                })
-                                                : createCommentVNode())
-                                            : (VxeUIButtonComponent
-                                                ? h(VxeUIButtonComponent, {
-                                                    mode: 'text',
-                                                    content: customOpts.cancelButtonText || getI18n('vxe.table.customCancel'),
-                                                    onClick: cancelCustomEvent
-                                                })
-                                                : createCommentVNode()),
-                                        immediate
-                                            ? createCommentVNode()
-                                            : (VxeUIButtonComponent
+                                    class: 'vxe-table-custom--footer'
+                                }, footerSlot
+                                    ? $xeTable.callSlot(footerSlot, params)
+                                    : [
+                                        h('div', {
+                                            class: 'vxe-table-custom--footer-buttons'
+                                        }, [
+                                            VxeUIButtonComponent
                                                 ? h(VxeUIButtonComponent, {
                                                     mode: 'text',
-                                                    status: 'primary',
-                                                    content: customOpts.confirmButtonText || getI18n('vxe.table.customConfirm'),
-                                                    onClick: confirmCustomEvent
+                                                    content: customOpts.resetButtonText || getI18n('vxe.table.customRestore'),
+                                                    disabled: !isCustomStatus,
+                                                    onClick: resetCustomEvent
                                                 })
-                                                : createCommentVNode())
+                                                : createCommentVNode(),
+                                            immediate
+                                                ? (VxeUIButtonComponent
+                                                    ? h(VxeUIButtonComponent, {
+                                                        mode: 'text',
+                                                        content: customOpts.closeButtonText || getI18n('vxe.table.customClose'),
+                                                        onClick: cancelCloseEvent
+                                                    })
+                                                    : createCommentVNode())
+                                                : (VxeUIButtonComponent
+                                                    ? h(VxeUIButtonComponent, {
+                                                        mode: 'text',
+                                                        content: customOpts.cancelButtonText || getI18n('vxe.table.customCancel'),
+                                                        onClick: cancelCustomEvent
+                                                    })
+                                                    : createCommentVNode()),
+                                            immediate
+                                                ? createCommentVNode()
+                                                : (VxeUIButtonComponent
+                                                    ? h(VxeUIButtonComponent, {
+                                                        mode: 'text',
+                                                        status: 'primary',
+                                                        content: customOpts.confirmButtonText || getI18n('vxe.table.customConfirm'),
+                                                        onClick: confirmCustomEvent
+                                                    })
+                                                    : createCommentVNode())
+                                        ])
                                     ])
-                                ])
-                            : null
+                                : null
+                        ]),
+                        renderDragTip()
                     ])
                 ]
                 : []);
@@ -739,7 +816,7 @@ export default defineVxeComponent({
             const $xeGrid = $xeTable.xeGrid;
             const { customStore } = props;
             const { resizable: allResizable } = tableProps;
-            const { isCustomStatus, customColumnList } = reactData;
+            const { isCustomStatus, customColumnList } = tableReactData;
             const customOpts = computeCustomOpts.value;
             const { immediate } = customOpts;
             const columnDragOpts = computeColumnDragOpts.value;
@@ -817,9 +894,9 @@ export default defineVxeComponent({
                                             'is--disabled': isDisabled
                                         }],
                                     title: getI18n('vxe.custom.setting.colVisible'),
-                                    onClick: () => {
+                                    onClick: (evnt) => {
                                         if (!isDisabled) {
-                                            changeCheckboxOption(column);
+                                            changeCheckboxOption(column, evnt);
                                         }
                                     }
                                 }, [
@@ -909,8 +986,8 @@ export default defineVxeComponent({
                                                 { label: getI18n('vxe.custom.setting.fixedUnset'), value: '', disabled: isDisabled || isHidden },
                                                 { label: getI18n('vxe.custom.setting.fixedRight'), value: 'right', disabled: isDisabled || isHidden || isMaxFixedColumn }
                                             ],
-                                            'onUpdate:modelValue'(value) {
-                                                changeFixedOption(column, value);
+                                            onChange({ label, $event }) {
+                                                changeFixedOption(column, label, $event);
                                             }
                                         })
                                         : createCommentVNode())
@@ -921,88 +998,92 @@ export default defineVxeComponent({
             });
             const scopedSlots = {
                 default: () => {
-                    if (defaultSlot) {
-                        return $xeTable.callSlot(defaultSlot, params);
-                    }
                     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))
-                            : 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'
-                                        })
-                                        : createCommentVNode(),
-                                    h('col', {
-                                        class: 'vxe-table-custom-popup--table-col-title'
-                                    }),
-                                    allowResizable
-                                        ? h('col', {
-                                            class: 'vxe-table-custom-popup--table-col-width'
-                                        })
-                                        : createCommentVNode(),
-                                    allowFixed
-                                        ? h('col', {
-                                            class: 'vxe-table-custom-popup--table-col-fixed'
-                                        })
-                                        : createCommentVNode()
-                                ]),
-                                h('thead', {}, [
-                                    h('tr', {}, [
-                                        allowVisible
-                                            ? h('th', {}, [
-                                                h('div', {
-                                                    class: ['vxe-table-custom--checkbox-option', {
-                                                            'is--checked': isAllChecked,
-                                                            'is--indeterminate': isAllIndeterminate
-                                                        }],
-                                                    title: getI18n('vxe.table.allTitle'),
-                                                    onClick: 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('div', {
+                                ref: refCustomBodyElem,
+                                class: 'vxe-table-custom-popup--handle-wrapper'
+                            }, [
+                                topSlot
+                                    ? h('div', {
+                                        class: 'vxe-table-custom-popup--table-top'
+                                    }, $xeTable.callSlot(topSlot, params))
+                                    : 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'
+                                                })
+                                                : createCommentVNode(),
+                                            h('col', {
+                                                class: 'vxe-table-custom-popup--table-col-title'
+                                            }),
+                                            allowResizable
+                                                ? h('col', {
+                                                    class: 'vxe-table-custom-popup--table-col-width'
+                                                })
+                                                : createCommentVNode(),
+                                            allowFixed
+                                                ? h('col', {
+                                                    class: 'vxe-table-custom-popup--table-col-fixed'
+                                                })
+                                                : createCommentVNode()
+                                        ]),
+                                        h('thead', {}, [
+                                            h('tr', {}, [
+                                                allowVisible
+                                                    ? h('th', {}, [
+                                                        h('div', {
+                                                            class: ['vxe-table-custom--checkbox-option', {
+                                                                    'is--checked': isAllChecked,
+                                                                    'is--indeterminate': isAllIndeterminate
+                                                                }],
+                                                            title: getI18n('vxe.table.allTitle'),
+                                                            onClick: 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'))
+                                                        ])
+                                                    ])
+                                                    : createCommentVNode(),
+                                                h('th', {}, getI18n('vxe.custom.setting.colTitle')),
+                                                allowResizable
+                                                    ? h('th', {}, getI18n('vxe.custom.setting.colResizable'))
+                                                    : createCommentVNode(),
+                                                allowFixed
+                                                    ? h('th', {}, getI18n(`vxe.custom.setting.${maxFixedSize ? 'colFixedMax' : 'colFixed'}`, [maxFixedSize]))
+                                                    : createCommentVNode()
                                             ])
-                                            : createCommentVNode(),
-                                        h('th', {}, getI18n('vxe.custom.setting.colTitle')),
-                                        allowResizable
-                                            ? h('th', {}, getI18n('vxe.custom.setting.colResizable'))
-                                            : createCommentVNode(),
-                                        allowFixed
-                                            ? h('th', {}, getI18n(`vxe.custom.setting.${maxFixedSize ? 'colFixedMax' : 'colFixed'}`, [maxFixedSize]))
-                                            : createCommentVNode()
+                                        ]),
+                                        h(TransitionGroup, {
+                                            class: 'vxe-table-custom--panel-list',
+                                            tag: 'tbody',
+                                            name: 'vxe-table-custom--list'
+                                        }, {
+                                            default: () => trVNs
+                                        })
                                     ])
                                 ]),
-                                h(TransitionGroup, {
-                                    class: 'vxe-table-custom--panel-list',
-                                    tag: 'tbody',
-                                    name: 'vxe-table-custom--list'
-                                }, {
-                                    default: () => trVNs
-                                })
+                                bottomSlot
+                                    ? h('div', {
+                                        class: 'vxe-table-custom-popup--table-bottom'
+                                    }, $xeTable.callSlot(bottomSlot, params))
+                                    : renderEmptyElement($xeTable),
+                                renderDragTip()
                             ])
-                        ]),
-                        bottomSlot
-                            ? h('div', {
-                                class: 'vxe-table-custom-popup--table-bottom'
-                            }, $xeTable.callSlot(bottomSlot, params))
-                            : renderEmptyElement($xeTable),
-                        renderDragTip()
-                    ]);
+                        ]);
                 },
                 footer: () => {
                     if (footerSlot) {
@@ -1118,6 +1199,21 @@ export default defineVxeComponent({
                 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
+        };
+        provide('$xeTableCustomPanel', $xeTableCustomPanel);
+        return $xeTableCustomPanel;
+    },
+    render() {
+        return this.renderVN();
     }
 });