vxe-table 3.18.14 → 3.18.16

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

@@ -169,7 +169,7 @@ export default {
             const isContentMenu = $xeTable.computeIsContentMenu;
             const menuOpts = $xeTable.computeMenuOpts;
             const config = menuOpts[type];
-            const visibleMethod = menuOpts.visibleMethod;
+            const { transfer, visibleMethod } = menuOpts;
             if (config) {
                 const { options, disabled } = config;
                 if (disabled) {
@@ -181,9 +181,15 @@ export default {
                         if (!visibleMethod || visibleMethod(params)) {
                             evnt.preventDefault();
                             $xeTable.updateZindex();
+                            const el = $xeTable.$refs.refElem;
+                            const tableRect = el.getBoundingClientRect();
                             const { scrollTop, scrollLeft, visibleHeight, visibleWidth } = getDomNode();
-                            let top = evnt.clientY + scrollTop;
-                            let left = evnt.clientX + scrollLeft;
+                            let top = evnt.clientY - tableRect.y;
+                            let left = evnt.clientX - tableRect.x;
+                            if (transfer) {
+                                top = evnt.clientY + scrollTop;
+                                left = evnt.clientX + scrollLeft;
+                            }
                             const handleVisible = () => {
                                 internalData._currMenuParams = params;
                                 Object.assign(ctxMenuStore, {

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

@@ -7,142 +7,160 @@ export default {
         ctxMenuStore: Object,
         ctxMenuOpts: Object
     },
+    inject: {
+        $xeTable: {
+            default: null
+        }
+    },
     mounted() {
-        document.body.appendChild(this.$el);
+        const $xeMenuPanel = this;
+        const $xeTable = $xeMenuPanel.$xeTable;
+        const menuOpts = $xeTable.computeMenuOpts;
+        const { transfer } = menuOpts;
+        const el = this.$refs.refElem;
+        if (transfer && el) {
+            document.body.appendChild(el);
+        }
     },
     beforeDestroy() {
-        const { $el } = this;
-        if ($el.parentNode) {
-            $el.parentNode.removeChild($el);
+        const el = this.$refs.refElem;
+        if (el && el.parentNode) {
+            el.parentNode.removeChild(el);
         }
     },
     render(h) {
-        const $xeTable = this.$parent;
+        const $xeMenuPanel = this;
+        const $xeTable = $xeMenuPanel.$xeTable;
         const tableReactData = $xeTable;
         const { ctxMenuStore } = tableReactData;
         const menuOpts = $xeTable.computeMenuOpts;
+        const { destroyOnClose } = menuOpts;
+        const { visible, list, className } = ctxMenuStore;
         return h('div', {
-            class: ['vxe-table--context-menu-wrapper', menuOpts.className, {
-                    'is--visible': ctxMenuStore.visible
+            ref: 'refElem',
+            class: ['vxe-table--context-menu-wrapper', className, {
+                    'is--visible': visible
                 }],
             style: ctxMenuStore.style
-        }, ctxMenuStore.list.map((options, gIndex) => {
-            return options.every((item) => item.visible === false)
-                ? renderEmptyElement($xeTable)
-                : h('ul', {
-                    class: 'vxe-context-menu--option-wrapper',
-                    key: gIndex
-                }, options.map((item, index) => {
-                    const hasChildMenus = item.children && item.children.some((child) => child.visible !== false);
-                    const prefixOpts = Object.assign({}, item.prefixConfig);
-                    const suffixOpts = Object.assign({}, item.suffixConfig);
-                    const menuContent = getFuncText(item.name);
-                    return item.visible === false
-                        ? null
-                        : h('li', {
-                            class: [item.className, {
-                                    'link--disabled': item.disabled,
-                                    'link--active': item === ctxMenuStore.selected
-                                }],
-                            key: `${gIndex}_${index}`
-                        }, [
-                            h('a', {
-                                class: 'vxe-context-menu--link',
-                                on: {
-                                    click(evnt) {
-                                        $xeTable.ctxMenuLinkEvent(evnt, item);
-                                    },
-                                    mouseover(evnt) {
-                                        $xeTable.ctxMenuMouseoverEvent(evnt, item);
-                                    },
-                                    mouseout(evnt) {
-                                        $xeTable.ctxMenuMouseoutEvent(evnt, item);
-                                    }
-                                }
+        }, (destroyOnClose ? visible : true)
+            ? list.map((options, gIndex) => {
+                return options.every((item) => item.visible === false)
+                    ? renderEmptyElement($xeTable)
+                    : h('ul', {
+                        class: 'vxe-context-menu--option-wrapper',
+                        key: gIndex
+                    }, options.map((item, index) => {
+                        const hasChildMenus = item.children && item.children.some((child) => child.visible !== false);
+                        const prefixOpts = Object.assign({}, item.prefixConfig);
+                        const suffixOpts = Object.assign({}, item.suffixConfig);
+                        const menuContent = getFuncText(item.name);
+                        return item.visible === false
+                            ? renderEmptyElement($xeTable)
+                            : h('li', {
+                                class: [item.className, {
+                                        'link--disabled': item.disabled,
+                                        'link--active': item === ctxMenuStore.selected
+                                    }],
+                                key: `${gIndex}_${index}`
                             }, [
-                                h('div', {
-                                    class: ['vxe-context-menu--link-prefix', prefixOpts.className || '']
-                                }, [
-                                    h('i', {
-                                        class: prefixOpts.icon || item.prefixIcon
-                                    }),
-                                    prefixOpts.content ? h('span', {}, `${prefixOpts.content}`) : renderEmptyElement($xeTable)
-                                ]),
-                                h('span', {
-                                    class: 'vxe-context-menu--link-content',
-                                    attrs: {
-                                        title: menuContent
+                                h('a', {
+                                    class: 'vxe-context-menu--link',
+                                    on: {
+                                        click(evnt) {
+                                            $xeTable.ctxMenuLinkEvent(evnt, item);
+                                        },
+                                        mouseover(evnt) {
+                                            $xeTable.ctxMenuMouseoverEvent(evnt, item);
+                                        },
+                                        mouseout(evnt) {
+                                            $xeTable.ctxMenuMouseoutEvent(evnt, item);
+                                        }
                                     }
-                                }, menuContent),
-                                h('div', {
-                                    class: ['vxe-context-menu--link-suffix', suffixOpts.className || '']
                                 }, [
-                                    h('i', {
-                                        class: (suffixOpts.icon || item.suffixIcon) || (hasChildMenus ? getIcon().TABLE_MENU_OPTIONS : '')
-                                    }),
-                                    suffixOpts.content ? h('span', `${suffixOpts.content}`) : renderEmptyElement($xeTable)
-                                ])
-                            ]),
-                            hasChildMenus
-                                ? h('ul', {
-                                    class: ['vxe-table--context-menu-clild-wrapper', {
-                                            'is--show': item === ctxMenuStore.selected && ctxMenuStore.showChild
-                                        }]
-                                }, item.children.map((child, cIndex) => {
-                                    const childPrefixOpts = Object.assign({}, child.prefixConfig);
-                                    const childSuffixOpts = Object.assign({}, child.suffixConfig);
-                                    const childMenuContent = getFuncText(child.name);
-                                    return child.visible === false
-                                        ? null
-                                        : h('li', {
-                                            class: [child.className, {
-                                                    'link--disabled': child.disabled,
-                                                    'link--active': child === ctxMenuStore.selectChild
-                                                }],
-                                            key: `${gIndex}_${index}_${cIndex}`
-                                        }, [
-                                            h('a', {
-                                                class: 'vxe-context-menu--link',
-                                                on: {
-                                                    click(evnt) {
-                                                        $xeTable.ctxMenuLinkEvent(evnt, child);
-                                                    },
-                                                    mouseover(evnt) {
-                                                        $xeTable.ctxMenuMouseoverEvent(evnt, item, child);
-                                                    },
-                                                    mouseout(evnt) {
-                                                        $xeTable.ctxMenuMouseoutEvent(evnt, item);
-                                                    }
-                                                }
+                                    h('div', {
+                                        class: ['vxe-context-menu--link-prefix', prefixOpts.className || '']
+                                    }, [
+                                        h('i', {
+                                            class: prefixOpts.icon || item.prefixIcon
+                                        }),
+                                        prefixOpts.content ? h('span', {}, `${prefixOpts.content}`) : renderEmptyElement($xeTable)
+                                    ]),
+                                    h('span', {
+                                        class: 'vxe-context-menu--link-content',
+                                        attrs: {
+                                            title: menuContent
+                                        }
+                                    }, menuContent),
+                                    h('div', {
+                                        class: ['vxe-context-menu--link-suffix', suffixOpts.className || '']
+                                    }, [
+                                        h('i', {
+                                            class: (suffixOpts.icon || item.suffixIcon) || (hasChildMenus ? getIcon().TABLE_MENU_OPTIONS : '')
+                                        }),
+                                        suffixOpts.content ? h('span', `${suffixOpts.content}`) : renderEmptyElement($xeTable)
+                                    ])
+                                ]),
+                                hasChildMenus
+                                    ? h('ul', {
+                                        class: ['vxe-table--context-menu-clild-wrapper', {
+                                                'is--show': item === ctxMenuStore.selected && ctxMenuStore.showChild
+                                            }]
+                                    }, item.children.map((child, cIndex) => {
+                                        const childPrefixOpts = Object.assign({}, child.prefixConfig);
+                                        const childSuffixOpts = Object.assign({}, child.suffixConfig);
+                                        const childMenuContent = getFuncText(child.name);
+                                        return child.visible === false
+                                            ? null
+                                            : h('li', {
+                                                class: [child.className, {
+                                                        'link--disabled': child.disabled,
+                                                        'link--active': child === ctxMenuStore.selectChild
+                                                    }],
+                                                key: `${gIndex}_${index}_${cIndex}`
                                             }, [
-                                                h('div', {
-                                                    class: ['vxe-context-menu--link-prefix', childPrefixOpts.className || '']
-                                                }, [
-                                                    h('i', {
-                                                        class: childPrefixOpts.icon || child.prefixIcon
-                                                    }),
-                                                    childPrefixOpts.content ? h('span', `${childPrefixOpts.content}`) : renderEmptyElement($xeTable)
-                                                ]),
-                                                h('span', {
-                                                    class: 'vxe-context-menu--link-content',
-                                                    attrs: {
-                                                        title: childMenuContent
+                                                h('a', {
+                                                    class: 'vxe-context-menu--link',
+                                                    on: {
+                                                        click(evnt) {
+                                                            $xeTable.ctxMenuLinkEvent(evnt, child);
+                                                        },
+                                                        mouseover(evnt) {
+                                                            $xeTable.ctxMenuMouseoverEvent(evnt, item, child);
+                                                        },
+                                                        mouseout(evnt) {
+                                                            $xeTable.ctxMenuMouseoutEvent(evnt, item);
+                                                        }
                                                     }
-                                                }, childMenuContent),
-                                                h('div', {
-                                                    class: ['vxe-context-menu--link-suffix', childSuffixOpts.className || '']
                                                 }, [
-                                                    h('i', {
-                                                        class: childSuffixOpts.icon
-                                                    }),
-                                                    childSuffixOpts.content ? h('span', `${childSuffixOpts.content}`) : renderEmptyElement($xeTable)
+                                                    h('div', {
+                                                        class: ['vxe-context-menu--link-prefix', childPrefixOpts.className || '']
+                                                    }, [
+                                                        h('i', {
+                                                            class: childPrefixOpts.icon || child.prefixIcon
+                                                        }),
+                                                        childPrefixOpts.content ? h('span', `${childPrefixOpts.content}`) : renderEmptyElement($xeTable)
+                                                    ]),
+                                                    h('span', {
+                                                        class: 'vxe-context-menu--link-content',
+                                                        attrs: {
+                                                            title: childMenuContent
+                                                        }
+                                                    }, childMenuContent),
+                                                    h('div', {
+                                                        class: ['vxe-context-menu--link-suffix', childSuffixOpts.className || '']
+                                                    }, [
+                                                        h('i', {
+                                                            class: childSuffixOpts.icon
+                                                        }),
+                                                        childSuffixOpts.content ? h('span', `${childSuffixOpts.content}`) : renderEmptyElement($xeTable)
+                                                    ])
                                                 ])
-                                            ])
-                                        ]);
-                                }))
-                                : null
-                        ]);
-                }));
-        }));
+                                            ]);
+                                    }))
+                                    : null
+                            ]);
+                    }));
+            })
+            : []);
     }
 };

package/es/table/src/header.js

@@ -144,7 +144,10 @@ function renderRows(h, _vm, isGroup, isOptimizeMode, headerGroups, $rowIndex, co
         else {
             tcStyle.minHeight = `${currCellHeight}px`;
         }
-        if (isColGroup && !isLastRow) {
+        if (showCustomHeader) {
+            // custom
+        }
+        else if (isColGroup && !isLastRow) {
             const firstCol = getColumnFirstChild(column);
             const lastCol = getColumnLastChild(column);
             if (firstCol && lastCol && firstCol.id !== lastCol.id) {

package/es/table/src/methods.js

@@ -3,7 +3,7 @@ import { getTpImg, isPx, isScale, hasClass, addClass, removeClass, getEventTarge
 import { getLastZIndex, nextZIndex, hasChildrenList, getFuncText, isEnableConf, formatText, eqEmptyValue } from '../../ui/src/utils';
 import { VxeUI } from '../../ui';
 import Cell from './cell';
-import { getRowUniqueId, clearTableAllStatus, getColumnList, toFilters, getRowkey, getRowid, rowToVisible, colToVisible, getCellValue, setCellValue, handleRowidOrRow, handleFieldOrColumn, toTreePathSeq, restoreScrollLocation, getRootColumn, getColReMinWidth, createHandleUpdateRowId, createHandleGetRowId, getRefElem, getCellRestHeight } from './util';
+import { getRowUniqueId, clearTableAllStatus, getColumnList, toFilters, getRowkey, getRowid, rowToVisible, colToVisible, getCellValue, setCellValue, handleRowidOrRow, handleFieldOrColumn, toTreePathSeq, restoreScrollLocation, getRootColumn, getColReMinWidth, createHandleUpdateRowId, createHandleGetRowId, getRefElem, getCellRestHeight, getLastChildColumn } from './util';
 import { getSlotVNs } from '../../ui/src/vn';
 import { moveRowAnimateToTb, clearRowAnimate, moveColAnimateToLr, clearColAnimate } from './anime';
 import { warnLog, errLog } from '../../ui/src/log';
@@ -3515,6 +3515,7 @@ function initColumnHierarchy($xeTable) {
     internalData.fullColumnFieldData = fullColFieldData;
 }
 function handleInitColumn($xeTable, collectColumn) {
+    const props = $xeTable;
     const $xeToolbar = $xeTable.$refs.$xeToolbar;
     const reactData = $xeTable;
     const internalData = $xeTable;
@@ -3549,6 +3550,10 @@ function handleInitColumn($xeTable, collectColumn) {
             if ($xeTable.handleUpdateCustomColumn) {
                 $xeTable.handleUpdateCustomColumn();
             }
+            const columnOpts = $xeTable.computeColumnOpts;
+            if (props.showCustomHeader && reactData.isGroup && (columnOpts.resizable || props.resizable)) {
+                warnLog('vxe.error.notConflictProp', ['show-custom-header & colgroup', 'column-config.resizable=false']);
+            }
             reactData.isColLoading = false;
             return handleLazyRecalculate($xeTable, false, true, true);
         });
@@ -5676,18 +5681,16 @@ const Methods = {
         const scrollbarXToTop = $xeTable.computeScrollbarXToTop;
         const { clientX: dragClientX } = evnt;
         const dragBtnElem = evnt.target;
+        let cell = dragBtnElem.parentElement;
         let resizeColumn = column;
         const isDragGroupCol = column.children && column.children.length;
         if (isDragGroupCol) {
-            XEUtils.eachTree(column.children, childColumn => {
-                resizeColumn = childColumn;
-            });
-        }
-        let cell = dragBtnElem.parentElement;
-        if (isDragGroupCol) {
-            const trEl = cell ? cell.parentElement : null;
-            const theadEl = trEl ? trEl.parentElement : null;
-            cell = theadEl ? theadEl.querySelector(`.vxe-header--column[colid="${resizeColumn.id}"]`) : null;
+            resizeColumn = getLastChildColumn(column);
+            if (isDragGroupCol) {
+                const trEl = cell ? cell.parentElement : null;
+                const theadEl = trEl ? trEl.parentElement : null;
+                cell = theadEl ? theadEl.querySelector(`.vxe-header--column[colid="${resizeColumn.id}"]`) : null;
+            }
         }
         if (!cell) {
             return;
@@ -10479,7 +10482,7 @@ const Methods = {
             const xThreshold = $xeTable.computeScrollXThreshold;
             isLeft = scrollLeft <= 0;
             if (!isLeft) {
-                isRight = scrollLeft + bodyWidth >= scrollWidth;
+                isRight = scrollLeft + bodyWidth >= scrollWidth - 1;
             }
             if (scrollLeft > lastScrollLeft) {
                 direction = 'right';
@@ -10500,7 +10503,7 @@ const Methods = {
             const yThreshold = $xeTable.computeScrollYThreshold;
             isTop = scrollTop <= 0;
             if (!isTop) {
-                isBottom = scrollTop + bodyHeight >= scrollHeight;
+                isBottom = scrollTop + bodyHeight >= scrollHeight - 1;
             }
             if (scrollTop > lastScrollTop) {
                 direction = 'bottom';

package/es/table/src/table.js

@@ -1739,7 +1739,9 @@ export default {
         const $xeTable = this;
         const props = $xeTable;
         const internalData = $xeTable;
+        const $xeGrid = $xeTable.$xeGrid;
         const $xeGantt = $xeTable.$xeGantt;
+        const $xeGGWrapper = $xeGrid || $xeGantt;
         const columnOpts = $xeTable.computeColumnOpts;
         const rowOpts = $xeTable.computeRowOpts;
         const customOpts = $xeTable.computeCustomOpts;
@@ -1754,6 +1756,16 @@ export default {
                 internalData.teleportToWrapperElem = classifyWrapperEl;
             }
         }
+        if ($xeGGWrapper) {
+            const popupContainerElem = $xeGantt.$refs.refPopupContainerElem;
+            const popupWrapperEl = $xeTable.$refs.refPopupWrapperElem;
+            if (popupContainerElem) {
+                if (popupWrapperEl) {
+                    popupContainerElem.appendChild(popupWrapperEl);
+                }
+                internalData.popupToWrapperElem = popupContainerElem;
+            }
+        }
         if (columnOpts.drag || rowOpts.drag || customOpts.allowSort) {
             initTpImg();
         }
@@ -1764,10 +1776,10 @@ export default {
         if (!this.tooltipConfig && ($listeners['cell-mouseenter'] || $listeners['cell-mouseleave'])) {
             warnLog('vxe.error.reqProp', ['tooltip-config']);
         }
-        // 使用已安装的组件，如果未安装则不渲染
-        const VxeUILoadingComponent = VxeUI.getComponent('VxeLoading');
-        const VxeUITooltipComponent = VxeUI.getComponent('VxeTooltip');
         $xeTable.$nextTick(() => {
+            // 使用已安装的组件，如果未安装则不渲染
+            const VxeUILoadingComponent = VxeUI.getComponent('VxeLoading');
+            const VxeUITooltipComponent = VxeUI.getComponent('VxeTooltip');
             if (props.loading) {
                 if (!VxeUILoadingComponent && !this.$scopedSlots.loading) {
                     errLog('vxe.error.errProp', ['loading=true', 'loading=false | <template #loading>...</template>']);
@@ -1841,6 +1853,10 @@ export default {
         if (teleportWrapperEl && teleportWrapperEl.parentElement) {
             teleportWrapperEl.parentElement.removeChild(teleportWrapperEl);
         }
+        const popupWrapperEl = $xeTable.$refs.refPopupWrapperElem;
+        if (popupWrapperEl && popupWrapperEl.parentElement) {
+            popupWrapperEl.parentElement.removeChild(popupWrapperEl);
+        }
         const tableViewportEl = $xeTable.$refs.refTableViewportElem;
         if (tableViewportEl) {
             tableViewportEl.removeEventListener('wheel', $xeTable.triggerBodyWheelEvent);
@@ -2086,18 +2102,39 @@ export default {
                     renderDragTip(h, this)
                 ])
             ]),
-            /**
-             * 筛选
-             */
-            initStore.filter
-                ? h(TableFilterPanelComponent, {
-                    key: 'tf',
-                    ref: 'refTableFilter',
-                    props: {
-                        filterStore
-                    }
-                })
-                : renderEmptyElement($xeTable),
+            h('div', {
+                key: 'tpw'
+            }, [
+                h('div', {
+                    ref: 'refPopupWrapperElem'
+                }, [
+                    /**
+                     * 筛选
+                     */
+                    initStore.filter
+                        ? h(TableFilterPanelComponent, {
+                            key: 'tf',
+                            ref: 'refTableFilter',
+                            props: {
+                                filterStore
+                            }
+                        })
+                        : renderEmptyElement($xeTable),
+                    /**
+                     * 快捷菜单
+                     */
+                    isContentMenu
+                        ? h(TableMenuPanelComponent, {
+                            key: 'tm',
+                            ref: 'refTableMenu',
+                            props: {
+                                ctxMenuStore: this.ctxMenuStore,
+                                ctxMenuOpts: this.ctxMenuOpts
+                            }
+                        })
+                        : renderEmptyElement($xeTable)
+                ])
+            ]),
             /**
              * 导入
              */
@@ -2122,19 +2159,6 @@ export default {
                     }
                 })
                 : renderEmptyElement($xeTable),
-            /**
-             * 快捷菜单
-             */
-            isContentMenu
-                ? h(TableMenuPanelComponent, {
-                    key: 'tm',
-                    ref: 'refTableMenu',
-                    props: {
-                        ctxMenuStore: this.ctxMenuStore,
-                        ctxMenuOpts: this.ctxMenuOpts
-                    }
-                })
-                : renderEmptyElement($xeTable),
             h('div', {}, [
                 /**
                  * 提示相关

package/es/table/src/util.js

@@ -121,6 +121,7 @@ export function createInternalData() {
         // 表尾高度
         tFooterHeight: 0,
         teleportToWrapperElem: null,
+        popupToWrapperElem: null,
         inited: false,
         tooltipTimeout: null,
         initStatus: false,
@@ -485,6 +486,20 @@ export function getColReMinWidth(params) {
     }
     return mWidth;
 }
+export function getFirstChildColumn(column) {
+    const { children } = column;
+    if (children && children.length) {
+        return getFirstChildColumn(XEUtils.first(children));
+    }
+    return column;
+}
+export function getLastChildColumn(column) {
+    const { children } = column;
+    if (children && children.length) {
+        return getFirstChildColumn(XEUtils.last(children));
+    }
+    return column;
+}
 const lineOffsetSizes = {
     mini: 3,
     small: 2,

package/es/ui/index.js

@@ -1,6 +1,6 @@
 import { VxeUI } from '@vxe-ui/core';
 import { getFuncText } from './src/utils';
-export const version = "3.18.14";
+export const version = "3.18.16";
 VxeUI.version = version;
 VxeUI.tableVersion = version;
 VxeUI.setConfig({
@@ -94,9 +94,11 @@ VxeUI.setConfig({
         footerCellConfig: {
             height: 'unset'
         },
-        // menuConfig: {
-        //   visibleMethod () {}
-        // },
+        menuConfig: {
+            // visibleMethod () {},
+            // transfer: false,
+            destroyOnClose: true
+        },
         customConfig: {
             // enabled: false,
             allowVisible: true,
@@ -143,8 +145,9 @@ VxeUI.setConfig({
         filterConfig: {
             // remote: false,
             // filterMethod: null,
-            // destroyOnClose: false,
             // isEvery: false,
+            // transfer: false,
+            destroyOnClose: true,
             multiple: true,
             showIcon: true
         },

package/es/ui/src/log.js

@@ -1,5 +1,5 @@
 import { VxeUI } from '@vxe-ui/core';
 const { log } = VxeUI;
-const version = `table v${"3.18.14"}`;
+const version = `table v${"3.18.16"}`;
 export const warnLog = log.create('warn', version);
 export const errLog = log.create('error', version);

package/es/vxe-grid/style.css

@@ -1,6 +1,5 @@
 .vxe-grid {
   position: relative;
-  overflow: auto;
   display: flex;
   flex-direction: column;
 }

package/es/vxe-grid/style.min.css

@@ -1 +1 @@
-.vxe-grid{position:relative;overflow:auto;display:flex;flex-direction:column}.vxe-grid.is--loading:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:99;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:var(--vxe-ui-loading-background-color)}.vxe-grid.is--loading>.vxe-table .vxe-loading{background-color:transparent}.vxe-grid.is--maximize{position:fixed;top:0;left:0;width:100%;height:100%;padding:.5em 1em;background-color:var(--vxe-ui-layout-background-color)}.vxe-grid .vxe-grid--bottom-wrapper,.vxe-grid .vxe-grid--form-wrapper,.vxe-grid .vxe-grid--top-wrapper{position:relative}.vxe-grid .vxe-grid--table-container{display:flex;flex-direction:row}.vxe-grid .vxe-grid--left-wrapper,.vxe-grid .vxe-grid--right-wrapper{flex-shrink:0;overflow:auto;outline:0}.vxe-grid .vxe-grid--table-wrapper{flex-grow:1;overflow:hidden}.vxe-grid--layout-body-wrapper{display:flex;flex-direction:row;overflow:auto;flex-grow:1}.vxe-grid--layout-body-content-wrapper{flex-grow:1;overflow:auto}.vxe-grid--layout-aside-left-wrapper,.vxe-grid--layout-footer-wrapper,.vxe-grid--layout-header-wrapper{flex-shrink:0}.vxe-grid--layout-aside-left-wrapper{overflow:auto}.vxe-grid{font-size:var(--vxe-ui-font-size-default)}.vxe-grid.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-grid.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-grid.size--mini{font-size:var(--vxe-ui-font-size-mini)}
+.vxe-grid{position:relative;display:flex;flex-direction:column}.vxe-grid.is--loading:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:99;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:var(--vxe-ui-loading-background-color)}.vxe-grid.is--loading>.vxe-table .vxe-loading{background-color:transparent}.vxe-grid.is--maximize{position:fixed;top:0;left:0;width:100%;height:100%;padding:.5em 1em;background-color:var(--vxe-ui-layout-background-color)}.vxe-grid .vxe-grid--bottom-wrapper,.vxe-grid .vxe-grid--form-wrapper,.vxe-grid .vxe-grid--top-wrapper{position:relative}.vxe-grid .vxe-grid--table-container{display:flex;flex-direction:row}.vxe-grid .vxe-grid--left-wrapper,.vxe-grid .vxe-grid--right-wrapper{flex-shrink:0;overflow:auto;outline:0}.vxe-grid .vxe-grid--table-wrapper{flex-grow:1;overflow:hidden}.vxe-grid--layout-body-wrapper{display:flex;flex-direction:row;overflow:auto;flex-grow:1}.vxe-grid--layout-body-content-wrapper{flex-grow:1;overflow:auto}.vxe-grid--layout-aside-left-wrapper,.vxe-grid--layout-footer-wrapper,.vxe-grid--layout-header-wrapper{flex-shrink:0}.vxe-grid--layout-aside-left-wrapper{overflow:auto}.vxe-grid{font-size:var(--vxe-ui-font-size-default)}.vxe-grid.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-grid.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-grid.size--mini{font-size:var(--vxe-ui-font-size-mini)}

package/lib/grid/src/grid.js

@@ -1816,7 +1816,9 @@ var _default = exports.default = /* define-vxe-component start */(0, _comp.defin
         class: 'vxe-grid--layout-aside-right-wrapper'
       }, asideRightSlot({})) : renderEmptyElement($xeGrid)]), h('div', {
         class: 'vxe-grid--layout-footer-wrapper'
-      }, $xeGrid.renderChildLayout(h, footKeys))];
+      }, $xeGrid.renderChildLayout(h, footKeys)), h('div', {
+        ref: 'refPopupContainerElem'
+      })];
     },
     renderVN(h) {
       const $xeGrid = this;