vxe-table 3.13.1 → 3.13.2

package/es/table/src/methods.js

@@ -1794,7 +1794,12 @@ const getWheelSpeed = (lastScrollTime) => {
     }
     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;
@@ -7941,6 +7946,9 @@ const Methods = {
         const internalData = $xeTable;
         const { scrollYLoad, scrollXLoad } = reactData;
         const { elemStore, intoRunScroll, lastScrollTop, lastScrollLeft, inWheelScroll, inVirtualScroll, inHeaderScroll, inBodyScroll, scrollRenderType, inFooterScroll } = internalData;
+        if (inWheelScroll || inVirtualScroll || inHeaderScroll || inFooterScroll) {
+            return;
+        }
         const xHandleEl = $xeTable.$refs.refScrollXHandleElem;
         const yHandleEl = $xeTable.$refs.refScrollYHandleElem;
         const leftScrollElem = getRefElem(elemStore['left-body-scroll']);
@@ -7949,9 +7957,6 @@ const Methods = {
         const headerScrollElem = getRefElem(elemStore['main-header-scroll']);
         const footerScrollElem = getRefElem(elemStore['main-footer-scroll']);
         const rowExpandEl = $xeTable.$refs.refRowExpandElem;
-        if (inWheelScroll || inVirtualScroll || inHeaderScroll || inFooterScroll) {
-            return;
-        }
         if (intoRunScroll) {
             return;
         }
@@ -8023,17 +8028,17 @@ const Methods = {
         const internalData = $xeTable;
         const { scrollXLoad } = reactData;
         const { elemStore, intoRunScroll, inWheelScroll, inVirtualScroll, inBodyScroll, inFooterScroll } = internalData;
-        const xHandleEl = $xeTable.$refs.refScrollXHandleElem;
-        const yHandleEl = $xeTable.$refs.refScrollYHandleElem;
-        const bodyScrollElem = getRefElem(elemStore['main-body-scroll']);
-        const headerScrollElem = getRefElem(elemStore['main-header-scroll']);
-        const footerScrollElem = getRefElem(elemStore['main-footer-scroll']);
         if (inWheelScroll || inVirtualScroll || inBodyScroll || inFooterScroll) {
             return;
         }
         if (intoRunScroll) {
             return;
         }
+        const xHandleEl = $xeTable.$refs.refScrollXHandleElem;
+        const yHandleEl = $xeTable.$refs.refScrollYHandleElem;
+        const bodyScrollElem = getRefElem(elemStore['main-body-scroll']);
+        const headerScrollElem = getRefElem(elemStore['main-header-scroll']);
+        const footerScrollElem = getRefElem(elemStore['main-footer-scroll']);
         if (!headerScrollElem) {
             return;
         }
@@ -8065,14 +8070,14 @@ const Methods = {
         const internalData = $xeTable;
         const { scrollXLoad } = reactData;
         const { elemStore, intoRunScroll, inWheelScroll, inVirtualScroll, inHeaderScroll, inBodyScroll } = internalData;
+        if (inWheelScroll || inVirtualScroll || inHeaderScroll || inBodyScroll) {
+            return;
+        }
         const xHandleEl = $xeTable.$refs.refScrollXHandleElem;
         const yHandleEl = $xeTable.$refs.refScrollYHandleElem;
         const bodyScrollElem = getRefElem(elemStore['main-body-scroll']);
         const headerScrollElem = getRefElem(elemStore['main-header-scroll']);
         const footerScrollElem = getRefElem(elemStore['main-footer-scroll']);
-        if (inWheelScroll || inVirtualScroll || inHeaderScroll || inBodyScroll) {
-            return;
-        }
         if (intoRunScroll) {
             return;
         }
@@ -8111,13 +8116,20 @@ const Methods = {
             return;
         }
         const { highlightHoverRow } = tableProps;
-        const { scrollYLoad } = reactData;
+        const { scrollXLoad, scrollYLoad } = reactData;
+        const leftFixedWidth = $xeTable.computeLeftFixedWidth;
+        const rightFixedWidth = $xeTable.computeRightFixedWidth;
+        if (!(scrollYLoad || leftFixedWidth || rightFixedWidth)) {
+            return;
+        }
         const { elemStore, lastScrollTop, lastScrollLeft } = internalData;
         const rowOpts = $xeTable.computeRowOpts;
         const xHandleEl = $xeTable.$refs.refScrollXHandleElem;
         const yHandleEl = $xeTable.$refs.refScrollYHandleElem;
         const leftScrollElem = getRefElem(elemStore['left-body-scroll']);
+        const headerScrollElem = getRefElem(elemStore['main-header-scroll']);
         const bodyScrollElem = getRefElem(elemStore['main-body-scroll']);
+        const footerScrollElem = getRefElem(elemStore['main-footer-scroll']);
         const rightScrollElem = getRefElem(elemStore['right-body-scroll']);
         const rowExpandEl = $xeTable.$refs.refRowExpandElem;
         if (!xHandleEl) {
@@ -8130,25 +8142,43 @@ const Methods = {
             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;
+                setScrollLeft(xHandleEl, currLeftNum);
+                setScrollLeft(bodyScrollElem, currLeftNum);
+                setScrollLeft(headerScrollElem, currLeftNum);
+                setScrollLeft(footerScrollElem, currLeftNum);
+                if (scrollXLoad) {
+                    $xeTable.triggerScrollXEvent(evnt);
+                }
+                $xeTable.handleScrollEvent(evnt, isRollY, isRollX, bodyScrollElem.scrollTop, currLeftNum, {
+                    type: 'table',
+                    fixed: ''
+                });
+            });
+        }
         if (isRollY) {
             evnt.preventDefault();
-            if (rowOpts.isHover || highlightHoverRow) {
-                $xeTable.clearHoverRow();
-            }
-            wheelScrollTo(scrollTop - bodyScrollElem.scrollTop, (offsetTop) => {
+            wheelScrollTopTo(scrollTop - currScrollTop, (offsetTop) => {
                 const currTopNum = bodyScrollElem.scrollTop + offsetTop;
                 internalData.inWheelScroll = true;
                 setScrollTop(yHandleEl, currTopNum);
@@ -8159,7 +8189,7 @@ const Methods = {
                 if (scrollYLoad) {
                     $xeTable.triggerScrollYEvent(evnt);
                 }
-                $xeTable.handleScrollEvent(evnt, isRollY, isRollX, currTopNum, scrollLeft, {
+                $xeTable.handleScrollEvent(evnt, isRollY, isRollX, currTopNum, bodyScrollElem.scrollLeft, {
                     type: 'table',
                     fixed: ''
                 });

package/es/table/src/table.js

@@ -311,18 +311,11 @@ function renderViewport(h, $xeTable) {
     const props = $xeTable;
     const reactData = $xeTable;
     const { showHeader, showFooter } = props;
-    const { overflowX, scrollYLoad, tableData, tableColumn, tableGroupColumn, footerTableData, columnStore } = reactData;
+    const { overflowX, tableData, tableColumn, tableGroupColumn, footerTableData, columnStore } = reactData;
     const { leftList, rightList } = columnStore;
-    const leftFixedWidth = $xeTable.computeLeftFixedWidth;
-    const rightFixedWidth = $xeTable.computeRightFixedWidth;
-    const ons = {};
-    if (scrollYLoad || leftFixedWidth || rightFixedWidth) {
-        ons.wheel = $xeTable.triggerBodyWheelEvent;
-    }
     return h('div', {
         ref: 'refTableViewportElem',
-        class: 'vxe-table--viewport-wrapper',
-        on: ons
+        class: 'vxe-table--viewport-wrapper'
     }, [
         h('div', {
             class: 'vxe-table--main-wrapper'
@@ -1216,6 +1209,7 @@ export default {
         }
     },
     created() {
+        const $xeTable = this;
         const { scrollXStore, sYOpts, scrollYStore, data, editOpts, treeOpts, treeConfig, showOverflow, rowOpts } = Object.assign(this, {
             tZindex: 0,
             elemStore: {},
@@ -1468,7 +1462,7 @@ export default {
         globalEvents.on(this, 'keydown', this.handleGlobalKeydownEvent);
         globalEvents.on(this, 'resize', this.handleGlobalResizeEvent);
         globalEvents.on(this, 'contextmenu', this.handleGlobalContextmenuEvent);
-        this.preventEvent(null, 'created');
+        $xeTable.preventEvent(null, 'created');
     },
     mounted() {
         const $xeTable = this;
@@ -1518,6 +1512,10 @@ export default {
             resizeObserver.observe(this.getParentElem());
             this.$resize = resizeObserver;
         }
+        const tableViewportEl = $xeTable.$refs.refTableViewportElem;
+        if (tableViewportEl) {
+            tableViewportEl.addEventListener('wheel', $xeTable.triggerBodyWheelEvent, { passive: false });
+        }
         this.preventEvent(null, 'mounted');
     },
     activated() {
@@ -1528,6 +1526,11 @@ export default {
         this.preventEvent(null, 'deactivated');
     },
     beforeDestroy() {
+        const $xeTable = this;
+        const tableViewportEl = $xeTable.$refs.refTableViewportElem;
+        if (tableViewportEl) {
+            tableViewportEl.removeEventListener('wheel', $xeTable.triggerBodyWheelEvent);
+        }
         if (this.$resize) {
             this.$resize.disconnect();
         }

package/es/table/style.css

@@ -1734,6 +1734,7 @@
   overflow: hidden;
   outline: 0;
   scrollbar-width: none;
+  -webkit-overflow-scrolling: touch;
 }
 
 .vxe-table--header-inner-wrapper,
@@ -1744,6 +1745,7 @@
   height: 100%;
   scrollbar-width: none;
   -ms-overflow-style: none;
+  -webkit-overflow-scrolling: touch;
 }
 .vxe-table--header-inner-wrapper::-webkit-scrollbar,
 .vxe-table--body-inner-wrapper::-webkit-scrollbar,