vxe-table 4.18.10 → 4.18.12

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

@@ -2,6 +2,7 @@ import { nextTick } from 'vue';
 import { VxeUI } from '../../../ui';
 import XEUtils from 'xe-utils';
 import { getColumnList } from '../../src/util';
+import { toCssUnit } from '../../../ui/src/dom';
 const tableCustomMethodKeys = ['openCustom', 'closeCustom', 'getCustomVisible', 'toggleCustom', 'saveCustom', 'cancelCustom', 'resetCustom', 'toggleCustomAllCheckbox', 'setCustomAllCheckbox'];
 VxeUI.hooks.add('tableCustomModule', {
     setupTable($xeTable) {
@@ -14,13 +15,16 @@ VxeUI.hooks.add('tableCustomModule', {
         const updatePopupStyle = () => {
             const { customStore } = reactData;
             const customOpts = computeCustomOpts.value;
+            const { mode, placement, popupOptions } = customOpts;
+            const showSimple = !(mode === 'modal' || mode === 'drawer');
+            const { transfer, maxHeight } = popupOptions || {};
             const customSimpleMode = computeCustomSimpleMode.value;
             const showCustomSimpleOutside = customSimpleMode === 'outside';
-            const { popupOptions } = customOpts;
-            const { maxHeight } = popupOptions || {};
+            const bodyEl = document.documentElement;
             let wrapperEl = refElem.value;
             let popupTop = 0;
             let popupMaxHeight = 0;
+            const popupStys = {};
             if ($xeGantt) {
                 const { refGanttContainerElem } = $xeGantt.getRefMaps();
                 const ganttContainerElem = refGanttContainerElem.value;
@@ -28,7 +32,13 @@ VxeUI.hooks.add('tableCustomModule', {
                     wrapperEl = ganttContainerElem;
                 }
             }
-            if (showCustomSimpleOutside) {
+            const tableRect = wrapperEl.getBoundingClientRect();
+            // 多种模式，指定元素插入
+            if (showSimple && transfer) {
+                popupTop = tableRect.top + bodyEl.scrollTop;
+                popupMaxHeight = XEUtils.eqNull(maxHeight) ? 360 : maxHeight;
+            }
+            else if (showCustomSimpleOutside) {
                 if ($xeGGWrapper && wrapperEl) {
                     popupTop = wrapperEl.offsetTop;
                 }
@@ -41,11 +51,59 @@ VxeUI.hooks.add('tableCustomModule', {
                 }
                 popupMaxHeight = Math.max(88, popupMaxHeight);
             }
-            customStore.popupTop = popupTop;
-            customStore.maxHeight = XEUtils.eqNull(maxHeight) ? popupMaxHeight : maxHeight;
+            let popupMxHeight = 0;
+            if (!(placement === 'left' || placement === 'right')) {
+                popupMxHeight = XEUtils.eqNull(maxHeight) ? popupMaxHeight : maxHeight;
+            }
+            if (!placement || !(['left', 'right', 'bottom-left', 'bottom-right'].includes(placement))) {
+                if (popupTop) {
+                    popupStys.top = toCssUnit(popupTop);
+                }
+            }
+            if (showSimple && transfer) {
+                if (placement === 'bottom-left' || placement === 'bottom-right') {
+                    popupStys.bottom = toCssUnit(bodyEl.scrollHeight - tableRect.top - tableRect.height + 1);
+                }
+                if (placement === 'top-left' || placement === 'bottom-left') {
+                    popupStys.left = toCssUnit(tableRect.left);
+                }
+                else if (!placement || placement === 'top-right' || placement === 'bottom-right') {
+                    popupStys.right = toCssUnit(bodyEl.scrollWidth - tableRect.left - tableRect.width + 1);
+                }
+            }
+            if (popupMxHeight) {
+                popupStys.maxHeight = toCssUnit(popupMxHeight);
+            }
+            customStore.popupStyle = popupStys;
+            customStore.maxHeight = popupMxHeight;
+            return nextTick();
         };
         const openCustom = () => {
             const { initStore, customStore } = reactData;
+            const customOpts = computeCustomOpts.value;
+            const { mode, popupOptions } = customOpts;
+            const showSimple = !(mode === 'modal' || mode === 'drawer');
+            const { transfer } = popupOptions || {};
+            const customSimpleMode = computeCustomSimpleMode.value;
+            const showCustomSimpleOutside = customSimpleMode === 'outside';
+            let cpToElem = null;
+            // 多种模式，指定元素插入
+            if (showSimple && transfer) {
+                cpToElem = document.body;
+            }
+            else {
+                if (showCustomSimpleOutside && $xeGGWrapper) {
+                    const { refPopupContainerElem } = $xeGGWrapper.getRefMaps();
+                    const popupContainerElem = refPopupContainerElem.value;
+                    if (popupContainerElem) {
+                        cpToElem = popupContainerElem;
+                    }
+                }
+            }
+            if (internalData.customPopupToElem !== cpToElem) {
+                reactData.ctPopupFlag++;
+            }
+            internalData.customPopupToElem = cpToElem;
             customStore.visible = true;
             initStore.custom = true;
             handleUpdateCustomColumn();
@@ -333,7 +391,12 @@ VxeUI.hooks.add('tableCustomModule', {
                     $xeTable.emitCustomEvent('close', evnt);
                 }
             },
-            handleUpdateCustomColumn
+            handleUpdateCustomColumn,
+            handleCustomStyle() {
+                const reactData = $xeTable.reactData;
+                reactData.isCustomDragStatus = false;
+                return updatePopupStyle();
+            }
         };
         return Object.assign(Object.assign({}, customMethods), customPrivateMethods);
     },

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

@@ -2,7 +2,7 @@ import { h, inject, ref, provide, nextTick, TransitionGroup, reactive, onUnmount
 import { defineVxeComponent } from '../../../ui/src/comp';
 import { VxeUI } from '../../../ui';
 import { formatText } from '../../../ui/src/utils';
-import { getTpImg, addClass, removeClass, hasControlKey, toCssUnit } from '../../../ui/src/dom';
+import { getTpImg, addClass, removeClass, hasControlKey } from '../../../ui/src/dom';
 import { errLog } from '../../../ui/src/log';
 import XEUtils from 'xe-utils';
 const { getI18n, getIcon, renderEmptyElement } = VxeUI;
@@ -13,7 +13,8 @@ export function createInternalData() {
     // prevDragGroupField: undefined,
     // prevDragAggFnColid: undefined,
     // prevDragToChild: false,
-    // prevDragPos: null
+    // prevDragPos: null,
+    // customDragTime: null
     };
 }
 export default defineVxeComponent({
@@ -33,7 +34,7 @@ export default defineVxeComponent({
         const VxeUIRadioGroupComponent = VxeUI.getComponent('VxeRadioGroup');
         const $xeTable = inject('$xeTable', {});
         const { props: tableProps, reactData: tableReactData, internalData: tableInternalData } = $xeTable;
-        const { computeCustomOpts, computeColumnDragOpts, computeColumnOpts, computeIsMaxFixedColumn, computeResizableOpts } = $xeTable.getComputeMaps();
+        const { computeSize, computeCustomOpts, computeColumnDragOpts, computeColumnOpts, computeIsMaxFixedColumn, computeResizableOpts } = $xeTable.getComputeMaps();
         const refElem = ref();
         const refBodyWrapperElem = ref();
         const refCustomBodyElem = ref();
@@ -302,9 +303,14 @@ export default defineVxeComponent({
             removeClass(trEl, 'active--drag-origin');
         };
         const sortDragstartEvent = (evnt) => {
+            const { customDragTime } = customPanelInternalData;
             if (evnt.dataTransfer) {
                 evnt.dataTransfer.setDragImage(getTpImg(), 0, 0);
             }
+            if (customDragTime) {
+                clearTimeout(customDragTime);
+            }
+            tableReactData.isCustomDragStatus = true;
             customPanelInternalData.prevDragGroupField = null;
             customPanelInternalData.prevDragAggFnColid = null;
         };
@@ -474,6 +480,10 @@ export default defineVxeComponent({
                             tableReactData.customColumnList = collectColumn.slice(0);
                             $xeTable.handleColDragSwapColumn();
                         }
+                        customPanelInternalData.customDragTime = setTimeout(() => {
+                            tableReactData.isCustomDragStatus = false;
+                            customPanelInternalData.customDragTime = undefined;
+                        }, 350);
                     }).catch(() => {
                     });
                 }
@@ -568,13 +578,14 @@ export default defineVxeComponent({
             const tableProps = $xeTable.props;
             const { customStore } = props;
             const { treeConfig, rowGroupConfig, aggregateConfig } = tableProps;
-            const { isCustomStatus, customColumnList } = tableReactData;
+            const { isCustomStatus, customColumnList, isCustomDragStatus } = tableReactData;
             const customOpts = computeCustomOpts.value;
             const { immediate } = customOpts;
             const columnDragOpts = computeColumnDragOpts.value;
-            const { maxHeight, popupTop } = customStore;
+            const { popupStyle } = customStore;
             const { checkMethod, visibleMethod, allowVisible, allowSort, allowFixed, trigger, placement } = customOpts;
             const isMaxFixedColumn = computeIsMaxFixedColumn.value;
+            const vSize = computeSize.value;
             const { isCrossDrag } = columnDragOpts;
             const slots = customOpts.slots || {};
             const headerSlot = slots.header;
@@ -704,20 +715,14 @@ export default defineVxeComponent({
                     ]));
                 }
             });
-            const popupStys = {};
-            if (maxHeight && !['left', 'right'].includes(placement || '')) {
-                if (popupTop) {
-                    popupStys.top = toCssUnit(popupTop);
-                }
-                popupStys.maxHeight = toCssUnit(maxHeight);
-            }
             return h('div', {
                 ref: refElem,
                 key: 'simple',
                 class: ['vxe-table-custom-wrapper', `placement--${placement}`, {
+                        [`size--${vSize}`]: vSize,
                         'is--active': customStore.visible
                     }],
-                style: popupStys
+                style: popupStyle
             }, customStore.visible
                 ? [
                     h('div', {
@@ -778,7 +783,7 @@ export default defineVxeComponent({
                                     ? 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), {
+                                    : h(TransitionGroup, Object.assign({ class: 'vxe-table-custom--panel-list', name: isCustomDragStatus ? 'vxe-table-custom--list' : '', tag: 'ul' }, customWrapperOns), {
                                         default: () => colVNs
                                     }),
                                 bottomSlot

package/es/table/module/keyboard/hook.js

@@ -392,8 +392,7 @@ hooks.add('tableKeyboardModule', {
             // 处理当前行方向键移动
             moveCurrentRow(isUpArrow, isDwArrow, evnt) {
                 const { treeConfig } = props;
-                const { currentRow } = reactData;
-                const { afterFullData } = internalData;
+                const { afterFullData, currentRow } = internalData;
                 const treeOpts = computeTreeOpts.value;
                 const childrenField = treeOpts.children || treeOpts.childrenField;
                 let targetRow;

package/es/table/src/body.js

@@ -441,7 +441,7 @@ export default defineVxeComponent({
             const $xeGantt = $xeTable.xeGantt;
             const { stripe, rowKey, highlightHoverRow, rowClassName, rowStyle, editConfig, treeConfig } = tableProps;
             const { hasFixedColumn, treeExpandedFlag, scrollYLoad, isAllOverflow, rowExpandedFlag, expandColumn, selectRadioRow, pendingRowFlag, rowExpandHeightFlag, isRowGroupStatus } = tableReactData;
-            const { fullAllDataRowIdData, fullColumnIdData, treeExpandedMaps, pendingRowMaps, rowExpandedMaps } = tableInternalData;
+            const { fullAllDataRowIdData, fullColumnIdData, treeExpandedMaps, pendingRowMaps, rowExpandedMaps, currentRow } = tableInternalData;
             const checkboxOpts = computeCheckboxOpts.value;
             const radioOpts = computeRadioOpts.value;
             const treeOpts = computeTreeOpts.value;
@@ -532,7 +532,8 @@ export default defineVxeComponent({
                         'row--radio': radioOpts.highlight && $xeTable.eqRow(selectRadioRow, row),
                         'row--checked': checkboxOpts.highlight && $xeTable.isCheckedByCheckboxRow(row),
                         'row--pending': !!pendingRowFlag && !!pendingRowMaps[rowid],
-                        'row--group': hasRowGroupAggregate
+                        'row--group': hasRowGroupAggregate,
+                        'row--current': currentRow && rowid === getRowid($xeTable, currentRow)
                     },
                     getPropClass(rowClassName, params)
                 ];

package/es/table/src/header.js

@@ -44,7 +44,9 @@ export default defineVxeComponent({
                 spanColumns = visibleColgroups;
             }
             headerColumn.value = spanColumns;
-            $xeTable.dispatchEvent('columns-change', { visibleColgroups, collectColumn, visibleColumn }, null);
+            nextTick(() => {
+                $xeTable.dispatchEvent('columns-change', { visibleColgroups, collectColumn, visibleColumn }, null);
+            });
         };
         const renderRows = (isGroup, isOptimizeMode, headerGroups, $rowIndex, cols) => {
             const $xeGrid = $xeTable.xeGrid;

package/es/table/src/table.js

@@ -77,6 +77,7 @@ export default defineVxeComponent({
         const refTableRightFooter = ref();
         const refTeleportWrapper = ref();
         const refPopupWrapperElem = ref();
+        const refCustomContainerElem = ref();
         const refLeftContainer = ref();
         const refRightContainer = ref();
         const refColResizeBar = ref();
@@ -682,6 +683,7 @@ export default defineVxeComponent({
             refRightContainer,
             refColResizeBar,
             refRowResizeBar,
+            refCustomContainerElem,
             refScrollXVirtualElem,
             refScrollYVirtualElem,
             refScrollXHandleElem,
@@ -1954,10 +1956,13 @@ export default defineVxeComponent({
             const { treeConfig } = props;
             const { tableData, isAllOverflow, scrollYLoad, scrollXLoad } = reactData;
             const { fullAllDataRowIdData } = internalData;
+            const el = refElem.value;
+            if (!el || !el.clientWidth) {
+                return;
+            }
             const treeOpts = computeTreeOpts.value;
             const defaultRowHeight = computeDefaultRowHeight.value;
-            const el = refElem.value;
-            if (el && !isAllOverflow && (scrollYLoad || scrollXLoad || (treeConfig && treeOpts.showLine))) {
+            if (!isAllOverflow && (scrollYLoad || scrollXLoad || (treeConfig && treeOpts.showLine))) {
                 const { handleGetRowId } = createHandleGetRowId($xeTable);
                 el.setAttribute('data-calc-row', 'Y');
                 tableData.forEach(row => {
@@ -2354,8 +2359,8 @@ export default defineVxeComponent({
         };
         const updateStyle = () => {
             const { mouseConfig } = props;
-            const { isGroup, currentRow, tableColumn, overflowX, scrollbarWidth, overflowY, scrollbarHeight, scrollXWidth, columnStore, editStore, isColLoading } = reactData;
-            const { visibleColumn, tableHeight, elemStore, customHeight, customMinHeight, customMaxHeight, tHeaderHeight, tFooterHeight } = internalData;
+            const { isGroup, tableColumn, overflowX, scrollbarWidth, overflowY, scrollbarHeight, scrollXWidth, columnStore, editStore, isColLoading } = reactData;
+            const { visibleColumn, tableHeight, elemStore, currentRow, customHeight, customMinHeight, customMaxHeight, tHeaderHeight, tFooterHeight } = internalData;
             const $xeGanttView = internalData.xeGanttView;
             const el = refElem.value;
             if (!el || (internalData.tBodyHeight && !el.clientHeight)) {
@@ -2943,8 +2948,8 @@ export default defineVxeComponent({
         // 还原展开、选中等相关状态
         const handleReserveStatus = () => {
             const { treeConfig } = props;
-            const { expandColumn, currentRow, selectRadioRow } = reactData;
-            const { fullDataRowIdData, fullAllDataRowIdData, radioReserveRow, selectCheckboxMaps, treeExpandedMaps, rowExpandedMaps } = internalData;
+            const { expandColumn, selectRadioRow } = reactData;
+            const { fullDataRowIdData, fullAllDataRowIdData, radioReserveRow, selectCheckboxMaps, treeExpandedMaps, rowExpandedMaps, currentRow } = internalData;
             const expandOpts = computeExpandOpts.value;
             const treeOpts = computeTreeOpts.value;
             const radioOpts = computeRadioOpts.value;
@@ -2968,7 +2973,7 @@ export default defineVxeComponent({
                 handleCheckedCheckboxRow(handleReserveRow(internalData.checkboxReserveRowMap), true, true);
             }
             if (currentRow && !fullAllDataRowIdData[getRowid($xeTable, currentRow)]) {
-                reactData.currentRow = null; // 刷新当前行状态
+                internalData.currentRow = null; // 刷新当前行状态
             }
             // 行展开
             internalData.rowExpandedMaps = expandColumn ? getRecoverRowMaps(rowExpandedMaps) : {}; // 刷新行展开状态
@@ -3199,6 +3204,10 @@ export default defineVxeComponent({
             const { scrollXWidth, scrollYHeight } = reactData;
             const { elemStore } = internalData;
             const scrollbarOpts = computeScrollbarOpts.value;
+            const el = refElem.value;
+            if (!el || !el.clientWidth) {
+                return;
+            }
             const bodyWrapperElem = getRefElem(elemStore['main-body-wrapper']);
             const headerTableElem = getRefElem(elemStore['main-header-table']);
             const footerTableElem = getRefElem(elemStore['main-footer-table']);
@@ -3282,6 +3291,7 @@ export default defineVxeComponent({
         const handleLazyRecalculate = (reFull, reWidth, reHeight) => {
             return new Promise(resolve => {
                 const $xeGanttView = internalData.xeGanttView;
+                const { customStore } = reactData;
                 const { rceTimeout, rceRunTime } = internalData;
                 const resizeOpts = computeResizeOpts.value;
                 const refreshDelay = resizeOpts.refreshDelay || 20;
@@ -3290,6 +3300,9 @@ export default defineVxeComponent({
                     autoCellWidth();
                     updateRowExpandStyle();
                 }
+                if (customStore.visible && $xeTable.handleCustomStyle) {
+                    $xeTable.handleCustomStyle();
+                }
                 if (rceTimeout) {
                     clearTimeout(rceTimeout);
                     if (rceRunTime && rceRunTime + (refreshDelay - 5) < Date.now()) {
@@ -4440,6 +4453,10 @@ export default defineVxeComponent({
         };
         const updateColumnOffsetLeft = () => {
             const { visibleColumn, fullColumnIdData } = internalData;
+            const el = refElem.value;
+            if (!el || !el.clientWidth) {
+                return;
+            }
             let offsetLeft = 0;
             for (let cIndex = 0, rLen = visibleColumn.length; cIndex < rLen; cIndex++) {
                 const column = visibleColumn[cIndex];
@@ -4454,6 +4471,10 @@ export default defineVxeComponent({
         const updateRowOffsetTop = () => {
             const { expandColumn } = reactData;
             const { afterFullData, fullAllDataRowIdData, rowExpandedMaps } = internalData;
+            const el = refElem.value;
+            if (!el || !el.clientWidth) {
+                return;
+            }
             const expandOpts = computeExpandOpts.value;
             const rowOpts = computeRowOpts.value;
             const cellOpts = computeCellOpts.value;
@@ -4477,6 +4498,10 @@ export default defineVxeComponent({
          */
         const updateRowExpandStyle = () => {
             const { expandColumn, scrollYLoad, scrollYTop, isScrollYBig } = reactData;
+            const el = refElem.value;
+            if (!el || !el.clientWidth) {
+                return;
+            }
             const expandOpts = computeExpandOpts.value;
             const rowOpts = computeRowOpts.value;
             const cellOpts = computeCellOpts.value;
@@ -4540,6 +4565,10 @@ export default defineVxeComponent({
             }
             const { tableData } = reactData;
             const { fullAllDataRowIdData, treeExpandedMaps } = internalData;
+            const el = refElem.value;
+            if (!el || !el.clientWidth) {
+                return;
+            }
             const cellOpts = computeCellOpts.value;
             const rowOpts = computeRowOpts.value;
             const defaultRowHeight = computeDefaultRowHeight.value;
@@ -6226,7 +6255,7 @@ export default defineVxeComponent({
                 const el = refElem.value;
                 $xeTable.clearCurrentRow();
                 // $xeTable.clearCurrentColumn()
-                reactData.currentRow = row;
+                internalData.currentRow = row;
                 if (rowOpts.isCurrent || props.highlightCurrentRow) {
                     if (el) {
                         XEUtils.arrayEach(el.querySelectorAll(`[rowid="${getRowid($xeTable, row)}"]`), elem => addClass(elem, 'row--current'));
@@ -6276,7 +6305,7 @@ export default defineVxeComponent({
             clearCurrentRow() {
                 const $xeGanttView = internalData.xeGanttView;
                 const el = refElem.value;
-                reactData.currentRow = null;
+                internalData.currentRow = null;
                 internalData.hoverRow = null;
                 if (el) {
                     XEUtils.arrayEach(el.querySelectorAll('.row--current'), elem => removeClass(elem, 'row--current'));
@@ -6297,8 +6326,7 @@ export default defineVxeComponent({
              * 用于当前行，获取当前行的数据
              */
             getCurrentRecord(isFull) {
-                const { currentRow } = reactData;
-                const { fullDataRowIdData, afterFullRowMaps } = internalData;
+                const { fullDataRowIdData, afterFullRowMaps, currentRow } = internalData;
                 const rowOpts = computeRowOpts.value;
                 if (rowOpts.isCurrent || props.highlightCurrentRow) {
                     const rowid = getRowid($xeTable, currentRow);
@@ -7894,6 +7922,23 @@ export default defineVxeComponent({
                 $xeTable.closeMenu();
             }
         };
+        const reUpdateCustomStyleEvent = (evnt) => {
+            const { customStore } = reactData;
+            const customOpts = computeCustomOpts.value;
+            const { popupOptions } = customOpts;
+            const { transfer } = popupOptions || {};
+            if (transfer && customStore.visible) {
+                const tableCustom = refTableCustom.value;
+                if (tableCustom && $xeTable.handleCustomStyle && !checkTargetElement(evnt.target, [tableCustom.getRefMaps().refElem.value], evnt.currentTarget)) {
+                    $xeTable.handleCustomStyle().then(() => {
+                        $xeTable.handleCustomStyle();
+                    });
+                }
+            }
+        };
+        const handleGlobalScrollEvent = (evnt) => {
+            reUpdateCustomStyleEvent(evnt);
+        };
         /**
          * 全局滚动事件
          */
@@ -7954,8 +7999,8 @@ export default defineVxeComponent({
             if (internalData.isActivated) {
                 $xeTable.preventEvent(evnt, 'event.keydown', null, () => {
                     const { mouseConfig, keyboardConfig, treeConfig, editConfig, highlightCurrentRow, highlightCurrentColumn } = props;
-                    const { ctxMenuStore, editStore, currentRow } = reactData;
-                    const { afterFullData, visibleColumn } = internalData;
+                    const { ctxMenuStore, editStore } = reactData;
+                    const { afterFullData, visibleColumn, currentRow } = internalData;
                     const isContentMenu = computeIsContentMenu.value;
                     const bodyMenu = computeBodyMenu.value;
                     const keyboardOpts = computeKeyboardOpts.value;
@@ -10224,7 +10269,7 @@ export default defineVxeComponent({
                     let newValue = row;
                     let isChange = oldValue !== newValue;
                     if (strict) {
-                        handleCheckedRadioRow(newValue);
+                        handleCheckedRadioRow(newValue, false);
                     }
                     else {
                         if (oldValue === newValue) {
@@ -10232,7 +10277,7 @@ export default defineVxeComponent({
                         }
                         isChange = oldValue !== newValue;
                         if (isChange && newValue) {
-                            handleCheckedRadioRow(newValue);
+                            handleCheckedRadioRow(newValue, false);
                         }
                         else {
                             newValue = null;
@@ -10281,7 +10326,7 @@ export default defineVxeComponent({
                 }
             },
             triggerCurrentRowEvent(evnt, params) {
-                const { currentRow: oldValue } = reactData;
+                const { currentRow: oldValue } = internalData;
                 const rowOpts = computeRowOpts.value;
                 const currentRowOpts = computeCurrentRowOpts.value;
                 const beforeRowMethod = currentRowOpts.beforeSelectMethod || rowOpts.currentMethod;
@@ -12303,7 +12348,7 @@ export default defineVxeComponent({
                     rowExpandYSpaceEl.style.height = ySpaceHeight ? `${ySpaceHeight}px` : '';
                 }
                 reactData.scrollYTop = scrollYTop;
-                reactData.scrollYHeight = ySpaceHeight;
+                reactData.scrollYHeight = isScrollYBig ? sYHeight : ySpaceHeight;
                 reactData.isScrollYBig = isScrollYBig;
                 calcScrollbar();
                 if (isScrollYBig && mouseOpts.area) {
@@ -12835,7 +12880,7 @@ export default defineVxeComponent({
         const renderVN = () => {
             const { loading, stripe, showHeader, height, treeConfig, mouseConfig, showFooter, highlightCell, highlightHoverRow, highlightHoverColumn, editConfig, editRules } = props;
             const { isGroup, overflowX, overflowY, scrollXLoad, scrollYLoad, tableData, initStore, isRowGroupStatus, columnStore, filterStore, customStore, tooltipStore } = reactData;
-            const { teleportToWrapperElem, popupToWrapperElem } = internalData;
+            const { teleportToWrapperElem, popupToWrapperElem, customPopupToElem } = internalData;
             const { leftList, rightList } = columnStore;
             const loadingSlot = slots.loading;
             const tipSlots = {
@@ -12865,8 +12910,6 @@ export default defineVxeComponent({
             const columnDragOpts = computeColumnDragOpts.value;
             const scrollbarXToTop = computeScrollbarXToTop.value;
             const scrollbarYToLeft = computeScrollbarYToLeft.value;
-            const customSimpleMode = computeCustomSimpleMode.value;
-            const showCustomSimpleOutside = customSimpleMode === 'outside';
             const { isCrossTableDrag } = rowDragOpts;
             const tbOns = {
                 onKeydown: keydownEvent,
@@ -13007,16 +13050,6 @@ export default defineVxeComponent({
                                     })
                                 ]
                                 : []),
-                            /**
-                             * 自定义列
-                             */
-                            !showCustomSimpleOutside && initStore.custom
-                                ? h(TableCustomPanelComponent, {
-                                    key: 'cs',
-                                    ref: refTableCustom,
-                                    customStore
-                                })
-                                : renderEmptyElement($xeTable),
                             /**
                              * 加载中
                              */
@@ -13046,6 +13079,26 @@ export default defineVxeComponent({
                         ])
                     ])
                 ]),
+                h('div', {
+                    key: 'fpw',
+                    ref: refCustomContainerElem
+                }, [
+                    h(Teleport, {
+                        to: customPopupToElem,
+                        disabled: !!reactData.ctPopupFlag && !customPopupToElem
+                    }, [
+                        /**
+                         * 自定义列
+                         */
+                        initStore.custom
+                            ? h(TableCustomPanelComponent, {
+                                key: 'cs',
+                                ref: refTableCustom,
+                                customStore
+                            })
+                            : renderEmptyElement($xeTable)
+                    ])
+                ]),
                 h('div', {
                     key: 'tpw'
                 }, [
@@ -13056,16 +13109,6 @@ export default defineVxeComponent({
                         h('div', {
                             ref: refPopupWrapperElem
                         }, [
-                            /**
-                             * 自定义列
-                             */
-                            showCustomSimpleOutside && initStore.custom
-                                ? h(TableCustomPanelComponent, {
-                                    key: 'cs',
-                                    ref: refTableCustom,
-                                    customStore
-                                })
-                                : renderEmptyElement($xeTable),
                             /**
                              * 筛选
                              */
@@ -13709,6 +13752,7 @@ export default defineVxeComponent({
             globalEvents.on($xeTable, 'mousewheel', handleGlobalMousewheelEvent);
             globalEvents.on($xeTable, 'keydown', handleGlobalKeydownEvent);
             globalEvents.on($xeTable, 'resize', handleGlobalResizeEvent);
+            globalEvents.on($xeTable, 'scroll', handleGlobalScrollEvent);
             globalEvents.on($xeTable, 'contextmenu', $xeTable.handleGlobalContextmenuEvent);
             $xeTable.preventEvent(null, 'mounted', { $table: $xeTable });
         });
@@ -13740,6 +13784,7 @@ export default defineVxeComponent({
             globalEvents.off($xeTable, 'mousewheel');
             globalEvents.off($xeTable, 'keydown');
             globalEvents.off($xeTable, 'resize');
+            globalEvents.off($xeTable, 'scroll');
             globalEvents.off($xeTable, 'contextmenu');
             $xeTable.preventEvent(null, 'beforeUnmount', { $table: $xeTable });
             XEUtils.assign(reactData, createReactData());

package/es/table/src/util.js

@@ -82,6 +82,8 @@ export function createInternalData() {
         sourceDataRowIdData: {},
         fullColumnIdData: {},
         fullColumnFieldData: {},
+        // 当前行
+        currentRow: null,
         // 合并表头单元格的数据
         mergeHeaderList: [],
         mergeHeaderMaps: {},
@@ -130,7 +132,9 @@ export function createInternalData() {
         tFooterHeight: 0,
         teleportToWrapperElem: null,
         popupToWrapperElem: null,
+        customPopupToElem: null,
         lastSTime: 0,
+        // isCustomDragStatus: false,
         inited: false,
         tooltipTimeout: null,
         initStatus: false,
@@ -172,8 +176,6 @@ export function createReactData() {
         isAllSelected: false,
         // 复选框属性，有选中且非全选状态
         isIndeterminate: false,
-        // 当前行
-        currentRow: null,
         // 单选框属性，选中列
         currentColumn: null,
         // 单选框属性，选中行
@@ -209,7 +211,7 @@ export function createReactData() {
             activeWrapper: false,
             visible: false,
             maxHeight: null,
-            popupTop: 0,
+            popupStyle: {},
             oldSortMaps: {},
             oldFixedMaps: {},
             oldVisibleMaps: {}
@@ -370,6 +372,8 @@ export function createReactData() {
         resizeHeightFlag: 1,
         resizeWidthFlag: 1,
         isCustomStatus: false,
+        isCustomDragStatus: true,
+        ctPopupFlag: 1,
         isCrossDragRow: false,
         dragRow: null,
         isCrossDragCol: false,

package/es/table/style.css

@@ -791,6 +791,7 @@
   text-align: left;
   background-color: var(--vxe-ui-layout-background-color);
   z-index: 19;
+  color: var(--vxe-ui-font-color);
   border: 1px solid var(--vxe-ui-table-border-color);
   border-radius: var(--vxe-ui-border-radius);
   box-shadow: var(--vxe-ui-base-popup-box-shadow);
@@ -1299,6 +1300,19 @@
   width: 200px;
 }
 
+.vxe-table-custom-wrapper {
+  font-size: var(--vxe-ui-font-size-default);
+}
+.vxe-table-custom-wrapper.size--medium {
+  font-size: var(--vxe-ui-font-size-medium);
+}
+.vxe-table-custom-wrapper.size--small {
+  font-size: var(--vxe-ui-font-size-small);
+}
+.vxe-table-custom-wrapper.size--mini {
+  font-size: var(--vxe-ui-font-size-mini);
+}
+
 .vxe-table-export--panel-column > ul {
   list-style-type: none;
   overflow: auto;