vxe-table 3.20.10 → 3.20.12

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

@@ -1,5 +1,6 @@
 import XEUtils from 'xe-utils';
 import { VxeUI } from '../../ui';
+import { defineVxeComponent } from '../../ui/src/comp';
 import { isEnableConf, getClass } from '../../ui/src/utils';
 import { getRowid, createHandleGetRowId, getCellRestHeight } from './util';
 import { updateCellTitle } from '../../ui/src/dom';
@@ -441,7 +442,7 @@ function renderRows(h, _vm, fixedType, isOptimizeMode, tableData, tableColumn) {
     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 = $xeTable.computeCheckboxOpts;
     const radioOpts = $xeTable.computeRadioOpts;
     const treeOpts = $xeTable.computeTreeOpts;
@@ -533,7 +534,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) : ''
         ];

package/es/table/src/footer.js

@@ -1,5 +1,6 @@
 import XEUtils from 'xe-utils';
 import { VxeUI } from '../../ui';
+import { defineVxeComponent } from '../../ui/src/comp';
 import { getClass } from '../../ui/src/utils';
 import { updateCellTitle } from '../../ui/src/dom';
 import { getCalcHeight } from './util';

package/es/table/src/header.js

@@ -1,5 +1,6 @@
 import XEUtils from 'xe-utils';
 import { VxeUI } from '../../ui';
+import { defineVxeComponent } from '../../ui/src/comp';
 import { isEnableConf, getClass } from '../../ui/src/utils';
 import { getCalcHeight, convertHeaderColumnToRows, convertHeaderToGridRows } from './util';
 import { getSlotVNs } from '../../ui/src/vn';
@@ -348,8 +349,9 @@ export default {
         }
     },
     data() {
+        const headerColumn = [];
         return {
-            headerColumn: []
+            headerColumn
         };
     },
     watch: {
@@ -559,7 +561,9 @@ export default {
                 spanColumns = visibleColgroups;
             }
             _vm.headerColumn = spanColumns;
-            $xeTable.dispatchEvent('columns-change', { visibleColgroups, collectColumn, visibleColumn }, null);
+            $xeTable.$nextTick(() => {
+                $xeTable.dispatchEvent('columns-change', { visibleColgroups, collectColumn, visibleColumn }, null);
+            });
         }
     }
 };

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)) {
@@ -1327,7 +1327,7 @@ function handleDefaultRadioChecked($xeTable) {
         const { checkRowKey: rowid, reserve } = radioOpts;
         if (rowid) {
             if (fullDataRowIdData[rowid]) {
-                handleCheckedRadioRow(fullDataRowIdData[rowid].row, true);
+                handleCheckedRadioRow($xeTable, fullDataRowIdData[rowid].row, true);
             }
             if (reserve) {
                 const rowkey = getRowkey($xeTable);
@@ -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) : {}; // 刷新行展开状态
@@ -2467,10 +2467,13 @@ const calcCellHeight = ($xeTable) => {
     const { treeConfig } = props;
     const { tableData, isAllOverflow, scrollYLoad, scrollXLoad } = reactData;
     const { fullAllDataRowIdData } = internalData;
+    const el = $xeTable.$refs.refElem;
+    if (!el || !el.clientWidth) {
+        return;
+    }
     const treeOpts = $xeTable.computeTreeOpts;
     const defaultRowHeight = $xeTable.computeDefaultRowHeight;
-    const el = $xeTable.$refs.refElem;
-    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 => {
@@ -2931,6 +2934,10 @@ function calcScrollbar($xeTable) {
     const { scrollXWidth, scrollYHeight } = reactData;
     const { elemStore } = internalData;
     const scrollbarOpts = $xeTable.computeScrollbarOpts;
+    const el = $xeTable.$refs.refElem;
+    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']);
@@ -3014,8 +3021,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 +3034,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()) {
@@ -4027,6 +4039,10 @@ function handleUpdateRowResize($xeTable, evnt, params) {
 function updateColumnOffsetLeft($xeTable) {
     const internalData = $xeTable;
     const { visibleColumn, fullColumnIdData } = internalData;
+    const el = $xeTable.$refs.refElem;
+    if (!el || !el.clientWidth) {
+        return;
+    }
     let offsetLeft = 0;
     for (let cIndex = 0, rLen = visibleColumn.length; cIndex < rLen; cIndex++) {
         const column = visibleColumn[cIndex];
@@ -4043,6 +4059,10 @@ function updateRowOffsetTop($xeTable) {
     const internalData = $xeTable;
     const { expandColumn } = reactData;
     const { afterFullData, fullAllDataRowIdData, rowExpandedMaps } = internalData;
+    const el = $xeTable.$refs.refElem;
+    if (!el || !el.clientWidth) {
+        return;
+    }
     const expandOpts = $xeTable.computeExpandOpts;
     const rowOpts = $xeTable.computeRowOpts;
     const cellOpts = $xeTable.computeCellOpts;
@@ -4068,6 +4088,10 @@ function updateRowExpandStyle($xeTable) {
     const reactData = $xeTable;
     const internalData = $xeTable;
     const { expandColumn, scrollYLoad, scrollYTop, isScrollYBig } = reactData;
+    const el = $xeTable.$refs.refElem;
+    if (!el || !el.clientWidth) {
+        return;
+    }
     const expandOpts = $xeTable.computeExpandOpts;
     const rowOpts = $xeTable.computeRowOpts;
     const cellOpts = $xeTable.computeCellOpts;
@@ -4134,6 +4158,10 @@ function updateTreeLineStyle($xeTable) {
     }
     const { tableData } = reactData;
     const { fullAllDataRowIdData, treeExpandedMaps } = internalData;
+    const el = $xeTable.$refs.refElem;
+    if (!el || !el.clientWidth) {
+        return;
+    }
     const cellOpts = $xeTable.computeCellOpts;
     const rowOpts = $xeTable.computeRowOpts;
     const defaultRowHeight = $xeTable.computeDefaultRowHeight;
@@ -4250,6 +4278,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 +6940,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 +7009,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;
@@ -8357,7 +8406,7 @@ const tableMethods = {
             let newValue = row;
             let isChange = oldValue !== newValue;
             if (strict) {
-                handleCheckedRadioRow($xeTable, newValue);
+                handleCheckedRadioRow($xeTable, newValue, false);
             }
             else {
                 if (oldValue === newValue) {
@@ -8365,7 +8414,7 @@ const tableMethods = {
                 }
                 isChange = oldValue !== newValue;
                 if (isChange && newValue) {
-                    handleCheckedRadioRow($xeTable, newValue);
+                    handleCheckedRadioRow($xeTable, newValue, false);
                 }
                 else {
                     newValue = null;
@@ -8417,8 +8466,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 +8572,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 +8598,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 +11967,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) {

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'
+                }, [
                     /**
                      * 筛选
                      */

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,