vxe-table 4.11.1 → 4.11.3

package/lib/table/src/table.js

@@ -3793,7 +3793,12 @@ var _default = exports.default = (0, _vue.defineComponent)({
       }
       return multiple;
     };
-    const wheelScrollTo = (diffNum, cb) => {
+    const wheelScrollLeftTo = (scrollLeft, cb) => {
+      requestAnimationFrame(() => {
+        cb(scrollLeft);
+      });
+    };
+    const wheelScrollTopTo = (diffNum, cb) => {
       const duration = Math.abs(diffNum);
       const startTime = performance.now();
       let countTop = 0;
@@ -10033,6 +10038,9 @@ var _default = exports.default = (0, _vue.defineComponent)({
           scrollRenderType,
           inFooterScroll
         } = internalData;
+        if (inWheelScroll || inVirtualScroll || inHeaderScroll || inFooterScroll) {
+          return;
+        }
         const xHandleEl = refScrollXHandleElem.value;
         const yHandleEl = refScrollYHandleElem.value;
         const leftScrollElem = (0, _util.getRefElem)(elemStore['left-body-scroll']);
@@ -10041,9 +10049,6 @@ var _default = exports.default = (0, _vue.defineComponent)({
         const headerScrollElem = (0, _util.getRefElem)(elemStore['main-header-scroll']);
         const footerScrollElem = (0, _util.getRefElem)(elemStore['main-footer-scroll']);
         const rowExpandEl = refRowExpandElem.value;
-        if (inWheelScroll || inVirtualScroll || inHeaderScroll || inFooterScroll) {
-          return;
-        }
         if (intoRunScroll) {
           return;
         }
@@ -10117,14 +10122,14 @@ var _default = exports.default = (0, _vue.defineComponent)({
           inBodyScroll,
           inFooterScroll
         } = internalData;
+        if (inWheelScroll || inVirtualScroll || inBodyScroll || inFooterScroll) {
+          return;
+        }
         const yHandleEl = refScrollYHandleElem.value;
         const xHandleEl = refScrollXHandleElem.value;
         const bodyScrollElem = (0, _util.getRefElem)(elemStore['main-body-scroll']);
         const headerScrollElem = (0, _util.getRefElem)(elemStore['main-header-scroll']);
         const footerScrollElem = (0, _util.getRefElem)(elemStore['main-footer-scroll']);
-        if (inWheelScroll || inVirtualScroll || inBodyScroll || inFooterScroll) {
-          return;
-        }
         if (intoRunScroll) {
           return;
         }
@@ -10165,14 +10170,14 @@ var _default = exports.default = (0, _vue.defineComponent)({
           inHeaderScroll,
           inBodyScroll
         } = internalData;
+        if (inWheelScroll || inVirtualScroll || inHeaderScroll || inBodyScroll) {
+          return;
+        }
         const yHandleEl = refScrollYHandleElem.value;
         const xHandleEl = refScrollXHandleElem.value;
         const bodyScrollElem = (0, _util.getRefElem)(elemStore['main-body-scroll']);
         const headerScrollElem = (0, _util.getRefElem)(elemStore['main-header-scroll']);
         const footerScrollElem = (0, _util.getRefElem)(elemStore['main-footer-scroll']);
-        if (inWheelScroll || inVirtualScroll || inHeaderScroll || inBodyScroll) {
-          return;
-        }
         if (intoRunScroll) {
           return;
         }
@@ -10214,8 +10219,14 @@ var _default = exports.default = (0, _vue.defineComponent)({
           highlightHoverRow
         } = _props.default;
         const {
+          scrollXLoad,
           scrollYLoad
         } = reactData;
+        const leftFixedWidth = computeLeftFixedWidth.value;
+        const rightFixedWidth = computeRightFixedWidth.value;
+        if (!(scrollYLoad || leftFixedWidth || rightFixedWidth)) {
+          return;
+        }
         const {
           elemStore,
           lastScrollTop,
@@ -10225,7 +10236,9 @@ var _default = exports.default = (0, _vue.defineComponent)({
         const xHandleEl = refScrollXHandleElem.value;
         const yHandleEl = refScrollYHandleElem.value;
         const leftScrollElem = (0, _util.getRefElem)(elemStore['left-body-scroll']);
+        const headerScrollElem = (0, _util.getRefElem)(elemStore['main-header-scroll']);
         const bodyScrollElem = (0, _util.getRefElem)(elemStore['main-body-scroll']);
+        const footerScrollElem = (0, _util.getRefElem)(elemStore['main-footer-scroll']);
         const rightScrollElem = (0, _util.getRefElem)(elemStore['right-body-scroll']);
         const rowExpandEl = refRowExpandElem.value;
         if (!xHandleEl) {
@@ -10238,24 +10251,43 @@ var _default = exports.default = (0, _vue.defineComponent)({
           return;
         }
         const wheelSpeed = getWheelSpeed(reactData.lastScrollTime);
-        const deltaTop = deltaY * wheelSpeed;
-        const deltaLeft = deltaX * wheelSpeed;
+        const deltaTop = Math.ceil(deltaY * wheelSpeed);
+        const deltaLeft = Math.ceil(deltaX * wheelSpeed);
         const isTopWheel = deltaTop < 0;
         const currScrollTop = bodyScrollElem.scrollTop;
         // 如果滚动位置已经是顶部或底部，则不需要触发
         if (isTopWheel ? currScrollTop <= 0 : currScrollTop >= bodyScrollElem.scrollHeight - bodyScrollElem.clientHeight) {
           return;
         }
-        const scrollTop = bodyScrollElem.scrollTop + deltaTop;
+        const scrollTop = currScrollTop + deltaTop;
         const scrollLeft = bodyScrollElem.scrollLeft + deltaLeft;
         const isRollX = scrollLeft !== lastScrollLeft;
         const isRollY = scrollTop !== lastScrollTop;
+        if (rowOpts.isHover || highlightHoverRow) {
+          $xeTable.clearHoverRow();
+        }
         // 用于鼠标纵向滚轮处理
+        if (isRollX) {
+          evnt.preventDefault();
+          internalData.inWheelScroll = true;
+          wheelScrollLeftTo(scrollLeft, offsetLeft => {
+            const currLeftNum = offsetLeft;
+            (0, _dom.setScrollLeft)(xHandleEl, currLeftNum);
+            (0, _dom.setScrollLeft)(bodyScrollElem, currLeftNum);
+            (0, _dom.setScrollLeft)(headerScrollElem, currLeftNum);
+            (0, _dom.setScrollLeft)(footerScrollElem, currLeftNum);
+            if (scrollXLoad) {
+              $xeTable.triggerScrollXEvent(evnt);
+            }
+            $xeTable.handleScrollEvent(evnt, isRollY, isRollX, bodyScrollElem.scrollTop, currLeftNum, {
+              type: 'table',
+              fixed: ''
+            });
+          });
+        }
         if (isRollY) {
-          if (rowOpts.isHover || highlightHoverRow) {
-            $xeTable.clearHoverRow();
-          }
-          wheelScrollTo(scrollTop - bodyScrollElem.scrollTop, offsetTop => {
+          evnt.preventDefault();
+          wheelScrollTopTo(scrollTop - currScrollTop, offsetTop => {
             const currTopNum = bodyScrollElem.scrollTop + offsetTop;
             internalData.inWheelScroll = true;
             (0, _dom.setScrollTop)(yHandleEl, currTopNum);
@@ -10266,7 +10298,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
             if (scrollYLoad) {
               $xeTable.triggerScrollYEvent(evnt);
             }
-            $xeTable.handleScrollEvent(evnt, isRollY, isRollX, currTopNum, scrollLeft, {
+            $xeTable.handleScrollEvent(evnt, isRollY, isRollX, currTopNum, bodyScrollElem.scrollLeft, {
               type: 'table',
               fixed: ''
             });
@@ -10915,7 +10947,6 @@ var _default = exports.default = (0, _vue.defineComponent)({
       } = props;
       const {
         overflowX,
-        scrollYLoad,
         tableData,
         tableColumn,
         tableGroupColumn,
@@ -10926,16 +10957,10 @@ var _default = exports.default = (0, _vue.defineComponent)({
         leftList,
         rightList
       } = columnStore;
-      const leftFixedWidth = computeLeftFixedWidth.value;
-      const rightFixedWidth = computeRightFixedWidth.value;
-      const ons = {};
-      if (scrollYLoad || leftFixedWidth || rightFixedWidth) {
-        ons.onWheelPassive = $xeTable.triggerBodyWheelEvent;
-      }
-      return (0, _vue.h)('div', Object.assign({
+      return (0, _vue.h)('div', {
         ref: refTableViewportElem,
         class: 'vxe-table--viewport-wrapper'
-      }, ons), [(0, _vue.h)('div', {
+      }, [(0, _vue.h)('div', {
         class: 'vxe-table--main-wrapper'
       }, [
       /**
@@ -11594,6 +11619,12 @@ var _default = exports.default = (0, _vue.defineComponent)({
           }
         }
       });
+      const tableViewportEl = refTableViewportElem.value;
+      if (tableViewportEl) {
+        tableViewportEl.addEventListener('wheel', $xeTable.triggerBodyWheelEvent, {
+          passive: false
+        });
+      }
       globalEvents.on($xeTable, 'paste', handleGlobalPasteEvent);
       globalEvents.on($xeTable, 'copy', handleGlobalCopyEvent);
       globalEvents.on($xeTable, 'cut', handleGlobalCutEvent);
@@ -11608,6 +11639,10 @@ var _default = exports.default = (0, _vue.defineComponent)({
       });
     });
     (0, _vue.onBeforeUnmount)(() => {
+      const tableViewportEl = refTableViewportElem.value;
+      if (tableViewportEl) {
+        tableViewportEl.removeEventListener('wheel', $xeTable.triggerBodyWheelEvent);
+      }
       if (resizeObserver) {
         resizeObserver.disconnect();
       }