vxe-table 4.11.0 → 4.11.2

package/es/table/src/table.js

@@ -3236,7 +3236,12 @@ export default 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;
@@ -8635,6 +8640,9 @@ export default defineComponent({
             triggerBodyScrollEvent(evnt, fixedType) {
                 const { scrollYLoad, scrollXLoad } = reactData;
                 const { elemStore, intoRunScroll, lastScrollTop, lastScrollLeft, inWheelScroll, inVirtualScroll, inHeaderScroll, inBodyScroll, scrollRenderType, inFooterScroll } = internalData;
+                if (inWheelScroll || inVirtualScroll || inHeaderScroll || inFooterScroll) {
+                    return;
+                }
                 const xHandleEl = refScrollXHandleElem.value;
                 const yHandleEl = refScrollYHandleElem.value;
                 const leftScrollElem = getRefElem(elemStore['left-body-scroll']);
@@ -8643,9 +8651,6 @@ export default defineComponent({
                 const headerScrollElem = getRefElem(elemStore['main-header-scroll']);
                 const footerScrollElem = getRefElem(elemStore['main-footer-scroll']);
                 const rowExpandEl = refRowExpandElem.value;
-                if (inWheelScroll || inVirtualScroll || inHeaderScroll || inFooterScroll) {
-                    return;
-                }
                 if (intoRunScroll) {
                     return;
                 }
@@ -8663,6 +8668,7 @@ export default defineComponent({
                         return;
                     }
                 }
+                console.log('triggerBodyScrollEvent', 11);
                 let scrollTop = yHandleEl.scrollTop;
                 let scrollLeft = xHandleEl.scrollLeft;
                 if (leftScrollElem && fixedType === 'left') {
@@ -8714,14 +8720,14 @@ export default defineComponent({
             triggerHeaderScrollEvent(evnt, fixedType) {
                 const { scrollXLoad } = reactData;
                 const { elemStore, intoRunScroll, inWheelScroll, inVirtualScroll, inBodyScroll, inFooterScroll } = internalData;
+                if (inWheelScroll || inVirtualScroll || inBodyScroll || inFooterScroll) {
+                    return;
+                }
                 const yHandleEl = refScrollYHandleElem.value;
                 const xHandleEl = refScrollXHandleElem.value;
                 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;
                 }
@@ -8734,6 +8740,7 @@ export default defineComponent({
                 if (!yHandleEl) {
                     return;
                 }
+                console.log('triggerHeaderScrollEvent', 11);
                 const scrollTop = yHandleEl.scrollTop;
                 const scrollLeft = headerScrollElem.scrollLeft;
                 const isRollX = true;
@@ -8753,14 +8760,14 @@ export default defineComponent({
             triggerFooterScrollEvent(evnt, fixedType) {
                 const { scrollXLoad } = reactData;
                 const { elemStore, intoRunScroll, inWheelScroll, inVirtualScroll, inHeaderScroll, inBodyScroll } = internalData;
+                if (inWheelScroll || inVirtualScroll || inHeaderScroll || inBodyScroll) {
+                    return;
+                }
                 const yHandleEl = refScrollYHandleElem.value;
                 const xHandleEl = refScrollXHandleElem.value;
                 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;
                 }
@@ -8773,6 +8780,7 @@ export default defineComponent({
                 if (!yHandleEl) {
                     return;
                 }
+                console.log('triggerFooterScrollEvent');
                 const scrollTop = yHandleEl.scrollTop;
                 const scrollLeft = footerScrollElem.scrollLeft;
                 const isRollX = true;
@@ -8795,13 +8803,20 @@ export default defineComponent({
                     return;
                 }
                 const { highlightHoverRow } = tableProps;
-                const { scrollYLoad } = reactData;
+                const { scrollXLoad, scrollYLoad } = reactData;
+                const leftFixedWidth = computeLeftFixedWidth.value;
+                const rightFixedWidth = computeRightFixedWidth.value;
+                if (!(scrollYLoad || leftFixedWidth || rightFixedWidth)) {
+                    return;
+                }
                 const { elemStore, lastScrollTop, lastScrollLeft } = internalData;
                 const rowOpts = computeRowOpts.value;
                 const xHandleEl = refScrollXHandleElem.value;
                 const yHandleEl = refScrollYHandleElem.value;
                 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 = refRowExpandElem.value;
                 if (!xHandleEl) {
@@ -8814,25 +8829,43 @@ export default 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;
+                        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);
@@ -8843,7 +8876,7 @@ export default defineComponent({
                         if (scrollYLoad) {
                             $xeTable.triggerScrollYEvent(evnt);
                         }
-                        $xeTable.handleScrollEvent(evnt, isRollY, isRollX, currTopNum, scrollLeft, {
+                        $xeTable.handleScrollEvent(evnt, isRollY, isRollX, currTopNum, bodyScrollElem.scrollLeft, {
                             type: 'table',
                             fixed: ''
                         });
@@ -9430,15 +9463,12 @@ export default defineComponent({
         };
         const renderViewport = () => {
             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 = computeLeftFixedWidth.value;
-            const rightFixedWidth = computeRightFixedWidth.value;
-            const ons = {};
-            if (scrollYLoad || leftFixedWidth || rightFixedWidth) {
-                ons.onWheel = $xeTable.triggerBodyWheelEvent;
-            }
-            return h('div', Object.assign({ ref: refTableViewportElem, class: 'vxe-table--viewport-wrapper' }, ons), [
+            return h('div', {
+                ref: refTableViewportElem,
+                class: 'vxe-table--viewport-wrapper'
+            }, [
                 h('div', {
                     class: 'vxe-table--main-wrapper'
                 }, [
@@ -10105,6 +10135,10 @@ export default 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);
@@ -10117,6 +10151,10 @@ export default defineComponent({
             tablePrivateMethods.preventEvent(null, 'mounted', { $table: $xeTable });
         });
         onBeforeUnmount(() => {
+            const tableViewportEl = refTableViewportElem.value;
+            if (tableViewportEl) {
+                tableViewportEl.removeEventListener('wheel', $xeTable.triggerBodyWheelEvent);
+            }
             if (resizeObserver) {
                 resizeObserver.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,