diff --git a/src/hooks/useVirtualScrollNew.ts b/src/hooks/useVirtualScrollNew.ts index c93055b91..19ecc2982 100644 --- a/src/hooks/useVirtualScrollNew.ts +++ b/src/hooks/useVirtualScrollNew.ts @@ -60,12 +60,12 @@ const useVirtualScroll = (container: Ref, params: UseVirtualScrollP return tScroll.value.type === 'virtual' && tScroll.value.threshold < data.length; }); - const getTrScrollTopHeightList = (trHeightList: number[], containerHeight: number) => { + const getTrScrollTopHeightList = (trHeightList: number[]) => { const list: number[] = []; const { data } = params.value; - // 当前行滚动高度 = 上一行滚动高度 + 当前行高度 + 容器高度 + // 当前行滚动高度 = 上一行滚动高度 + 上一行高度 for (let i = 0, len = data.length; i < len; i++) { - list[i] = (list[i - 1] || containerHeight) + (trHeightList[i] || tScroll.value.rowHeight); + list[i] = (list[i - 1] || 0) + (trHeightList[i - 1] || tScroll.value.rowHeight); } return list; }; @@ -81,13 +81,24 @@ const useVirtualScroll = (container: Ref, params: UseVirtualScrollP break; } } - if (currentIndex < 0) return; - const startIndex = Math.min(currentIndex, trScrollTopHeightList.length - tripleBufferSize.value); - const endIndex = startIndex + tripleBufferSize.value; - if (startAndEndIndex.value.join() !== [startIndex, endIndex].join() && startIndex >= 0) { + if (currentIndex < 0) { + // 处理滚动到底部的情况 + const lastIndex = trScrollTopHeightList.length - 1; + if (scrollTop > trScrollTopHeightList[lastIndex]) { + currentIndex = lastIndex; + } else { + return; + } + } + + const { bufferSize } = tScroll.value; + const startIndex = Math.max(0, currentIndex - bufferSize); + const endIndex = Math.min(trScrollTopHeightList.length, currentIndex + bufferSize * 2); + + if (startAndEndIndex.value.join() !== [startIndex, endIndex].join()) { visibleData.value = params.value.data.slice(startIndex, endIndex); const lastScrollTop = trScrollTopHeightList[startIndex - 1]; - const top = lastScrollTop > 0 ? lastScrollTop - containerHeight.value : 0; + const top = lastScrollTop > 0 ? lastScrollTop : 0; translateY.value = top; startAndEndIndex.value = [startIndex, endIndex]; } @@ -101,7 +112,7 @@ const useVirtualScroll = (container: Ref, params: UseVirtualScrollP const newTrHeightList = trHeightList.value; if (newTrHeightList[rowIndex] !== trHeight) { newTrHeightList[rowIndex] = trHeight; - const scrollTopHeightList = getTrScrollTopHeightList(newTrHeightList, containerHeight.value); + const scrollTopHeightList = getTrScrollTopHeightList(newTrHeightList); trScrollTopHeightList.value = scrollTopHeightList; const lastIndex = scrollTopHeightList.length - 1; diff --git a/src/tree/tree.tsx b/src/tree/tree.tsx index c01ea6701..cab97fdee 100644 --- a/src/tree/tree.tsx +++ b/src/tree/tree.tsx @@ -311,7 +311,10 @@ export default defineComponent({ ); } - const topValue = (allNodes.value?.filter((node) => node.visible).length ?? 0) * (refProps.scroll.value?.rowHeight ?? 34); + const visibleNodeCount = allNodes.value?.filter((node) => node.visible).length ?? 0; + const topValue = isVirtual + ? virtualConfig.scrollHeight.value + (refProps.scroll.value?.rowHeight ?? 34) * 2 + : visibleNodeCount * (refProps.scroll.value?.rowHeight ?? 34); const placeholderStyles: TypeStyles = { width: '1px', height: '1px', diff --git a/test/snap/__snapshots__/csr.test.js.snap b/test/snap/__snapshots__/csr.test.js.snap index 94e1408ea..2781c5f1e 100644 --- a/test/snap/__snapshots__/csr.test.js.snap +++ b/test/snap/__snapshots__/csr.test.js.snap @@ -144554,7 +144554,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/vscroll.vue 1`] = `
diff --git a/test/snap/__snapshots__/ssr.test.js.snap b/test/snap/__snapshots__/ssr.test.js.snap index fa50ff8a0..f01492ef8 100644 --- a/test/snap/__snapshots__/ssr.test.js.snap +++ b/test/snap/__snapshots__/ssr.test.js.snap @@ -1339,7 +1339,7 @@ exports[`ssr snapshot test > renders ./src/tree-select/_example/valuedisplay.vue exports[`ssr snapshot test > renders ./src/tree-select/_example/valuetype.vue correctly 1`] = `"
广州市
深圳市
"`; -exports[`ssr snapshot test > renders ./src/upload/_example/base.vue correctly 1`] = `"

虚拟滚动 - virtual 模式

动画:
显示连线:
显示图标:
可选:
可操作:
插入节点数量:
"`; +exports[`ssr snapshot test > renders ./src/upload/_example/base.vue correctly 1`] = `"

虚拟滚动 - virtual 模式

动画:
显示连线:
显示图标:
可选:
可操作:
插入节点数量:
"`; exports[`ssr snapshot test > renders ./src/upload/_example/base.vue correctly 2`] = `"

要求文件大小在 1M 以内
文件上传失败示例
"`;