vxe-table 3.18.2 → 3.18.3

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

@@ -10,13 +10,15 @@ export default {
          * 关闭快捷菜单
          */
         _closeMenu() {
-            Object.assign(this.ctxMenuStore, {
+            const $xeTable = this;
+            const reactData = $xeTable;
+            Object.assign(reactData.ctxMenuStore, {
                 visible: false,
                 selected: null,
                 selectChild: null,
                 showChild: false
             });
-            return this.$nextTick();
+            return $xeTable.$nextTick();
         },
         // 处理菜单的移动
         moveCtxMenu(evnt, ctxMenuStore, property, hasOper, operRest, menuList) {
@@ -61,26 +63,35 @@ export default {
             const $xeTable = this;
             const $xeGrid = $xeTable.$xeGrid;
             const $xeGantt = $xeTable.$xeGantt;
+            const props = $xeTable;
+            const reactData = $xeTable;
             const internalData = $xeTable;
-            const { $refs, tId, editStore, menuConfig, contextMenu, ctxMenuStore, ctxMenuOpts, mouseConfig, mouseOpts } = this;
-            const { selected } = editStore;
+            const { xID } = $xeTable;
+            const { mouseConfig, menuConfig } = props;
+            const { editStore, ctxMenuStore } = reactData;
+            const { visibleColumn } = internalData;
             const tableFilter = $xeTable.$refs.refTableFilter;
+            const tableMenu = $xeTable.$refs.refTableMenu;
+            const mouseOpts = $xeTable.computeMouseOpts;
+            const menuOpts = $xeTable.computeMenuOpts;
+            const el = $xeTable.$refs.refElem;
+            const { selected } = editStore;
             const layoutList = ['header', 'body', 'footer'];
-            if (isEnableConf(menuConfig) || contextMenu) {
-                if (ctxMenuStore.visible && $refs.refTableMenu && getEventTargetNode(evnt, $refs.refTableMenu.$el).flag) {
+            if (isEnableConf(menuConfig)) {
+                if (ctxMenuStore.visible && tableMenu && getEventTargetNode(evnt, tableMenu.$el).flag) {
                     evnt.preventDefault();
                     return;
                 }
                 if (internalData._keyCtx) {
                     const type = 'body';
-                    const params = { type, $table: $xeTable, $grid: $xeGrid, $gantt: $xeGantt, keyboard: true, columns: this.visibleColumn.slice(0), $event: evnt };
+                    const params = { type, $table: $xeTable, $grid: $xeGrid, $gantt: $xeGantt, keyboard: true, columns: visibleColumn.slice(0), $event: evnt };
                     // 如果开启单元格区域
                     if (mouseConfig && mouseOpts.area) {
-                        const activeArea = this.getActiveCellArea();
+                        const activeArea = $xeTable.getActiveCellArea();
                         if (activeArea && activeArea.row && activeArea.column) {
                             params.row = activeArea.row;
                             params.column = activeArea.column;
-                            this.handleOpenMenuEvent(evnt, type, params);
+                            $xeTable.handleOpenMenuEvent(evnt, type, params);
                             return;
                         }
                     }
@@ -89,7 +100,7 @@ export default {
                         if (selected.row && selected.column) {
                             params.row = selected.row;
                             params.column = selected.column;
-                            this.handleOpenMenuEvent(evnt, type, params);
+                            $xeTable.handleOpenMenuEvent(evnt, type, params);
                             return;
                         }
                     }
@@ -97,11 +108,11 @@ export default {
                 // 分别匹配表尾、内容、表尾的快捷菜单
                 for (let index = 0; index < layoutList.length; index++) {
                     const layout = layoutList[index];
-                    const columnTargetNode = getEventTargetNode(evnt, this.$el, `vxe-${layout}--column`, (target) => {
+                    const columnTargetNode = getEventTargetNode(evnt, el, `vxe-${layout}--column`, (target) => {
                         // target=td|th，直接向上找 table 去匹配即可
-                        return target.parentNode.parentNode.parentNode.getAttribute('xid') === tId;
+                        return target.parentNode.parentNode.parentNode.getAttribute('xid') === xID;
                     });
-                    const params = { type: layout, $table: $xeTable, $grid: $xeGrid, $gantt: $xeGantt, columns: this.visibleColumn.slice(0), $event: evnt };
+                    const params = { type: layout, $table: $xeTable, $grid: $xeGrid, $gantt: $xeGantt, columns: visibleColumn.slice(0), $event: evnt };
                     if (columnTargetNode.flag) {
                         const cell = columnTargetNode.targetElem;
                         const columnNodeRest = $xeTable.getColumnNode(cell);
@@ -120,9 +131,9 @@ export default {
                             }
                         }
                         const eventType = `${typePrefix}cell-menu`;
-                        this.handleOpenMenuEvent(evnt, layout, params);
+                        $xeTable.handleOpenMenuEvent(evnt, layout, params);
                         // 在 v4 中废弃事件 cell-context-menu、header-cell-context-menu、footer-cell-context-menu
-                        if (this.$listeners[`${typePrefix}cell-context-menu`]) {
+                        if ($xeTable.$listeners[`${typePrefix}cell-context-menu`]) {
                             warnLog('vxe.error.delEvent', [`${typePrefix}cell-context-menu`, `${typePrefix}cell-menu`]);
                             $xeTable.dispatchEvent(`${typePrefix}cell-context-menu`, params, evnt);
                         }
@@ -131,59 +142,65 @@ export default {
                         }
                         return;
                     }
-                    else if (getEventTargetNode(evnt, this.$el, `vxe-table--${layout}-wrapper`, target => target.getAttribute('xid') === tId).flag) {
-                        if (ctxMenuOpts.trigger === 'cell') {
+                    else if (getEventTargetNode(evnt, $xeTable.$el, `vxe-table--${layout}-wrapper`, target => target.getAttribute('xid') === xID).flag) {
+                        if (menuOpts.trigger === 'cell') {
                             evnt.preventDefault();
                         }
                         else {
-                            this.handleOpenMenuEvent(evnt, layout, params);
+                            $xeTable.handleOpenMenuEvent(evnt, layout, params);
                         }
                         return;
                     }
                 }
             }
             if (tableFilter && !getEventTargetNode(evnt, tableFilter.$el).flag) {
-                this.closeFilter();
+                $xeTable.closeFilter();
             }
-            this.closeMenu();
+            $xeTable.closeMenu();
         },
         /**
          * 显示快捷菜单
          */
         handleOpenMenuEvent(evnt, type, params) {
-            const { isCtxMenu, ctxMenuStore, ctxMenuOpts } = this;
-            const config = ctxMenuOpts[type];
-            const visibleMethod = ctxMenuOpts.visibleMethod;
+            const $xeTable = this;
+            const reactData = $xeTable;
+            const internalData = $xeTable;
+            const { ctxMenuStore } = reactData;
+            const isMenu = $xeTable.computeIsMenu;
+            const menuOpts = $xeTable.computeMenuOpts;
+            const config = menuOpts[type];
+            const visibleMethod = menuOpts.visibleMethod;
             if (config) {
                 const { options, disabled } = config;
                 if (disabled) {
                     evnt.preventDefault();
                 }
-                else if (isCtxMenu && options && options.length) {
+                else if (isMenu && options && options.length) {
                     params.options = options;
-                    this.preventEvent(evnt, 'event.showMenu', params, () => {
+                    $xeTable.preventEvent(evnt, 'event.showMenu', params, () => {
                         if (!visibleMethod || visibleMethod(params)) {
                             evnt.preventDefault();
-                            this.updateZindex();
+                            $xeTable.updateZindex();
                             const { scrollTop, scrollLeft, visibleHeight, visibleWidth } = getDomNode();
                             let top = evnt.clientY + scrollTop;
                             let left = evnt.clientX + scrollLeft;
                             const handleVisible = () => {
+                                internalData._currMenuParams = params;
                                 Object.assign(ctxMenuStore, {
-                                    args: params,
                                     visible: true,
                                     list: options,
                                     selected: null,
                                     selectChild: null,
                                     showChild: false,
                                     style: {
-                                        zIndex: this.tZindex,
+                                        zIndex: internalData.tZindex,
                                         top: `${top}px`,
                                         left: `${left}px`
                                     }
                                 });
-                                this.$nextTick(() => {
-                                    const ctxElem = this.$refs.refTableMenu.$el;
+                                $xeTable.$nextTick(() => {
+                                    const tableMenu = $xeTable.$refs.refTableMenu;
+                                    const ctxElem = tableMenu.$el;
                                     const clientHeight = ctxElem.clientHeight;
                                     const clientWidth = ctxElem.clientWidth;
                                     const { boundingTop, boundingLeft } = getAbsolutePos(ctxElem);
@@ -199,11 +216,13 @@ export default {
                             };
                             const { keyboard, row, column } = params;
                             if (keyboard && row && column) {
-                                this.scrollToRow(row, column).then(() => {
-                                    const cell = this.getCellElement(row, column);
-                                    const { boundingTop, boundingLeft } = getAbsolutePos(cell);
-                                    top = boundingTop + scrollTop + Math.floor(cell.offsetHeight / 2);
-                                    left = boundingLeft + scrollLeft + Math.floor(cell.offsetWidth / 2);
+                                $xeTable.scrollToRow(row, column).then(() => {
+                                    const cell = $xeTable.getCellElement(row, column);
+                                    if (cell) {
+                                        const { boundingTop, boundingLeft } = getAbsolutePos(cell);
+                                        top = boundingTop + scrollTop + Math.floor(cell.offsetHeight / 2);
+                                        left = boundingLeft + scrollLeft + Math.floor(cell.offsetWidth / 2);
+                                    }
                                     handleVisible();
                                 });
                             }
@@ -212,16 +231,18 @@ export default {
                             }
                         }
                         else {
-                            this.closeMenu();
+                            $xeTable.closeMenu();
                         }
                     });
                 }
             }
-            this.closeFilter();
+            $xeTable.closeFilter();
         },
         ctxMenuMouseoverEvent(evnt, item, child) {
+            const $xeTable = this;
+            const reactData = $xeTable;
             const menuElem = evnt.currentTarget;
-            const ctxMenuStore = this.ctxMenuStore;
+            const { ctxMenuStore } = reactData;
             evnt.preventDefault();
             evnt.stopPropagation();
             ctxMenuStore.selected = item;
@@ -229,7 +250,7 @@ export default {
             if (!child) {
                 ctxMenuStore.showChild = hasChildrenList(item);
                 if (ctxMenuStore.showChild) {
-                    this.$nextTick(() => {
+                    $xeTable.$nextTick(() => {
                         const childWrapperElem = menuElem.nextElementSibling;
                         if (childWrapperElem) {
                             const { boundingTop, boundingLeft, visibleHeight, visibleWidth } = getAbsolutePos(menuElem);
@@ -259,7 +280,9 @@ export default {
             }
         },
         ctxMenuMouseoutEvent(evnt, item) {
-            const ctxMenuStore = this.ctxMenuStore;
+            const $xeTable = this;
+            const reactData = $xeTable;
+            const { ctxMenuStore } = reactData;
             if (!item.children) {
                 ctxMenuStore.selected = null;
             }
@@ -272,22 +295,23 @@ export default {
             const $xeTable = this;
             const $xeGrid = $xeTable.$xeGrid;
             const $xeGantt = $xeTable.$xeGantt;
+            const internalData = $xeTable;
             // 如果一级菜单有配置 code 则允许点击，否则不能点击
             if (!menu.disabled && (menu.code || !menu.children || !menu.children.length)) {
                 const gMenuOpts = menus.get(menu.code);
-                const params = Object.assign({ menu, $table: $xeTable, $grid: $xeGrid, $gantt: $xeGantt, $event: evnt }, this.ctxMenuStore.args);
+                const params = Object.assign({}, internalData._currMenuParams, { menu, $table: $xeTable, $grid: $xeGrid, $gantt: $xeGantt, $event: evnt });
                 if (gMenuOpts && gMenuOpts.menuMethod) {
                     gMenuOpts.menuMethod(params, evnt);
                 }
                 // 在 v4 中废弃事件 context-menu-click
-                if (this.$listeners['context-menu-click']) {
+                if ($xeTable.$listeners['context-menu-click']) {
                     warnLog('vxe.error.delEvent', ['context-menu-click', 'menu-click']);
                     $xeTable.dispatchEvent('context-menu-click', params, evnt);
                 }
                 else {
                     $xeTable.dispatchEvent('menu-click', params, evnt);
                 }
-                this.closeMenu();
+                $xeTable.closeMenu();
             }
         }
     }

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

@@ -1,6 +1,6 @@
 import { VxeUI } from '../../../ui';
 import { getFuncText } from '../../../ui/src/utils';
-const { getIcon } = VxeUI;
+const { getIcon, renderEmptyElement } = VxeUI;
 export default {
     name: 'VxeTableMenuPanel',
     props: {
@@ -18,15 +18,17 @@ export default {
     },
     render(h) {
         const $xeTable = this.$parent;
-        const { _e, ctxMenuOpts, ctxMenuStore } = this;
+        const tableReactData = $xeTable;
+        const { ctxMenuStore } = tableReactData;
+        const menuOpts = $xeTable.computeMenuOpts;
         return h('div', {
-            class: ['vxe-table--context-menu-wrapper', ctxMenuOpts.className, {
+            class: ['vxe-table--context-menu-wrapper', menuOpts.className, {
                     'is--visible': ctxMenuStore.visible
                 }],
             style: ctxMenuStore.style
         }, ctxMenuStore.list.map((options, gIndex) => {
             return options.every((item) => item.visible === false)
-                ? _e()
+                ? renderEmptyElement($xeTable)
                 : h('ul', {
                     class: 'vxe-context-menu--option-wrapper',
                     key: gIndex
@@ -64,7 +66,7 @@ export default {
                                     h('i', {
                                         class: prefixOpts.icon || item.prefixIcon
                                     }),
-                                    prefixOpts.content ? h('span', {}, `${prefixOpts.content}`) : _e()
+                                    prefixOpts.content ? h('span', {}, `${prefixOpts.content}`) : renderEmptyElement($xeTable)
                                 ]),
                                 h('span', {
                                     class: 'vxe-context-menu--link-content',
@@ -78,7 +80,7 @@ export default {
                                     h('i', {
                                         class: (suffixOpts.icon || item.suffixIcon) || (hasChildMenus ? getIcon().TABLE_MENU_OPTIONS : '')
                                     }),
-                                    suffixOpts.content ? h('span', `${suffixOpts.content}`) : _e()
+                                    suffixOpts.content ? h('span', `${suffixOpts.content}`) : renderEmptyElement($xeTable)
                                 ])
                             ]),
                             hasChildMenus
@@ -119,7 +121,7 @@ export default {
                                                     h('i', {
                                                         class: childPrefixOpts.icon || child.prefixIcon
                                                     }),
-                                                    childPrefixOpts.content ? h('span', `${childPrefixOpts.content}`) : _e()
+                                                    childPrefixOpts.content ? h('span', `${childPrefixOpts.content}`) : renderEmptyElement($xeTable)
                                                 ]),
                                                 h('span', {
                                                     class: 'vxe-context-menu--link-content',
@@ -133,7 +135,7 @@ export default {
                                                     h('i', {
                                                         class: childSuffixOpts.icon
                                                     }),
-                                                    childSuffixOpts.content ? h('span', `${childSuffixOpts.content}`) : _e()
+                                                    childSuffixOpts.content ? h('span', `${childSuffixOpts.content}`) : renderEmptyElement($xeTable)
                                                 ])
                                             ])
                                         ]);

package/es/table/src/body.js

@@ -148,15 +148,14 @@ function renderTdColumn(h, $xeTable, seq, rowid, fixedType, isOptimizeMode, rowL
     // hover 进入事件
     if (showTitle || showTooltip || showAllTip || tooltipConfig) {
         tdOns.mouseenter = (evnt) => {
-            if (isVMScrollProcess($xeTable)) {
-                return;
-            }
-            if (showTitle) {
-                updateCellTitle(evnt.currentTarget, column);
-            }
-            else if (showTooltip || showAllTip) {
-                // 如果配置了显示 tooltip
-                $xeTable.triggerBodyTooltipEvent(evnt, cellParams);
+            if (!isVMScrollProcess($xeTable)) {
+                if (showTitle) {
+                    updateCellTitle(evnt.currentTarget, column);
+                }
+                else if (showTooltip || showAllTip) {
+                    // 如果配置了显示 tooltip
+                    $xeTable.triggerBodyTooltipEvent(evnt, cellParams);
+                }
             }
             $xeTable.dispatchEvent('cell-mouseenter', Object.assign({ cell: evnt.currentTarget }, cellParams), evnt);
         };
@@ -164,11 +163,10 @@ function renderTdColumn(h, $xeTable, seq, rowid, fixedType, isOptimizeMode, rowL
     // hover 退出事件
     if (showTooltip || showAllTip || tooltipConfig) {
         tdOns.mouseleave = (evnt) => {
-            if (isVMScrollProcess($xeTable)) {
-                return;
-            }
-            if (showTooltip || showAllTip) {
-                $xeTable.handleTargetLeaveEvent(evnt);
+            if (!isVMScrollProcess($xeTable)) {
+                if (showTooltip || showAllTip) {
+                    $xeTable.handleTargetLeaveEvent(evnt);
+                }
             }
             $xeTable.dispatchEvent('cell-mouseleave', Object.assign({ cell: evnt.currentTarget }, cellParams), evnt);
         };

package/es/table/style.css

@@ -2394,10 +2394,6 @@
 .vxe-header--column .vxe-cell-title-suffix-icon {
   padding: 0.2em;
 }
-.vxe-header--column .vxe-cell-title-prefix-icon,
-.vxe-header--column .vxe-cell-title-suffix-icon {
-  cursor: help;
-}
 .vxe-header--column .vxe-cell-title-prefix-icon.theme--primary,
 .vxe-header--column .vxe-cell-title-suffix-icon.theme--primary {
   color: var(--vxe-ui-font-primary-color);