releases 4.8.10

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vxe-table",
-  "version": "4.8.9",
+  "version": "4.8.10",
   "description": "一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟树、列拖拽，懒加载、快捷菜单、数据校验、树形结构、打印、导入导出、自定义模板、渲染器、JSON 配置式...",
   "scripts": {
     "update": "npm install --legacy-peer-deps",
@@ -28,7 +28,7 @@
   "style": "lib/style.css",
   "typings": "types/index.d.ts",
   "dependencies": {
-    "vxe-pc-ui": "^4.2.49"
+    "vxe-pc-ui": "^4.2.50"
   },
   "devDependencies": {
     "@types/resize-observer-browser": "^0.1.11",

packages/table/src/body.ts

@@ -536,8 +536,6 @@ export default defineComponent({
       if (yHandleEl) {
         yHandleEl.scrollTop = scrollTop
       } else if (isRollY) {
-        tableInternalData.lastScrollTop = scrollTop
-        tableInternalData.lastScrollLeft = scrollLeft
         if (leftElem && fixedType === 'left') {
           setScrollTop(bodyElem, scrollTop)
           setScrollTop(rightElem, scrollTop)
@@ -556,8 +554,6 @@ export default defineComponent({
       if (xHandleEl) {
         xHandleEl.scrollLeft = scrollLeft
       } else if (isRollX) {
-        tableInternalData.lastScrollTop = scrollTop
-        tableInternalData.lastScrollLeft = scrollLeft
         setScrollLeft(headerElem, scrollLeft)
         setScrollLeft(footerElem, scrollLeft)
         $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {

packages/table/src/emits.ts

@@ -52,6 +52,7 @@ export default [
   'edit-disabled',
   'valid-error',
   'scroll',
+  'scroll-boundary',
   'custom',
 
   'change-fnr', // 废弃

packages/table/src/footer.ts

@@ -76,8 +76,6 @@ export default defineComponent({
         const isRollX = true
         const isRollY = false
         const scrollTop = bodyElem.scrollTop
-        tableInternalData.lastScrollLeft = scrollLeft
-        tableReactData.lastScrollTime = Date.now()
         setScrollLeft(headerElem, scrollLeft)
         setScrollLeft(bodyElem, scrollLeft)
         $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {

packages/table/src/table.ts

@@ -403,10 +403,28 @@ export default defineComponent({
       return Object.assign({}, getConfig().table.scrollX, props.scrollX) as VxeTablePropTypes.SXOpts
     })
 
+    const computeScrollXThreshold = computed(() => {
+      const sXOpts = computeSXOpts.value
+      const { threshold } = sXOpts
+      if (threshold) {
+        return XEUtils.toNumber(threshold)
+      }
+      return 0
+    })
+
     const computeSYOpts = computed(() => {
       return Object.assign({}, getConfig().table.scrollY, props.scrollY) as VxeTablePropTypes.SYOpts
     })
 
+    const computeScrollYThreshold = computed(() => {
+      const sYOpts = computeSYOpts.value
+      const { threshold } = sYOpts
+      if (threshold) {
+        return XEUtils.toNumber(threshold)
+      }
+      return 0
+    })
+
     const computeRowHeightMaps = computed(() => {
       return {
         default: 48,
@@ -2941,18 +2959,13 @@ export default defineComponent({
       setScrollLeft(bodyElem, scrollLeft)
       setScrollLeft(headerElem, scrollLeft)
       setScrollLeft(footerElem, scrollLeft)
-      setScrollLeft(bodyElem, scrollLeft)
-      setScrollLeft(headerElem, scrollLeft)
-      setScrollLeft(footerElem, scrollLeft)
     }
 
     const scrollXEvent = (evnt: Event) => {
       const wrapperEl = evnt.currentTarget as HTMLDivElement
       const { scrollTop, scrollLeft } = wrapperEl
       const isRollX = true
       const isRollY = false
-      internalData.lastScrollLeft = scrollLeft
-      reactData.lastScrollTime = Date.now()
       handleSyncScrollX(scrollLeft)
       $xeTable.triggerScrollXEvent(evnt)
       $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
@@ -2982,8 +2995,6 @@ export default defineComponent({
       const { scrollTop, scrollLeft } = wrapperEl
       const isRollX = false
       const isRollY = true
-      internalData.lastScrollTop = scrollTop
-      reactData.lastScrollTime = Date.now()
       handleSyncScrollY(scrollTop)
       $xeTable.triggerScrollYEvent(evnt)
       $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
@@ -6873,20 +6884,12 @@ export default defineComponent({
       },
       handleScrollEvent (evnt, isRollY, isRollX, scrollTop, scrollLeft, params) {
         const { highlightHoverRow } = props
+        const { lastScrollLeft, lastScrollTop } = internalData
         const tableBody = refTableBody.value
         const bodyElem = tableBody ? tableBody.$el as HTMLDivElement : null
         const rowOpts = computeRowOpts.value
         const validTip = refValidTooltip.value
         const tooltip = refTooltip.value
-        if (rowOpts.isHover || highlightHoverRow) {
-          $xeTable.clearHoverRow()
-        }
-        if (validTip && validTip.reactData.visible) {
-          validTip.close()
-        }
-        if (tooltip && tooltip.reactData.visible) {
-          tooltip.close()
-        }
         const bodyHeight = bodyElem ? bodyElem.clientHeight : 0
         const bodyWidth = bodyElem ? bodyElem.clientWidth : 0
         const scrollHeight = bodyElem ? bodyElem.scrollHeight : 0
@@ -6895,17 +6898,50 @@ export default defineComponent({
         let isBottom = false
         let isLeft = false
         let isRight = false
+        let direction = ''
+        let isTopBoundary = false
+        let isBottomBoundary = false
+        let isLeftBoundary = false
+        let isRightBoundary = false
         if (isRollX) {
+          const xThreshold = computeScrollXThreshold.value
           isLeft = scrollLeft <= 0
-          if (!isTop) {
+          if (!isLeft) {
             isRight = scrollLeft + bodyWidth >= scrollWidth
           }
+          if (scrollLeft > lastScrollLeft) {
+            direction = 'right'
+            if (scrollLeft + bodyWidth >= scrollWidth - xThreshold) {
+              isRightBoundary = true
+            }
+          } else {
+            direction = 'left'
+            if (scrollLeft <= xThreshold) {
+              isLeftBoundary = true
+            }
+          }
           tablePrivateMethods.checkScrolling()
+          internalData.lastScrollLeft = scrollLeft
+          reactData.lastScrollTime = Date.now()
         } else {
+          const yThreshold = computeScrollYThreshold.value
           isTop = scrollTop <= 0
           if (!isTop) {
             isBottom = scrollTop + bodyHeight >= scrollHeight
           }
+          if (scrollTop > lastScrollTop) {
+            direction = 'bottom'
+            if (scrollTop + bodyHeight >= scrollHeight - yThreshold) {
+              isBottomBoundary = true
+            }
+          } else {
+            direction = 'top'
+            if (scrollTop <= yThreshold) {
+              isTopBoundary = true
+            }
+          }
+          internalData.lastScrollTop = scrollTop
+          reactData.lastScrollTime = Date.now()
         }
         const evntParams = {
           scrollTop,
@@ -6920,8 +6956,21 @@ export default defineComponent({
           isBottom,
           isLeft,
           isRight,
+          direction,
           ...params
         }
+        if (rowOpts.isHover || highlightHoverRow) {
+          $xeTable.clearHoverRow()
+        }
+        if (validTip && validTip.reactData.visible) {
+          validTip.close()
+        }
+        if (tooltip && tooltip.reactData.visible) {
+          tooltip.close()
+        }
+        if (isBottomBoundary || isTopBoundary || isRightBoundary || isLeftBoundary) {
+          dispatchEvent('scroll-boundary', evntParams, evnt)
+        }
         dispatchEvent('scroll', evntParams, evnt)
       },
       /**