vxe-table 3.14.1 → 3.14.3

package/lib/table/src/methods.js

@@ -21,6 +21,7 @@ const {
   interceptor,
   createEvent
 } = _ui.VxeUI;
+const browseObj = _xeUtils.default.browse();
 const supportMaxRow = 5e6;
 const customStorageKey = 'VXE_CUSTOM_STORE';
 const maxYHeight = 5e6;
@@ -623,11 +624,11 @@ function updateStyle($xeTable) {
   }
   if (xLeftCornerEl) {
     xLeftCornerEl.style.width = scrollbarXToTop ? `${osbWidth}px` : '';
-    xLeftCornerEl.style.display = scrollbarXToTop ? osbWidth && osbHeight ? 'block' : '' : '';
+    xLeftCornerEl.style.display = scrollbarXToTop ? overflowX && osbHeight ? 'block' : '' : '';
   }
   if (xRightCornerEl) {
     xRightCornerEl.style.width = scrollbarXToTop ? '' : `${osbWidth}px`;
-    xRightCornerEl.style.display = scrollbarXToTop ? '' : osbWidth && osbHeight ? 'block' : '';
+    xRightCornerEl.style.display = scrollbarXToTop ? '' : overflowX && osbHeight ? 'block' : '';
   }
   const scrollYVirtualEl = $xeTable.$refs.refScrollYVirtualElem;
   if (scrollYVirtualEl) {
@@ -638,7 +639,7 @@ function updateStyle($xeTable) {
   const yTopCornerEl = $xeTable.$refs.refScrollYTopCornerElem;
   if (yTopCornerEl) {
     yTopCornerEl.style.height = `${headerHeight}px`;
-    yTopCornerEl.style.display = headerHeight ? 'block' : '';
+    yTopCornerEl.style.display = overflowY && headerHeight ? 'block' : '';
   }
   const yWrapperEl = $xeTable.$refs.refScrollYWrapperElem;
   if (yWrapperEl) {
@@ -649,7 +650,7 @@ function updateStyle($xeTable) {
   if (yBottomCornerEl) {
     yBottomCornerEl.style.height = `${footerHeight}px`;
     yBottomCornerEl.style.top = `${headerHeight + bodyHeight}px`;
-    yBottomCornerEl.style.display = footerHeight ? 'block' : '';
+    yBottomCornerEl.style.display = overflowY && footerHeight ? 'block' : '';
   }
   const rowExpandEl = $xeTable.$refs.refRowExpandElem;
   if (rowExpandEl) {
@@ -763,7 +764,7 @@ function updateStyle($xeTable) {
         if (tableElem) {
           tableElem.style.width = tWidth ? `${tWidth}px` : '';
           // 兼容性处理
-          tableElem.style.paddingRight = osbWidth && fixedType && (_dom.browse['-moz'] || _dom.browse.safari) ? `${osbWidth}px` : '';
+          tableElem.style.paddingRight = osbWidth && fixedType && (browseObj['-moz'] || browseObj.safari) ? `${osbWidth}px` : '';
         }
         const emptyBlockElem = (0, _util.getRefElem)(elemStore[`${name}-${layout}-emptyBlock`]);
         if (emptyBlockElem) {
@@ -2083,7 +2084,7 @@ function hideDropTip($xeTable) {
  * @param {Event} evnt 事件
  * @param {Row} row 行对象
  */
-function handleTooltip($xeTable, evnt, tdEl, overflowElem, params) {
+function handleTooltip($xeTable, evnt, tdEl, overflowElem, tipElem, params) {
   const reactData = $xeTable;
   const tipOverEl = overflowElem || tdEl;
   if (!tipOverEl) {
@@ -2105,7 +2106,8 @@ function handleTooltip($xeTable, evnt, tdEl, overflowElem, params) {
   const customContent = contentMethod ? contentMethod(params) : null;
   const useCustom = contentMethod && !_xeUtils.default.eqNull(customContent);
   const content = useCustom ? customContent : _xeUtils.default.toString(column.type === 'html' ? tipOverEl.innerText : tipOverEl.textContent).trim();
-  if (content && (showAll || useCustom || tipOverEl.scrollWidth > tipOverEl.clientWidth)) {
+  const isOver = tipOverEl.scrollWidth > tipOverEl.clientWidth;
+  if (content && (showAll || useCustom || isOver)) {
     Object.assign(tooltipStore, {
       row,
       column,
@@ -2115,7 +2117,7 @@ function handleTooltip($xeTable, evnt, tdEl, overflowElem, params) {
     $xeTable.$nextTick(() => {
       const $tooltip = $xeTable.$refs.refTooltip;
       if ($tooltip && $tooltip.open) {
-        $tooltip.open(tipOverEl, (0, _utils.formatText)(content));
+        $tooltip.open(isOver ? tipOverEl : tipElem, (0, _utils.formatText)(content));
       }
     });
   }
@@ -5978,32 +5980,38 @@ const Methods = {
    */
   handleGlobalKeydownEvent(evnt) {
     const $xeTable = this;
+    const props = $xeTable;
     const internalData = $xeTable;
+    const reactData = $xeTable;
     const $xeGrid = $xeTable.$xeGrid;
     // 该行为只对当前激活的表格有效
-    if (this.isActivated) {
-      this.preventEvent(evnt, 'event.keydown', null, () => {
-        const {
-          afterFullData
-        } = internalData;
+    if (internalData.isActivated) {
+      $xeTable.preventEvent(evnt, 'event.keydown', null, () => {
         const {
-          filterStore,
-          isCtxMenu,
-          ctxMenuStore,
-          editStore,
-          editOpts,
-          editConfig,
           mouseConfig,
-          mouseOpts,
           keyboardConfig,
-          keyboardOpts,
           treeConfig,
-          treeOpts,
+          editConfig,
           highlightCurrentRow,
-          currentRow,
-          bodyCtxMenu,
-          rowOpts
-        } = this;
+          highlightCurrentColumn
+        } = props;
+        const {
+          ctxMenuStore,
+          editStore,
+          currentRow
+        } = reactData;
+        const {
+          afterFullData
+        } = internalData;
+        const isMenu = $xeTable.computeIsMenu;
+        const bodyMenu = $xeTable.computeBodyMenu;
+        const keyboardOpts = $xeTable.computeKeyboardOpts;
+        const mouseOpts = $xeTable.computeMouseOpts;
+        const editOpts = $xeTable.computeEditOpts;
+        const treeOpts = $xeTable.computeTreeOpts;
+        const menuList = $xeTable.computeMenuList;
+        const rowOpts = $xeTable.computeRowOpts;
+        const columnOpts = $xeTable.computeColumnOpts;
         const {
           selected,
           actived
@@ -6028,33 +6036,44 @@ const Methods = {
         const hasShiftKey = evnt.shiftKey;
         const hasAltKey = evnt.altKey;
         const operArrow = isLeftArrow || isUpArrow || isRightArrow || isDwArrow;
-        const operCtxMenu = isCtxMenu && ctxMenuStore.visible && (isEnter || isSpacebar || operArrow);
+        const operCtxMenu = isMenu && ctxMenuStore.visible && (isEnter || isSpacebar || operArrow);
         const isEditStatus = (0, _utils.isEnableConf)(editConfig) && actived.column && actived.row;
         const childrenField = treeOpts.children || treeOpts.childrenField;
         const beforeEditMethod = editOpts.beforeEditMethod || editOpts.activeMethod;
-        if (filterStore.visible) {
-          if (isEsc) {
-            this.closeFilter();
-          }
-          return;
-        }
         if (operCtxMenu) {
           // 如果配置了右键菜单; 支持方向键操作、回车
           evnt.preventDefault();
           if (ctxMenuStore.showChild && (0, _utils.hasChildrenList)(ctxMenuStore.selected)) {
-            this.moveCtxMenu(evnt, keyCode, ctxMenuStore, 'selectChild', 37, false, ctxMenuStore.selected.children);
+            $xeTable.moveCtxMenu(evnt, ctxMenuStore, 'selectChild', isLeftArrow, false, ctxMenuStore.selected.children);
           } else {
-            this.moveCtxMenu(evnt, keyCode, ctxMenuStore, 'selected', 39, true, this.ctxMenuList);
+            $xeTable.moveCtxMenu(evnt, ctxMenuStore, 'selected', isRightArrow, true, menuList);
+          }
+        } else if (keyboardConfig && mouseConfig && mouseOpts.area && $xeTable.handleKeyboardCellAreaEvent) {
+          $xeTable.handleKeyboardCellAreaEvent(evnt);
+        } else if (isEsc) {
+          // 如果按下了 Esc 键，关闭快捷菜单、筛选
+          if ($xeTable.closeMenu) {
+            $xeTable.closeMenu();
+          }
+          $xeTable.closeFilter();
+          if (keyboardConfig && keyboardOpts.isEsc) {
+            // 如果是激活编辑状态，则取消编辑
+            if (actived.row) {
+              const params = actived.args;
+              $xeTable.handleClearEdit(evnt);
+              // 如果配置了选中功能，则为选中状态
+              if (mouseOpts.selected) {
+                $xeTable.$nextTick(() => $xeTable.handleSelected(params, evnt));
+              }
+            }
           }
-        } else if (keyboardConfig && mouseConfig && mouseOpts.area && this.handleKeyboardCellAreaEvent) {
-          this.handleKeyboardCellAreaEvent(evnt);
         } else if (keyboardConfig && isSpacebar && keyboardOpts.isChecked && selected.row && selected.column && (selected.column.type === 'checkbox' || selected.column.type === 'radio')) {
           // 空格键支持选中复选框
           evnt.preventDefault();
           if (selected.column.type === 'checkbox') {
-            this.handleToggleCheckRowEvent(evnt, selected.args);
+            $xeTable.handleToggleCheckRowEvent(evnt, selected.args);
           } else {
-            this.triggerRadioRowEvent(evnt, selected.args);
+            $xeTable.triggerRadioRowEvent(evnt, selected.args);
           }
         } else if (isF2 && (0, _utils.isEnableConf)(editConfig)) {
           if (!isEditStatus) {
@@ -6062,12 +6081,12 @@ const Methods = {
             if (selected.row && selected.column) {
               evnt.stopPropagation();
               evnt.preventDefault();
-              this.handleEdit(selected.args, evnt);
+              $xeTable.handleEdit(selected.args, evnt);
             }
           }
         } else if (isContextMenu) {
           // 如果按下上下文键
-          internalData._keyCtx = selected.row && selected.column && bodyCtxMenu.length;
+          internalData._keyCtx = selected.row && selected.column && bodyMenu.length;
           clearTimeout(internalData.keyCtxTimeout);
           internalData.keyCtxTimeout = setTimeout(() => {
             internalData._keyCtx = false;
@@ -6083,10 +6102,10 @@ const Methods = {
             // 如果是激活编辑状态，则取消编辑
             if (actived.row) {
               const params = actived.args;
-              this.handleClearEdit(evnt);
+              $xeTable.handleClearEdit(evnt);
               // 如果配置了选中功能，则为选中状态
               if (mouseConfig && mouseOpts.selected) {
-                this.$nextTick(() => this.handleSelected(params, evnt));
+                $xeTable.$nextTick(() => $xeTable.handleSelected(params, evnt));
               }
             }
           } else {
@@ -6095,13 +6114,13 @@ const Methods = {
               const activeParams = selected.row ? selected.args : actived.args;
               if (hasShiftKey) {
                 if (keyboardOpts.enterToTab) {
-                  this.moveTabSelected(activeParams, hasShiftKey, evnt);
+                  $xeTable.moveTabSelected(activeParams, hasShiftKey, evnt);
                 } else {
-                  this.moveEnterSelected(activeParams, isLeftArrow, true, isRightArrow, false, evnt);
+                  $xeTable.moveEnterSelected(activeParams, isLeftArrow, true, isRightArrow, false, evnt);
                 }
               } else {
                 if (keyboardOpts.enterToTab) {
-                  this.moveTabSelected(activeParams, hasShiftKey, evnt);
+                  $xeTable.moveTabSelected(activeParams, hasShiftKey, evnt);
                 } else {
                   const activeRow = selected.row || actived.row;
                   const activeColumn = selected.column || actived.column;
@@ -6133,7 +6152,7 @@ const Methods = {
                         return;
                       }
                     }
-                    this.moveEnterSelected(activeParams, isLeftArrow, false, isRightArrow, true, evnt);
+                    $xeTable.moveEnterSelected(activeParams, isLeftArrow, false, isRightArrow, true, evnt);
                     if (enterMethod) {
                       enterMethod(etrParams);
                     }
@@ -6147,26 +6166,37 @@ const Methods = {
                 evnt.preventDefault();
                 const targetRow = childrens[0];
                 const params = {
-                  $table: this,
-                  row: targetRow
+                  $table: $xeTable,
+                  row: targetRow,
+                  rowIndex: $xeTable.getRowIndex(targetRow),
+                  $rowIndex: $xeTable.getVMRowIndex(targetRow)
                 };
-                this.setTreeExpand(currentRow, true).then(() => this.scrollToRow(targetRow)).then(() => this.triggerCurrentRowEvent(evnt, params));
+                $xeTable.setTreeExpand(currentRow, true).then(() => $xeTable.scrollToRow(targetRow)).then(() => $xeTable.triggerCurrentRowEvent(evnt, params));
               }
             }
           }
         } else if (operArrow && keyboardConfig && keyboardOpts.isArrow) {
           if (!isEditStatus) {
             // 如果按下了方向键
-            if (selected.row && selected.column) {
+            if (mouseOpts.selected && selected.row && selected.column) {
               $xeTable.moveArrowSelected(selected.args, isLeftArrow, isUpArrow, isRightArrow, isDwArrow, evnt);
+            } else {
+              // 当前行按键上下移动
+              if ((isUpArrow || isDwArrow) && (rowOpts.isCurrent || highlightCurrentRow)) {
+                $xeTable.moveCurrentRow(isUpArrow, isDwArrow, evnt);
+              }
+              // 当前行按键左右移动
+              if ((isLeftArrow || isRightArrow) && (columnOpts.isCurrent || highlightCurrentColumn)) {
+                $xeTable.moveCurrentColumn(isLeftArrow, isRightArrow, evnt);
+              }
             }
           }
         } else if (isTab && keyboardConfig && keyboardOpts.isTab) {
           // 如果按下了 Tab 键切换
           if (selected.row || selected.column) {
-            this.moveTabSelected(selected.args, hasShiftKey, evnt);
+            $xeTable.moveTabSelected(selected.args, hasShiftKey, evnt);
           } else if (actived.row || actived.column) {
-            this.moveTabSelected(actived.args, hasShiftKey, evnt);
+            $xeTable.moveTabSelected(actived.args, hasShiftKey, evnt);
           }
         } else if (keyboardConfig && keyboardOpts.isDel && hasDeleteKey && (0, _utils.isEnableConf)(editConfig) && (selected.row || selected.column)) {
           // 如果是删除键
@@ -6176,10 +6206,10 @@ const Methods = {
             } = keyboardOpts;
             const params = {
               row: selected.row,
-              rowIndex: this.getRowIndex(selected.row),
+              rowIndex: $xeTable.getRowIndex(selected.row),
               column: selected.column,
-              columnIndex: this.getColumnIndex(selected.column),
-              $table: this,
+              columnIndex: $xeTable.getColumnIndex(selected.column),
+              $table: $xeTable,
               $grid: $xeGrid
             };
             // 是否被禁用
@@ -6190,8 +6220,8 @@ const Methods = {
                 (0, _util.setCellValue)(selected.row, selected.column, null);
               }
               // 如果按下 del 键，更新表尾数据
-              this.updateFooter();
-              this.emitEvent('cell-delete-value', params, evnt);
+              $xeTable.updateFooter();
+              $xeTable.dispatchEvent('cell-delete-value', params, evnt);
             }
           }
         } else if (hasBackspaceKey && keyboardConfig && keyboardOpts.isBack && (0, _utils.isEnableConf)(editConfig) && (selected.row || selected.column)) {
@@ -6204,10 +6234,10 @@ const Methods = {
             if (keyboardOpts.isDel && (0, _utils.isEnableConf)(editConfig) && (selected.row || selected.column)) {
               const params = {
                 row: selected.row,
-                rowIndex: this.getRowIndex(selected.row),
+                rowIndex: $xeTable.getRowIndex(selected.row),
                 column: selected.column,
-                columnIndex: this.getColumnIndex(selected.column),
-                $table: this,
+                columnIndex: $xeTable.getColumnIndex(selected.column),
+                $table: $xeTable,
                 $grid: $xeGrid
               };
               // 是否被禁用
@@ -6219,9 +6249,9 @@ const Methods = {
                   if (editMode !== 'insert') {
                     (0, _util.setCellValue)(selected.row, selected.column, null);
                   }
-                  this.handleEdit(selected.args, evnt);
+                  $xeTable.handleEdit(selected.args, evnt);
                 }
-                this.emitEvent('cell-backspace-value', params, evnt);
+                $xeTable.dispatchEvent('cell-backspace-value', params, evnt);
               }
             }
           }
@@ -6229,19 +6259,19 @@ const Methods = {
           // 如果树形表格回退键关闭当前行返回父节点
           const {
             parent: parentRow
-          } = _xeUtils.default.findTree(this.afterTreeFullData, item => item === currentRow, {
+          } = _xeUtils.default.findTree(internalData.afterTreeFullData, item => item === currentRow, {
             children: childrenField
           });
           if (parentRow) {
             evnt.preventDefault();
             const params = {
               row: parentRow,
-              rowIndex: this.getRowIndex(parentRow),
-              $rowIndex: this.getVMRowIndex(parentRow),
-              $table: this,
+              rowIndex: $xeTable.getRowIndex(parentRow),
+              $rowIndex: $xeTable.getVMRowIndex(parentRow),
+              $table: $xeTable,
               $grid: $xeGrid
             };
-            this.setTreeExpand(parentRow, false).then(() => this.scrollToRow(parentRow)).then(() => this.triggerCurrentRowEvent(evnt, params));
+            $xeTable.setTreeExpand(parentRow, false).then(() => $xeTable.scrollToRow(parentRow)).then(() => $xeTable.triggerCurrentRowEvent(evnt, params));
           }
         } else if (keyboardConfig && keyboardOpts.isEdit && !hasCtrlKey && !hasMetaKey && (isSpacebar || keyCode >= 48 && keyCode <= 57 || keyCode >= 65 && keyCode <= 90 || keyCode >= 96 && keyCode <= 111 || keyCode >= 186 && keyCode <= 192 || keyCode >= 219 && keyCode <= 222)) {
           const {
@@ -6256,10 +6286,10 @@ const Methods = {
             const beforeEditMethod = editOpts.beforeEditMethod || editOpts.activeMethod;
             const params = {
               row: selected.row,
-              rowIndex: this.getRowIndex(selected.row),
+              rowIndex: $xeTable.getRowIndex(selected.row),
               column: selected.column,
-              columnIndex: this.getColumnIndex(selected.column),
-              $table: this,
+              columnIndex: $xeTable.getColumnIndex(selected.column),
+              $table: $xeTable,
               $grid: $xeGrid
             };
             if (!beforeEditMethod || beforeEditMethod(params)) {
@@ -6267,12 +6297,12 @@ const Methods = {
                 editMethod(params);
               } else {
                 (0, _util.setCellValue)(selected.row, selected.column, null);
-                this.handleEdit(selected.args, evnt);
+                $xeTable.handleEdit(selected.args, evnt);
               }
             }
           }
         }
-        this.emitEvent('keydown', {}, evnt);
+        $xeTable.dispatchEvent('keydown', {}, evnt);
       });
     }
   },
@@ -6417,7 +6447,7 @@ const Methods = {
       return;
     }
     if (tooltipStore.column !== column || !tooltipStore.visible) {
-      handleTooltip($xeTable, evnt, thEl, thEl.querySelector('.vxe-cell--title') || cellEl, params);
+      handleTooltip($xeTable, evnt, thEl, thEl.querySelector('.vxe-cell--wrapper'), thEl.querySelector('.vxe-cell--title') || cellEl, params);
     }
   },
   /**
@@ -6458,7 +6488,7 @@ const Methods = {
       }
     }
     if (tooltipStore.column !== column || tooltipStore.row !== row || !tooltipStore.visible) {
-      handleTooltip($xeTable, evnt, tdEl, tdEl.querySelector('.vxe-cell--label') || tdEl.querySelector('.vxe-cell--wrapper'), params);
+      handleTooltip($xeTable, evnt, tdEl, tdEl.querySelector('.vxe-cell--wrapper'), tdEl.querySelector('.vxe-cell--label') || tdEl.querySelector('.vxe-cell--wrapper'), params);
     }
   },
   /**
@@ -6476,7 +6506,7 @@ const Methods = {
     const tdEl = evnt.currentTarget;
     handleTargetEnterEvent($xeTable, tooltipStore.column !== column || !!tooltipStore.row);
     if (tooltipStore.column !== column || !tooltipStore.visible) {
-      handleTooltip($xeTable, evnt, tdEl, tdEl.querySelector('.vxe-cell--label') || tdEl.querySelector('.vxe-cell--wrapper'), params);
+      handleTooltip($xeTable, evnt, tdEl, tdEl.querySelector('.vxe-cell--wrapper'), tdEl.querySelector('.vxe-cell--label') || tdEl.querySelector('.vxe-cell--wrapper'), params);
     }
   },
   openTooltip(target, content) {
@@ -10176,6 +10206,7 @@ const Methods = {
       elemStore,
       fullColumnIdData
     } = internalData;
+    const mouseOpts = $xeTable.computeMouseOpts;
     const tableBody = $xeTable.$refs.refTableBody;
     const tableBodyElem = tableBody ? tableBody.$el : null;
     if (tableBodyElem) {
@@ -10234,6 +10265,9 @@ const Methods = {
       if (scrollXSpaceEl) {
         scrollXSpaceEl.style.width = `${ySpaceWidth}px`;
       }
+      if (isScrollXBig && mouseOpts.area) {
+        (0, _log.errLog)('vxe.error.notProp', ['mouse-config.area']);
+      }
       $xeTable.$nextTick(() => {
         updateStyle($xeTable);
       });
@@ -10269,6 +10303,7 @@ const Methods = {
     const {
       startIndex
     } = scrollYStore;
+    const mouseOpts = $xeTable.computeMouseOpts;
     const expandOpts = $xeTable.computeExpandOpts;
     const rowOpts = $xeTable.computeRowOpts;
     const cellOpts = $xeTable.computeCellOpts;
@@ -10349,6 +10384,9 @@ const Methods = {
     reactData.scrollYTop = scrollYTop;
     reactData.scrollYHeight = scrollYHeight;
     reactData.isScrollYBig = isScrollYBig;
+    if (isScrollYBig && mouseOpts.area) {
+      (0, _log.errLog)('vxe.error.notProp', ['mouse-config.area']);
+    }
     return $xeTable.$nextTick().then(() => {
       updateStyle($xeTable);
     });