From 10012c584fc1f66db77042f28dd31039509c12a5 Mon Sep 17 00:00:00 2001 From: xuliangzhan Date: Mon, 11 Nov 2024 09:47:13 +0800 Subject: [PATCH] releases 4.8.10 --- package.json | 4 +- packages/table/src/body.ts | 4 -- packages/table/src/emits.ts | 1 + packages/table/src/footer.ts | 2 - packages/table/src/table.ts | 83 ++++++++++++++++++++++++++++-------- 5 files changed, 69 insertions(+), 25 deletions(-) diff --git a/package.json b/package.json index 43459e772e..4286bc26e1 100644 --- a/package.json +++ b/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", diff --git a/packages/table/src/body.ts b/packages/table/src/body.ts index 56d060fa1f..983dd6812a 100644 --- a/packages/table/src/body.ts +++ b/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, { diff --git a/packages/table/src/emits.ts b/packages/table/src/emits.ts index 9b3b74f0b5..96dbdd0785 100644 --- a/packages/table/src/emits.ts +++ b/packages/table/src/emits.ts @@ -52,6 +52,7 @@ export default [ 'edit-disabled', 'valid-error', 'scroll', + 'scroll-boundary', 'custom', 'change-fnr', // 废弃 diff --git a/packages/table/src/footer.ts b/packages/table/src/footer.ts index ed230740c2..0a3315a882 100644 --- a/packages/table/src/footer.ts +++ b/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, { diff --git a/packages/table/src/table.ts b/packages/table/src/table.ts index 3dc0af0fca..fc2c77cac9 100644 --- a/packages/table/src/table.ts +++ b/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,9 +2959,6 @@ 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) => { @@ -2951,8 +2966,6 @@ export default defineComponent({ 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) }, /**