vxe-table 3.13.1 → 3.13.3

package/packages/table/src/methods.ts

@@ -1877,7 +1877,13 @@ const getWheelSpeed = (lastScrollTime: number) => {
   return multiple
 }
 
-const wheelScrollTo = (diffNum: number, cb: (progress: number) => void) => {
+const wheelScrollLeftTo = (scrollLeft: number, cb: (offsetLeft: number) => void) => {
+  requestAnimationFrame(() => {
+    cb(scrollLeft)
+  })
+}
+
+const wheelScrollTopTo = (diffNum: number, cb: (progress: number) => void) => {
   const duration = Math.abs(diffNum)
   const startTime = performance.now()
   let countTop = 0
@@ -8090,6 +8096,9 @@ const Methods = {
 
     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 as HTMLDivElement
     const yHandleEl = $xeTable.$refs.refScrollYHandleElem as HTMLDivElement
     const leftScrollElem = getRefElem(elemStore['left-body-scroll'])
@@ -8098,9 +8107,6 @@ const Methods = {
     const headerScrollElem = getRefElem(elemStore['main-header-scroll'])
     const footerScrollElem = getRefElem(elemStore['main-footer-scroll'])
     const rowExpandEl = $xeTable.$refs.refRowExpandElem as HTMLDivElement
-    if (inWheelScroll || inVirtualScroll || inHeaderScroll || inFooterScroll) {
-      return
-    }
     if (intoRunScroll) {
       return
     }
@@ -8169,17 +8175,17 @@ const Methods = {
 
     const { scrollXLoad } = reactData
     const { elemStore, intoRunScroll, inWheelScroll, inVirtualScroll, inBodyScroll, inFooterScroll } = internalData
-    const xHandleEl = $xeTable.$refs.refScrollXHandleElem as HTMLDivElement
-    const yHandleEl = $xeTable.$refs.refScrollYHandleElem as HTMLDivElement
-    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 as HTMLDivElement
+    const yHandleEl = $xeTable.$refs.refScrollYHandleElem as HTMLDivElement
+    const bodyScrollElem = getRefElem(elemStore['main-body-scroll'])
+    const headerScrollElem = getRefElem(elemStore['main-header-scroll'])
+    const footerScrollElem = getRefElem(elemStore['main-footer-scroll'])
     if (!headerScrollElem) {
       return
     }
@@ -8212,14 +8218,14 @@ const Methods = {
 
     const { scrollXLoad } = reactData
     const { elemStore, intoRunScroll, inWheelScroll, inVirtualScroll, inHeaderScroll, inBodyScroll } = internalData
+    if (inWheelScroll || inVirtualScroll || inHeaderScroll || inBodyScroll) {
+      return
+    }
     const xHandleEl = $xeTable.$refs.refScrollXHandleElem as HTMLDivElement
     const yHandleEl = $xeTable.$refs.refScrollYHandleElem as HTMLDivElement
     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
     }
@@ -8258,17 +8264,25 @@ const Methods = {
     if (target && /^textarea$/i.test((target as HTMLElement).tagName)) {
       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 as HTMLDivElement
     const yHandleEl = $xeTable.$refs.refScrollYHandleElem as HTMLDivElement
     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 as HTMLDivElement
-
     if (!xHandleEl) {
       return
     }
@@ -8280,8 +8294,8 @@ const Methods = {
     }
 
     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
@@ -8290,19 +8304,36 @@ const Methods = {
       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: number) => {
+        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: number) => {
+      wheelScrollTopTo(scrollTop - currScrollTop, (offsetTop: number) => {
         const currTopNum = bodyScrollElem.scrollTop + offsetTop
         internalData.inWheelScroll = true
         setScrollTop(yHandleEl, currTopNum)
@@ -8313,7 +8344,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/packages/table/src/table.ts

@@ -333,20 +333,12 @@ function renderViewport (h: CreateElement, $xeTable: VxeTableConstructor & VxeTa
   const reactData = $xeTable as unknown as TableReactData
 
   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: Record<string, any> = {}
-  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'
@@ -1290,6 +1282,8 @@ export default {
     }
   } as any,
   created () {
+    const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+
     const { scrollXStore, sYOpts, scrollYStore, data, editOpts, treeOpts, treeConfig, showOverflow, rowOpts } = Object.assign(this, {
       tZindex: 0,
       elemStore: {},
@@ -1548,7 +1542,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
@@ -1603,6 +1597,12 @@ export default {
       resizeObserver.observe(this.getParentElem())
       this.$resize = resizeObserver
     }
+
+    const tableViewportEl = $xeTable.$refs.refTableViewportElem as HTMLDivElement
+    if (tableViewportEl) {
+      tableViewportEl.addEventListener('wheel', $xeTable.triggerBodyWheelEvent, { passive: false })
+    }
+
     this.preventEvent(null, 'mounted')
   },
   activated () {
@@ -1613,6 +1613,12 @@ export default {
     this.preventEvent(null, 'deactivated')
   },
   beforeDestroy () {
+    const $xeTable = this
+
+    const tableViewportEl = $xeTable.$refs.refTableViewportElem as HTMLDivElement
+    if (tableViewportEl) {
+      tableViewportEl.removeEventListener('wheel', $xeTable.triggerBodyWheelEvent)
+    }
     if (this.$resize) {
       this.$resize.disconnect()
     }

package/styles/components/table.scss

@@ -54,6 +54,7 @@
   overflow: hidden;
   outline: 0;
   scrollbar-width: none;
+  -webkit-overflow-scrolling: touch;
 }
 .vxe-table--header-inner-wrapper,
 .vxe-table--body-inner-wrapper,
@@ -63,6 +64,7 @@
   height: 100%;
   scrollbar-width: none;
   -ms-overflow-style: none;
+  -webkit-overflow-scrolling: touch;
   &::-webkit-scrollbar {
     display: none;
   }
@@ -271,7 +273,7 @@
   display: none;
   position: absolute;
   pointer-events: none;
-  z-index: 6;
+  z-index: 1;
 }
 
 .vxe-table--header-wrapper {