vxe-table 4.16.15 → 4.16.17

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

@@ -20,7 +20,7 @@ hooks.add('tableMenuModule', {
             const isContentMenu = computeIsContentMenu.value;
             const menuOpts = computeMenuOpts.value;
             const config = menuOpts[type];
-            const visibleMethod = menuOpts.visibleMethod;
+            const { transfer, visibleMethod } = menuOpts;
             if (config) {
                 const { options, disabled } = config;
                 if (disabled) {
@@ -32,9 +32,15 @@ hooks.add('tableMenuModule', {
                         if (!visibleMethod || visibleMethod(params)) {
                             evnt.preventDefault();
                             $xeTable.updateZindex();
+                            const el = refElem.value;
+                            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

@@ -1,9 +1,9 @@
-import { h, Teleport, inject, ref, createCommentVNode } from 'vue';
+import { h, Teleport, inject, ref } from 'vue';
 import { defineVxeComponent } from '../../../ui/src/comp';
 import { VxeUI } from '../../../ui';
 import { getFuncText } from '../../../ui/src/utils';
 import XEUtils from 'xe-utils';
-const { getIcon } = VxeUI;
+const { getIcon, renderEmptyElement } = VxeUI;
 export default defineVxeComponent({
     name: 'VxeTableMenuPanel',
     setup(props, context) {
@@ -24,126 +24,130 @@ export default defineVxeComponent({
             const { ctxMenuStore } = tableReactData;
             const { computeMenuOpts } = $xeTable.getComputeMaps();
             const menuOpts = computeMenuOpts.value;
+            const { transfer, destroyOnClose } = menuOpts;
+            const { visible, list, className } = ctxMenuStore;
             return h(Teleport, {
                 to: 'body',
-                disabled: false
+                disabled: !transfer
             }, [
                 h('div', {
                     ref: refElem,
-                    class: ['vxe-table--context-menu-wrapper', menuOpts.className, {
-                            'is--visible': ctxMenuStore.visible
+                    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)
-                        ? createCommentVNode()
-                        : 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',
-                                        onClick(evnt) {
-                                            $xeTable.ctxMenuLinkEvent(evnt, item);
-                                        },
-                                        onMouseover(evnt) {
-                                            $xeTable.ctxMenuMouseoverEvent(evnt, item);
-                                        },
-                                        onMouseout(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('a', {
+                                            class: 'vxe-context-menu--link',
+                                            onClick(evnt) {
+                                                $xeTable.ctxMenuLinkEvent(evnt, item);
+                                            },
+                                            onMouseover(evnt) {
+                                                $xeTable.ctxMenuMouseoverEvent(evnt, item);
+                                            },
+                                            onMouseout(evnt) {
+                                                $xeTable.ctxMenuMouseoutEvent(evnt, item);
+                                            }
                                         }, [
-                                            h('i', {
-                                                class: prefixOpts.icon || item.prefixIcon
-                                            }),
-                                            prefixOpts.content ? h('span', {}, `${prefixOpts.content}`) : createCommentVNode()
+                                            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('div', {
+                                                class: 'vxe-context-menu--link-content',
+                                                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)
+                                            ])
                                         ]),
-                                        h('div', {
-                                            class: 'vxe-context-menu--link-content',
-                                            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}`) : createCommentVNode()
-                                        ])
-                                    ]),
-                                    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',
-                                                        onClick(evnt) {
-                                                            $xeTable.ctxMenuLinkEvent(evnt, child);
-                                                        },
-                                                        onMouseover(evnt) {
-                                                            $xeTable.ctxMenuMouseoverEvent(evnt, item, child);
-                                                        },
-                                                        onMouseout(evnt) {
-                                                            $xeTable.ctxMenuMouseoutEvent(evnt, item);
-                                                        }
+                                        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}`) : createCommentVNode()
-                                                        ]),
-                                                        h('div', {
-                                                            class: 'vxe-context-menu--link-content',
-                                                            title: childMenuContent
-                                                        }, childMenuContent),
-                                                        h('div', {
-                                                            class: ['vxe-context-menu--link-suffix', childSuffixOpts.className || '']
+                                                        h('a', {
+                                                            class: 'vxe-context-menu--link',
+                                                            onClick(evnt) {
+                                                                $xeTable.ctxMenuLinkEvent(evnt, child);
+                                                            },
+                                                            onMouseover(evnt) {
+                                                                $xeTable.ctxMenuMouseoverEvent(evnt, item, child);
+                                                            },
+                                                            onMouseout(evnt) {
+                                                                $xeTable.ctxMenuMouseoutEvent(evnt, item);
+                                                            }
                                                         }, [
-                                                            h('i', {
-                                                                class: childSuffixOpts.icon
-                                                            }),
-                                                            childSuffixOpts.content ? h('span', `${childSuffixOpts.content}`) : createCommentVNode()
+                                                            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('div', {
+                                                                class: 'vxe-context-menu--link-content',
+                                                                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
+                                    ]);
+                            }));
+                    })
+                    : [])
             ]);
         };
         $xeMenuPanel.renderVN = renderVN;

package/es/table/src/header.js

@@ -177,7 +177,10 @@ export default defineVxeComponent({
                 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/table.js

@@ -4,7 +4,7 @@ import XEUtils from 'xe-utils';
 import { initTpImg, getTpImg, isPx, isScale, hasClass, addClass, removeClass, getEventTargetNode, getPaddingTopBottomSize, setScrollTop, setScrollLeft, toCssUnit, hasControlKey } from '../../ui/src/dom';
 import { getLastZIndex, nextZIndex, hasChildrenList, getFuncText, isEnableConf, formatText, eqEmptyValue } from '../../ui/src/utils';
 import { VxeUI } from '../../ui';
-import { createInternalData, getRowUniqueId, clearTableAllStatus, getColumnList, toFilters, hasDeepKey, getRowkey, getRowid, rowToVisible, colToVisible, getCellValue, setCellValue, handleRowidOrRow, handleFieldOrColumn, toTreePathSeq, restoreScrollLocation, getRootColumn, getRefElem, getColReMinWidth, createHandleUpdateRowId, createHandleGetRowId, getCalcHeight, getCellRestHeight } from './util';
+import { createInternalData, getRowUniqueId, clearTableAllStatus, getColumnList, toFilters, hasDeepKey, getRowkey, getRowid, rowToVisible, colToVisible, getCellValue, setCellValue, handleRowidOrRow, handleFieldOrColumn, toTreePathSeq, restoreScrollLocation, getRootColumn, getRefElem, getColReMinWidth, createHandleUpdateRowId, createHandleGetRowId, getCalcHeight, getCellRestHeight, getLastChildColumn } from './util';
 import { getSlotVNs } from '../../ui/src/vn';
 import { moveRowAnimateToTb, clearRowAnimate, moveColAnimateToLr, clearColAnimate } from './anime';
 import { warnLog, errLog } from '../../ui/src/log';
@@ -315,6 +315,7 @@ export default defineVxeComponent({
         const refTableRightBody = ref();
         const refTableRightFooter = ref();
         const refTeleportWrapper = ref();
+        const refPopupWrapperElem = ref();
         const refLeftContainer = ref();
         const refRightContainer = ref();
         const refColResizeBar = ref();
@@ -1195,6 +1196,7 @@ export default defineVxeComponent({
             $xeTable.setMergeHeaderCells(merges);
         };
         const handleHeaderMerge = (merges) => {
+            const { showCustomHeader } = props;
             const { footerTableData } = reactData;
             const { mergeHeaderList, mergeHeaderMaps, fullColumnIdData } = internalData;
             if (merges) {
@@ -1219,6 +1221,10 @@ export default defineVxeComponent({
                     if (mergeRowIndex > -1 && mergeColumnIndex > -1 && (rowspan || colspan)) {
                         rowspan = XEUtils.toNumber(rowspan) || 1;
                         colspan = XEUtils.toNumber(colspan) || 1;
+                        if (!showCustomHeader && rowspan > 1) {
+                            errLog('vxe.error.notSupportProp', ['[table] show-custom-header=false', `rowspan=${rowspan}`, 'rowspan=1']);
+                            return;
+                        }
                         if (rowspan > 1 || colspan > 1) {
                             const row = footerTableData[mergeRowIndex];
                             const column = visibleColumn[mergeColumnIndex];
@@ -3849,6 +3855,10 @@ export default defineVxeComponent({
                     if ($xeTable.handleUpdateCustomColumn) {
                         $xeTable.handleUpdateCustomColumn();
                     }
+                    const columnOpts = computeColumnOpts.value;
+                    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(false, true, true);
                 });
@@ -8416,18 +8426,16 @@ export default defineVxeComponent({
                 const scrollbarXToTop = computeScrollbarXToTop.value;
                 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;
@@ -12082,7 +12090,7 @@ export default defineVxeComponent({
         const renderVN = () => {
             const { loading, stripe, showHeader, height, treeConfig, mouseConfig, showFooter, highlightCell, highlightHoverRow, highlightHoverColumn, editConfig, editRules } = props;
             const { isGroup, overflowX, overflowY, scrollXLoad, scrollYLoad, tableData, initStore, isRowGroupStatus, columnStore, filterStore, customStore, tooltipStore } = reactData;
-            const { teleportToWrapperElem } = internalData;
+            const { teleportToWrapperElem, popupToWrapperElem } = internalData;
             const { leftList, rightList } = columnStore;
             const loadingSlot = slots.loading;
             const tipSlots = {
@@ -12280,16 +12288,38 @@ export default defineVxeComponent({
                         ])
                     ])
                 ]),
-                /**
-                 * 筛选
-                 */
-                initStore.filter
-                    ? h(TableFilterPanelComponent, {
-                        key: 'tf',
-                        ref: refTableFilter,
-                        filterStore
-                    })
-                    : renderEmptyElement($xeTable),
+                h('div', {
+                    key: 'tpw'
+                }, [
+                    h(Teleport, {
+                        to: popupToWrapperElem,
+                        disabled: !($xeGGWrapper && popupToWrapperElem)
+                    }, [
+                        h('div', {
+                            ref: refPopupWrapperElem
+                        }, [
+                            /**
+                             * 筛选
+                             */
+                            initStore.filter
+                                ? h(TableFilterPanelComponent, {
+                                    key: 'tf',
+                                    ref: refTableFilter,
+                                    filterStore
+                                })
+                                : renderEmptyElement($xeTable),
+                            /**
+                             * 快捷菜单
+                             */
+                            isContentMenu
+                                ? h(TableMenuPanelComponent, {
+                                    key: 'tm',
+                                    ref: refTableMenu
+                                })
+                                : renderEmptyElement($xeTable)
+                        ])
+                    ])
+                ]),
                 /**
                  * 导入
                  */
@@ -12310,15 +12340,6 @@ export default defineVxeComponent({
                         storeData: reactData.exportStore
                     })
                     : renderEmptyElement($xeTable),
-                /**
-                 * 快捷菜单
-                 */
-                isContentMenu
-                    ? h(TableMenuPanelComponent, {
-                        key: 'tm',
-                        ref: refTableMenu
-                    })
-                    : renderEmptyElement($xeTable),
                 /**
                  * 提示相关
                  */
@@ -12605,6 +12626,13 @@ export default defineVxeComponent({
                     internalData.teleportToWrapperElem = classifyWrapperEl;
                 }
             }
+            if ($xeGGWrapper) {
+                const { refPopupContainerElem } = $xeGGWrapper.getRefMaps();
+                const popupContainerEl = refPopupContainerElem.value;
+                if (popupContainerEl) {
+                    internalData.popupToWrapperElem = popupContainerEl;
+                }
+            }
             if (columnOpts.drag || rowOpts.drag || customOpts.allowSort) {
                 initTpImg();
             }

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,
@@ -542,13 +543,27 @@ export function getRootColumn($xeTable, column) {
     }
     return column;
 }
+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,
     medium: 1,
     large: 0
 };
-const countTreeExpand = (prevRow, params) => {
+function countTreeExpand(prevRow, params) {
     let count = 1;
     if (!prevRow) {
         return count;
@@ -569,15 +584,15 @@ const countTreeExpand = (prevRow, params) => {
         }
     }
     return count;
-};
-export const getOffsetSize = ($xeTable) => {
+}
+export function getOffsetSize($xeTable) {
     const { computeSize } = $xeTable.getComputeMaps();
     const vSize = computeSize.value;
     if (vSize) {
         return lineOffsetSizes[vSize] || 0;
     }
     return 0;
-};
+}
 export function calcTreeLine(params, prevRow) {
     const { $table, row } = params;
     const tableProps = $table.props;

package/es/ui/index.js

@@ -1,6 +1,6 @@
 import { VxeUI } from '@vxe-ui/core';
 import { getFuncText } from './src/utils';
-export const version = "4.16.15";
+export const version = "4.16.17";
 VxeUI.version = version;
 VxeUI.tableVersion = version;
 VxeUI.setConfig({
@@ -93,9 +93,11 @@ VxeUI.setConfig({
         footerCellConfig: {
             height: 'unset'
         },
-        // menuConfig: {
-        //   visibleMethod () {}
-        // },
+        menuConfig: {
+            // visibleMethod () {},
+            // transfer: false,
+            destroyOnClose: true
+        },
         customConfig: {
             // enabled: false,
             allowVisible: true,
@@ -142,8 +144,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${"4.16.15"}`;
+const version = `table v${"4.16.17"}`;
 export const warnLog = log.create('warn', version);
 export const errLog = log.create('error', version);

package/lib/grid/src/grid.js

@@ -74,6 +74,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     const refForm = (0, _vue.ref)();
     const refToolbar = (0, _vue.ref)();
     const refPager = (0, _vue.ref)();
+    const refPopupContainerElem = (0, _vue.ref)();
     const refFormWrapper = (0, _vue.ref)();
     const refToolbarWrapper = (0, _vue.ref)();
     const refTopWrapper = (0, _vue.ref)();
@@ -253,7 +254,8 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       refTable,
       refForm,
       refToolbar,
-      refPager
+      refPager,
+      refPopupContainerElem
     };
     const computeMaps = {
       computeProxyOpts,
@@ -894,7 +896,9 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         class: 'vxe-grid--layout-aside-right-wrapper'
       }, asideRightSlot({})) : renderEmptyElement($xeGrid)]), (0, _vue.h)('div', {
         class: 'vxe-grid--layout-footer-wrapper'
-      }, renderChildLayout(footKeys))];
+      }, renderChildLayout(footKeys)), (0, _vue.h)('div', {
+        ref: refPopupContainerElem
+      })];
     };
     const tableCompEvents = {};
     _emits2.tableEmits.forEach(name => {