vxe-table 4.18.9 → 4.18.11

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

@@ -337,6 +337,14 @@ export default defineVxeComponent({
                 if (treeConfig) {
                     tdVNs.push(...renderLine(rowid, cellParams, cellHeight));
                 }
+                const clVNs = [];
+                if (!isVNPreEmptyStatus) {
+                    clVNs.push(h('div', {
+                        colid,
+                        rowid,
+                        class: 'vxe-cell--wrapper vxe-body-cell--wrapper'
+                    }, column.renderCell(cellParams)));
+                }
                 tdVNs.push(h('div', {
                     key: 'tc',
                     class: ['vxe-cell', {
@@ -346,15 +354,7 @@ export default defineVxeComponent({
                         }],
                     style: tcStyle,
                     title: showTitle ? $xeTable.getCellLabel(row, column) : null
-                }, isVNPreEmptyStatus
-                    ? []
-                    : [
-                        h('div', {
-                            colid,
-                            rowid,
-                            class: 'vxe-cell--wrapper vxe-body-cell--wrapper'
-                        }, column.renderCell(cellParams))
-                    ]));
+                }, clVNs));
                 if (showValidTip && errorValidItem) {
                     const errRule = errorValidItem.rule;
                     const validSlot = slots ? slots.valid : null;
@@ -440,8 +440,8 @@ export default defineVxeComponent({
             const $xeGrid = $xeTable.xeGrid;
             const $xeGantt = $xeTable.xeGantt;
             const { stripe, rowKey, highlightHoverRow, rowClassName, rowStyle, editConfig, treeConfig } = tableProps;
-            const { hasFixedColumn, treeExpandedFlag, scrollXLoad, scrollYLoad, isAllOverflow, rowExpandedFlag, expandColumn, selectRadioRow, pendingRowFlag, rowExpandHeightFlag, isRowGroupStatus } = tableReactData;
-            const { fullAllDataRowIdData, fullColumnIdData, treeExpandedMaps, pendingRowMaps, rowExpandedMaps } = tableInternalData;
+            const { hasFixedColumn, treeExpandedFlag, scrollYLoad, isAllOverflow, rowExpandedFlag, expandColumn, selectRadioRow, pendingRowFlag, rowExpandHeightFlag, isRowGroupStatus } = tableReactData;
+            const { fullAllDataRowIdData, fullColumnIdData, treeExpandedMaps, pendingRowMaps, rowExpandedMaps, currentRow } = tableInternalData;
             const checkboxOpts = computeCheckboxOpts.value;
             const radioOpts = computeRadioOpts.value;
             const treeOpts = computeTreeOpts.value;
@@ -532,14 +532,15 @@ 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)
                 ];
                 const tdVNs = tableColumn.map((column, $columnIndex) => {
                     return renderTdColumn(seq, rowid, fixedType, isOptimizeMode, rowLevel, row, rowIndex, $rowIndex, _rowIndex, column, $columnIndex, tableColumn, tableData);
                 });
-                rows.push(h('tr', Object.assign({ class: trClass, rowid: rowid, style: rowStyle ? (XEUtils.isFunction(rowStyle) ? rowStyle(params) : rowStyle) : null, key: rowKey || scrollXLoad || scrollYLoad || rowOpts.useKey || rowOpts.drag || columnOpts.drag || isRowGroupStatus || treeConfig ? rowid : $rowIndex }, trOn), tdVNs));
+                rows.push(h('tr', Object.assign({ class: trClass, rowid: rowid, style: rowStyle ? (XEUtils.isFunction(rowStyle) ? rowStyle(params) : rowStyle) : null, key: rowKey || rowOpts.useKey || rowOpts.drag || columnOpts.drag || isRowGroupStatus || treeConfig ? rowid : $rowIndex }, trOn), tdVNs));
                 // 如果行被展开了
                 if (isExpandRow) {
                     const expandOpts = computeExpandOpts.value;

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,
@@ -2354,8 +2356,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 +2945,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 +2970,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) : {}; // 刷新行展开状态
@@ -3282,6 +3284,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 +3293,9 @@ export default defineVxeComponent({
                     autoCellWidth();
                     updateRowExpandStyle();
                 }
+                if (customStore.visible && $xeTable.handleCustomStyle) {
+                    $xeTable.handleCustomStyle();
+                }
                 if (rceTimeout) {
                     clearTimeout(rceTimeout);
                     if (rceRunTime && rceRunTime + (refreshDelay - 5) < Date.now()) {
@@ -6226,7 +6232,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 +6282,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 +6303,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);
@@ -7280,10 +7285,21 @@ export default defineVxeComponent({
             /**
              * 如果有滚动条，则滚动到对应的行
              */
-            scrollToRow(row, fieldOrColumn, options) {
+            scrollToRow(rowOrRowid, fieldOrColumn, options) {
                 const { isAllOverflow, scrollYLoad, scrollXLoad } = reactData;
-                const { _sToTime } = internalData;
+                const { fullAllDataRowIdData, _sToTime } = internalData;
                 const rest = [];
+                let row;
+                if (XEUtils.isString(rowOrRowid) || XEUtils.isNumber(rowOrRowid)) {
+                    const rowid = rowOrRowid;
+                    const rowRest = rowid ? fullAllDataRowIdData[rowid] : null;
+                    if (rowRest) {
+                        row = rowRest.row;
+                    }
+                }
+                else {
+                    row = rowOrRowid;
+                }
                 if (row) {
                     if (props.treeConfig) {
                         rest.push($xeTable.scrollToTreeRow(row));
@@ -7883,6 +7899,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);
+        };
         /**
          * 全局滚动事件
          */
@@ -7943,8 +7976,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;
@@ -10270,7 +10303,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;
@@ -12292,7 +12325,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) {
@@ -12824,7 +12857,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 = {
@@ -12854,8 +12887,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,
@@ -12996,16 +13027,6 @@ export default defineVxeComponent({
                                     })
                                 ]
                                 : []),
-                            /**
-                             * 自定义列
-                             */
-                            !showCustomSimpleOutside && initStore.custom
-                                ? h(TableCustomPanelComponent, {
-                                    key: 'cs',
-                                    ref: refTableCustom,
-                                    customStore
-                                })
-                                : renderEmptyElement($xeTable),
                             /**
                              * 加载中
                              */
@@ -13035,6 +13056,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'
                 }, [
@@ -13045,16 +13086,6 @@ export default defineVxeComponent({
                         h('div', {
                             ref: refPopupWrapperElem
                         }, [
-                            /**
-                             * 自定义列
-                             */
-                            showCustomSimpleOutside && initStore.custom
-                                ? h(TableCustomPanelComponent, {
-                                    key: 'cs',
-                                    ref: refTableCustom,
-                                    customStore
-                                })
-                                : renderEmptyElement($xeTable),
                             /**
                              * 筛选
                              */
@@ -13127,7 +13158,10 @@ export default defineVxeComponent({
                             minWidth: tableTipConfig.minWidth,
                             minHeight: tableTipConfig.minHeight,
                             maxWidth: tableTipConfig.maxWidth,
-                            maxHeight: tableTipConfig.maxHeight
+                            maxHeight: tableTipConfig.maxHeight,
+                            placement: tableTipConfig.placement,
+                            defaultPlacement: tableTipConfig.defaultPlacement,
+                            popupClassName: tableTipConfig.popupClassName
                         }, currTooltipSlot
                             ? {
                                 content: () => {
@@ -13695,6 +13729,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 });
         });
@@ -13726,6 +13761,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;