vxe-table 3.18.2 → 3.18.4

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/render/index.js

@@ -294,7 +294,7 @@ function nativeEditRender(h, renderOpts, params) {
     const { name } = renderOpts;
     const cellValue = isImmediateCell(renderOpts, params) ? getCellValue(row, column) : column.model.value;
     return [
-        h(name, {
+        h(`${name}`, {
             class: `vxe-default-${name}`,
             attrs: getNativeAttrs(renderOpts),
             domProps: {
@@ -374,7 +374,8 @@ function oldButtonEditRender(h, renderOpts, params) {
  * @deprecated
  */
 function oldButtonsEditRender(h, renderOpts, params) {
-    return renderOpts.children.map((childRenderOpts) => oldButtonEditRender(h, childRenderOpts, params)[0]);
+    const { children } = renderOpts;
+    return children ? children.map((childRenderOpts) => oldButtonEditRender(h, childRenderOpts, params)[0]) : [];
 }
 function renderNativeOptgroups(h, renderOpts, params, renderOptionsMethods) {
     const { optionGroups, optionGroupProps = {} } = renderOpts;
@@ -424,7 +425,7 @@ function nativeFilterRender(h, renderOpts, params) {
     const { name } = renderOpts;
     const attrs = getNativeAttrs(renderOpts);
     return column.filters.map((option, oIndex) => {
-        return h(name, {
+        return h(`${name}`, {
             key: oIndex,
             class: `vxe-default-${name}`,
             attrs,

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/src/methods.js

@@ -8647,11 +8647,20 @@ const Methods = {
         const rowDragOpts = $xeTable.computeRowDragOpts;
         const { isCrossTableDrag } = rowDragOpts;
         if (isCrossTableDrag && crossTableDragRowObj && !tableData.length) {
-            const { $oldTable } = crossTableDragRowObj;
-            if ($oldTable && $oldTable.xID !== $xeTable.xID) {
-                evnt.preventDefault();
-                crossTableDragRowObj.$newTable = $xeTable;
-                internalData.prevDragRow = null;
+            const { $oldTable, $newTable } = crossTableDragRowObj;
+            if ($oldTable) {
+                const oldTableReactData = $oldTable;
+                if ($oldTable.xID !== $xeTable.xID) {
+                    if ($newTable && $newTable.xID !== $xeTable.xID) {
+                        $newTable.hideCrossTableRowDropClearStatus();
+                    }
+                    evnt.preventDefault();
+                    $oldTable.hideCrossTableRowDropClearStatus();
+                    crossTableDragRowObj.$newTable = $xeTable;
+                    internalData.prevDragRow = null;
+                    reactData.dragTipText = oldTableReactData.dragTipText;
+                    showDropTip($xeTable, evnt, evnt.currentTarget, null, true, '');
+                }
             }
         }
     },
@@ -8885,6 +8894,9 @@ const Methods = {
                         crossTableDragRowObj.$newTable = null;
                     }
                     else if (!treeConfig || isCrossDrag) {
+                        if ($newTable && $newTable.xID !== $xeTable.xID) {
+                            $newTable.hideCrossTableRowDropClearStatus();
+                        }
                         $oldTable.hideCrossTableRowDropClearStatus();
                         oldTableReactData.isCrossDragRow = true;
                         reactData.dragTipText = oldTableReactData.dragTipText;

package/es/table/src/table.js

@@ -1889,9 +1889,11 @@ export default {
         const scrollbarXToTop = $xeTable.computeScrollbarXToTop;
         const scrollbarYToLeft = $xeTable.computeScrollbarYToLeft;
         const { isCrossTableDrag } = rowDragOpts;
-        const rwOns = {};
+        const tbOns = {
+            keydown: this.keydownEvent
+        };
         if (isCrossTableDrag && !tableData.length) {
-            rwOns.onDragover = $xeTable.handleCrossTableRowDragoverEmptyEvent;
+            tbOns.dragover = $xeTable.handleCrossTableRowDragoverEmptyEvent;
         }
         return h('div', {
             ref: 'refElem',
@@ -1929,9 +1931,7 @@ export default {
             attrs: {
                 spellcheck: false
             },
-            on: {
-                keydown: this.keydownEvent
-            }
+            on: tbOns
         }, [
             /**
              * 隐藏列
@@ -1959,8 +1959,7 @@ export default {
             ]),
             h('div', {
                 key: 'tw',
-                class: 'vxe-table--render-wrapper',
-                on: rwOns
+                class: 'vxe-table--render-wrapper'
             }, scrollbarXToTop
                 ? [
                     renderScrollX(h, $xeTable),

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);