vxe-table 3.20.9 → 3.20.11

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

@@ -1,5 +1,6 @@
 import XEUtils from 'xe-utils';
 import { getColumnList } from '../../src/util';
+import { toCssUnit } from '../../../ui/src/dom';
 function updatePopupStyle($xeTable) {
     const $xeGrid = $xeTable.$xeGrid;
     const $xeGantt = $xeTable.$xeGantt;
@@ -7,20 +8,29 @@ function updatePopupStyle($xeTable) {
     const reactData = $xeTable;
     const { customStore } = reactData;
     const customOpts = $xeTable.computeCustomOpts;
+    const { mode, placement, popupOptions } = customOpts;
+    const showSimple = !(mode === 'modal' || mode === 'drawer');
+    const { transfer, maxHeight } = popupOptions || {};
     const customSimpleMode = $xeTable.computeCustomSimpleMode;
     const showCustomSimpleOutside = customSimpleMode === 'outside';
-    const { popupOptions } = customOpts;
-    const { maxHeight } = popupOptions || {};
+    const bodyEl = document.documentElement;
     let wrapperEl = $xeTable.$refs.refElem;
     let popupTop = 0;
     let popupMaxHeight = 0;
+    const popupStys = {};
     if ($xeGantt) {
         const ganttContainerElem = $xeGantt.$refs.refGanttContainerElem;
         if (ganttContainerElem) {
             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;
         }
@@ -33,8 +43,32 @@ function updatePopupStyle($xeTable) {
         }
         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 $xeTable.$nextTick();
 }
 function emitCustomEvent($xeTable, type, evnt) {
     const $xeGrid = $xeTable.$xeGrid;
@@ -53,7 +87,40 @@ export default {
         _openCustom() {
             const $xeTable = this;
             const reactData = $xeTable;
+            const internalData = $xeTable;
+            const $xeGrid = $xeTable.$xeGrid;
+            const $xeGantt = $xeTable.$xeGantt;
+            const $xeGGWrapper = $xeGrid || $xeGantt;
             const { initStore, customStore } = reactData;
+            const customOpts = $xeTable.computeCustomOpts;
+            const { mode, popupOptions } = customOpts;
+            const showSimple = !(mode === 'modal' || mode === 'drawer');
+            const { transfer } = popupOptions || {};
+            const customSimpleMode = $xeTable.computeCustomSimpleMode;
+            const showCustomSimpleOutside = customSimpleMode === 'outside';
+            let cpToElem = $xeTable.$refs.refCustomContainerElem;
+            // 多种模式，指定元素插入
+            if (showSimple && transfer) {
+                cpToElem = document.body;
+            }
+            else {
+                if (showCustomSimpleOutside && $xeGGWrapper) {
+                    const popupContainerElem = $xeGGWrapper.$refs.refPopupContainerElem;
+                    if (popupContainerElem) {
+                        cpToElem = popupContainerElem;
+                    }
+                }
+            }
+            if (cpToElem) {
+                const customPopupToElem = $xeTable.$refs.refCustomPopupToElem;
+                if (customPopupToElem && customPopupToElem.parentElement !== cpToElem) {
+                    cpToElem.appendChild(customPopupToElem);
+                }
+            }
+            if (internalData.customPopupToElem !== cpToElem) {
+                reactData.ctPopupFlag++;
+            }
+            internalData.customPopupToElem = cpToElem;
             customStore.visible = true;
             initStore.custom = true;
             $xeTable.handleUpdateCustomColumn();
@@ -350,6 +417,10 @@ export default {
                 customStore.oldVisibleMaps = visibleMaps;
                 reactData.customColumnList = collectColumn.slice(0);
             }
+        },
+        handleCustomStyle() {
+            const $xeTable = this;
+            return updatePopupStyle($xeTable);
         }
     }
 };

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

@@ -1,7 +1,7 @@
 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;
@@ -364,10 +364,17 @@ export default {
         },
         sortDragstartEvent(evnt) {
             const $xeTableCustomPanel = this;
+            const $xeTable = $xeTableCustomPanel.$xeTable;
+            const tableReactData = $xeTable;
             const customPanelInternalData = $xeTableCustomPanel.internalData;
+            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;
         },
@@ -544,6 +551,10 @@ export default {
                             tableReactData.customColumnList = collectColumn.slice(0);
                             $xeTable.handleColDragSwapColumn();
                         }
+                        customPanelInternalData.customDragTime = setTimeout(() => {
+                            tableReactData.isCustomDragStatus = false;
+                            customPanelInternalData.customDragTime = undefined;
+                        }, 350);
                     }).catch(() => {
                     });
                 }
@@ -650,13 +661,14 @@ export default {
             const $xeGantt = $xeTable.$xeGantt;
             const { customStore } = props;
             const { treeConfig, rowGroupConfig, aggregateConfig } = tableProps;
-            const { isCustomStatus, customColumnList } = tableReactData;
+            const { isCustomStatus, customColumnList, isCustomDragStatus } = tableReactData;
             const customOpts = $xeTable.computeCustomOpts;
             const { immediate } = customOpts;
             const columnDragOpts = $xeTable.computeColumnDragOpts;
-            const { maxHeight, popupTop } = customStore;
+            const { popupStyle } = customStore;
             const { checkMethod, visibleMethod, allowVisible, allowSort, allowFixed, trigger, placement } = customOpts;
             const isMaxFixedColumn = $xeTable.computeIsMaxFixedColumn;
+            const vSize = $xeTable.computeSize;
             const { isCrossDrag } = columnDragOpts;
             const slots = customOpts.slots || {};
             const headerSlot = slots.header;
@@ -809,20 +821,14 @@ export default {
                     ]));
                 }
             });
-            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', {
@@ -892,7 +898,7 @@ export default {
                                     : h('transition-group', {
                                         class: 'vxe-table-custom--panel-list',
                                         props: {
-                                            name: 'vxe-table-custom--list',
+                                            name: isCustomDragStatus ? 'vxe-table-custom--list' : '',
                                             tag: 'ul'
                                         },
                                         on: customWrapperOns

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

@@ -376,11 +376,9 @@ export default {
         moveCurrentRow(isUpArrow, isDwArrow, evnt) {
             const $xeTable = this;
             const props = $xeTable;
-            const reactData = $xeTable;
             const internalData = $xeTable;
             const { treeConfig } = props;
-            const { currentRow } = reactData;
-            const { afterFullData } = internalData;
+            const { afterFullData, currentRow } = internalData;
             const treeOpts = $xeTable.computeTreeOpts;
             const childrenField = treeOpts.children || treeOpts.childrenField;
             let targetRow;

package/es/table/src/body.js

@@ -319,6 +319,16 @@ function renderTdColumn(h, $xeTable, seq, rowid, fixedType, isOptimizeMode, rowL
         if (treeConfig) {
             tdVNs.push(...renderLine(h, $xeTable, rowid, cellParams, cellHeight));
         }
+        const clVNs = [];
+        if (!isVNPreEmptyStatus) {
+            clVNs.push(h('div', {
+                attrs: {
+                    colid,
+                    rowid
+                },
+                class: 'vxe-cell--wrapper vxe-body-cell--wrapper'
+            }, column.renderCell(h, cellParams)));
+        }
         tdVNs.push(h('div', {
             key: 'tc',
             class: ['vxe-cell', {
@@ -330,17 +340,7 @@ function renderTdColumn(h, $xeTable, seq, rowid, fixedType, isOptimizeMode, rowL
             attrs: {
                 title: showTitle ? $xeTable.getCellLabel(row, column) : null
             }
-        }, isVNPreEmptyStatus
-            ? []
-            : [
-                h('div', {
-                    attrs: {
-                        colid,
-                        rowid
-                    },
-                    class: 'vxe-cell--wrapper vxe-body-cell--wrapper'
-                }, column.renderCell(h, cellParams))
-            ]));
+        }, clVNs));
         if (showValidTip && errorValidItem) {
             const errRule = errorValidItem.rule;
             const validSlot = slots ? slots.valid : null;
@@ -440,8 +440,8 @@ function renderRows(h, _vm, fixedType, isOptimizeMode, tableData, tableColumn) {
     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 = $xeTable.computeCheckboxOpts;
     const radioOpts = $xeTable.computeRadioOpts;
     const treeOpts = $xeTable.computeTreeOpts;
@@ -533,7 +533,8 @@ function renderRows(h, _vm, fixedType, isOptimizeMode, tableData, tableColumn) {
                 'row--radio': radioOpts.highlight && 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)
             },
             rowClassName ? (XEUtils.isFunction(rowClassName) ? rowClassName(params) : rowClassName) : ''
         ];
@@ -546,7 +547,7 @@ function renderRows(h, _vm, fixedType, isOptimizeMode, tableData, tableColumn) {
                 rowid
             },
             style: rowStyle ? (XEUtils.isFunction(rowStyle) ? rowStyle(params) : rowStyle) : undefined,
-            key: rowKey || scrollXLoad || scrollYLoad || rowOpts.useKey || rowOpts.drag || columnOpts.drag || isRowGroupStatus || treeConfig ? rowid : $rowIndex,
+            key: rowKey || rowOpts.useKey || rowOpts.drag || columnOpts.drag || isRowGroupStatus || treeConfig ? rowid : $rowIndex,
             on: trOn
         }, tdVNs));
         // 如果行被展开了

package/es/table/src/methods.js

@@ -960,8 +960,8 @@ function updateStyle($xeTable) {
     const reactData = $xeTable;
     const internalData = $xeTable;
     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 = $xeTable.$refs.refElem;
     if (!el || (internalData.tBodyHeight && !el.clientHeight)) {
@@ -1565,8 +1565,8 @@ function handleReserveStatus($xeTable) {
     const reactData = $xeTable;
     const internalData = $xeTable;
     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 = $xeTable.computeExpandOpts;
     const treeOpts = $xeTable.computeTreeOpts;
     const radioOpts = $xeTable.computeRadioOpts;
@@ -1590,7 +1590,7 @@ function handleReserveStatus($xeTable) {
         handleCheckedCheckboxRow($xeTable, handleReserveRow($xeTable, internalData.checkboxReserveRowMap), true, true);
     }
     if (currentRow && !fullAllDataRowIdData[getRowid($xeTable, currentRow)]) {
-        reactData.currentRow = null; // 刷新当前行状态
+        internalData.currentRow = null; // 刷新当前行状态
     }
     // 行展开
     internalData.rowExpandedMaps = expandColumn ? getRecoverRowMaps($xeTable, rowExpandedMaps) : {}; // 刷新行展开状态
@@ -3014,8 +3014,10 @@ function handleRecalculateStyle($xeTable, reFull, reWidth, reHeight) {
     });
 }
 function handleLazyRecalculate($xeTable, reFull, reWidth, reHeight) {
+    const reactData = $xeTable;
     const internalData = $xeTable;
     return new Promise(resolve => {
+        const { customStore } = reactData;
         const { rceTimeout, rceRunTime } = internalData;
         const $xeGanttView = internalData.xeGanttView;
         const resizeOpts = $xeTable.computeResizeOpts;
@@ -3025,6 +3027,9 @@ function handleLazyRecalculate($xeTable, reFull, reWidth, reHeight) {
             autoCellWidth($xeTable);
             updateRowExpandStyle($xeTable);
         }
+        if (customStore.visible && $xeTable.handleCustomStyle) {
+            $xeTable.handleCustomStyle();
+        }
         if (rceTimeout) {
             clearTimeout(rceTimeout);
             if (rceRunTime && rceRunTime + (refreshDelay - 5) < Date.now()) {
@@ -4250,6 +4255,21 @@ function handleColumnVisible(visible) {
         return $xeTable.$nextTick();
     };
 }
+function reUpdateCustomStyleEvent($xeTable, evnt) {
+    const reactData = $xeTable;
+    const { customStore } = reactData;
+    const customOpts = $xeTable.computeCustomOpts;
+    const { popupOptions } = customOpts;
+    const { transfer } = popupOptions || {};
+    if (transfer && customStore.visible) {
+        const tableCustom = $xeTable.$refs.refTableCustom;
+        if (tableCustom && $xeTable.handleCustomStyle && !checkTargetElement(evnt.target, [tableCustom.$el], evnt.currentTarget)) {
+            $xeTable.handleCustomStyle().then(() => {
+                $xeTable.handleCustomStyle();
+            });
+        }
+    }
+}
 const tableMethods = {
     callSlot(slotFunc, params, h, vNodes) {
         const $xeTable = this;
@@ -6897,13 +6917,19 @@ const tableMethods = {
         $xeTable.closeFilter();
         $xeTable.closeMenu();
     },
+    handleGlobalScrollEvent(evnt) {
+        const $xeTable = this;
+        reUpdateCustomStyleEvent($xeTable, evnt);
+    },
     /**
      * 全局滚动事件
      */
     handleGlobalMousewheelEvent() {
         const $xeTable = this;
         $xeTable.closeTooltip();
-        $xeTable.closeMenu();
+        if ($xeTable.closeMenu) {
+            $xeTable.closeMenu();
+        }
     },
     /**
      * 表格键盘事件
@@ -6960,8 +6986,8 @@ const tableMethods = {
         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 = $xeTable.computeIsContentMenu;
                 const bodyMenu = $xeTable.computeBodyMenu;
                 const keyboardOpts = $xeTable.computeKeyboardOpts;
@@ -8417,8 +8443,8 @@ const tableMethods = {
     },
     triggerCurrentRowEvent(evnt, params) {
         const $xeTable = this;
-        const reactData = $xeTable;
-        const { currentRow: oldValue } = reactData;
+        const internalData = $xeTable;
+        const { currentRow: oldValue } = internalData;
         const rowOpts = $xeTable.computeRowOpts;
         const currentRowOpts = $xeTable.computeCurrentRowOpts;
         const beforeRowMethod = currentRowOpts.beforeSelectMethod || rowOpts.currentMethod;
@@ -8523,11 +8549,10 @@ const tableMethods = {
      */
     clearCurrentRow() {
         const $xeTable = this;
-        const reactData = $xeTable;
         const internalData = $xeTable;
         const $xeGanttView = internalData.xeGanttView;
         const el = $xeTable.$refs.refElem;
-        reactData.currentRow = null;
+        internalData.currentRow = null;
         internalData.hoverRow = null;
         if (el) {
             XEUtils.arrayEach(el.querySelectorAll('.row--current'), elem => removeClass(elem, 'row--current'));
@@ -8550,10 +8575,8 @@ const tableMethods = {
     getCurrentRecord(isFull) {
         const $xeTable = this;
         const props = $xeTable;
-        const reactData = $xeTable;
         const internalData = $xeTable;
-        const { currentRow } = reactData;
-        const { fullDataRowIdData, afterFullRowMaps } = internalData;
+        const { fullDataRowIdData, afterFullRowMaps, currentRow } = internalData;
         const rowOpts = $xeTable.computeRowOpts;
         if (rowOpts.isCurrent || props.highlightCurrentRow) {
             const rowid = getRowid($xeTable, currentRow);
@@ -11921,7 +11944,7 @@ const tableMethods = {
             rowExpandYSpaceEl.style.height = ySpaceHeight ? `${ySpaceHeight}px` : '';
         }
         reactData.scrollYTop = scrollYTop;
-        reactData.scrollYHeight = ySpaceHeight;
+        reactData.scrollYHeight = isScrollYBig ? sYHeight : ySpaceHeight;
         reactData.isScrollYBig = isScrollYBig;
         calcScrollbar($xeTable);
         if (isScrollYBig && mouseOpts.area) {
@@ -11989,17 +12012,26 @@ const tableMethods = {
     },
     /**
      * 如果有滚动条，则滚动到对应的行
-     * @param {Row} row 行对象
-     * @param {ColumnInfo} column 列配置
      */
-    scrollToRow(row, fieldOrColumn, options) {
+    scrollToRow(rowOrRowid, fieldOrColumn, options) {
         const $xeTable = this;
         const props = $xeTable;
         const reactData = $xeTable;
         const internalData = $xeTable;
         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));

package/es/table/src/table.js

@@ -1811,6 +1811,7 @@ export default {
         globalEvents.on($xeTable, 'mousewheel', this.handleGlobalMousewheelEvent);
         globalEvents.on($xeTable, 'keydown', this.handleGlobalKeydownEvent);
         globalEvents.on($xeTable, 'resize', this.handleGlobalResizeEvent);
+        globalEvents.on($xeTable, 'scroll', this.handleGlobalScrollEvent);
         globalEvents.on($xeTable, 'contextmenu', this.handleGlobalContextmenuEvent);
         $xeTable.preventEvent(null, 'created');
     },
@@ -1942,6 +1943,10 @@ export default {
         if (popupWrapperEl && popupWrapperEl.parentElement) {
             popupWrapperEl.parentElement.removeChild(popupWrapperEl);
         }
+        const customPopupToElem = $xeTable.$refs.refCustomPopupToElem;
+        if (customPopupToElem && customPopupToElem.parentElement) {
+            customPopupToElem.parentElement.removeChild(customPopupToElem);
+        }
         const tableViewportEl = $xeTable.$refs.refTableViewportElem;
         if (tableViewportEl) {
             tableViewportEl.removeEventListener('wheel', $xeTable.triggerBodyWheelEvent);
@@ -1960,6 +1965,7 @@ export default {
         globalEvents.off($xeTable, 'mousewheel');
         globalEvents.off($xeTable, 'keydown');
         globalEvents.off($xeTable, 'resize');
+        globalEvents.off($xeTable, 'scroll');
         globalEvents.off($xeTable, 'contextmenu');
         $xeTable.preventEvent(null, 'beforeDestroy');
         XEUtils.assign(reactData, createReactData());
@@ -2011,8 +2017,6 @@ export default {
         const columnDragOpts = $xeTable.computeColumnDragOpts;
         const scrollbarXToTop = $xeTable.computeScrollbarXToTop;
         const scrollbarYToLeft = $xeTable.computeScrollbarYToLeft;
-        const customSimpleMode = $xeTable.computeCustomSimpleMode;
-        const showCustomSimpleOutside = customSimpleMode === 'outside';
         const { isCrossTableDrag } = rowDragOpts;
         const tbOns = {
             contextmenu: this.contextMenuEvent,
@@ -2161,18 +2165,6 @@ export default {
                             })
                         ]
                         : []),
-                    /**
-                     * 自定义列
-                     */
-                    !showCustomSimpleOutside && initStore.custom
-                        ? h(TableCustomPanelComponent, {
-                            key: 'cs',
-                            ref: 'refTableCustom',
-                            props: {
-                                customStore
-                            }
-                        })
-                        : renderEmptyElement($xeTable),
                     /**
                      * 加载中
                      */
@@ -2205,15 +2197,16 @@ export default {
                 ])
             ]),
             h('div', {
-                key: 'tpw'
+                key: 'fpw',
+                ref: 'refCustomContainerElem'
             }, [
                 h('div', {
-                    ref: 'refPopupWrapperElem'
+                    ref: 'refCustomPopupToElem'
                 }, [
                     /**
                      * 自定义列
                      */
-                    showCustomSimpleOutside && initStore.custom
+                    initStore.custom
                         ? h(TableCustomPanelComponent, {
                             key: 'cs',
                             ref: 'refTableCustom',
@@ -2221,7 +2214,15 @@ export default {
                                 customStore
                             }
                         })
-                        : renderEmptyElement($xeTable),
+                        : renderEmptyElement($xeTable)
+                ])
+            ]),
+            h('div', {
+                key: 'tpw'
+            }, [
+                h('div', {
+                    ref: 'refPopupWrapperElem'
+                }, [
                     /**
                      * 筛选
                      */
@@ -2301,7 +2302,10 @@ export default {
                             minWidth: tableTipConfig.minWidth,
                             minHeight: tableTipConfig.minHeight,
                             maxWidth: tableTipConfig.maxWidth,
-                            maxHeight: tableTipConfig.maxHeight
+                            maxHeight: tableTipConfig.maxHeight,
+                            placement: tableTipConfig.placement,
+                            defaultPlacement: tableTipConfig.defaultPlacement,
+                            popupClassName: tableTipConfig.popupClassName
                         },
                         scopedSlots: currTooltipSlot
                             ? {

package/es/table/src/util.js

@@ -82,6 +82,8 @@ export function createInternalData() {
         sourceDataRowIdData: {},
         fullColumnIdData: {},
         fullColumnFieldData: {},
+        // 当前行
+        currentRow: null,
         // 合并表头单元格的数据
         mergeHeaderList: [],
         mergeHeaderMaps: {},
@@ -130,6 +132,7 @@ export function createInternalData() {
         tFooterHeight: 0,
         teleportToWrapperElem: null,
         popupToWrapperElem: null,
+        customPopupToElem: null,
         lastSTime: 0,
         inited: false,
         tooltipTimeout: null,
@@ -172,8 +175,6 @@ export function createReactData() {
         isAllSelected: false,
         // 复选框属性，有选中且非全选状态
         isIndeterminate: false,
-        // 当前行
-        currentRow: null,
         // 单选框属性，选中列
         currentColumn: null,
         // 单选框属性，选中行
@@ -209,7 +210,7 @@ export function createReactData() {
             activeWrapper: false,
             visible: false,
             maxHeight: null,
-            popupTop: 0,
+            popupStyle: {},
             oldSortMaps: {},
             oldFixedMaps: {},
             oldVisibleMaps: {}
@@ -370,6 +371,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;