Merge pull request #578 from Louiszhai/pre_test

feat(table): virtual scroll table optimize
Tencent · Mar 17, 2022 · e7448cb · e7448cb
2 parents d8a6e1d + 10407a8
commit e7448cb
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 5 deletions.
diff --git a/src/hooks/useVirtualScroll.ts b/src/hooks/useVirtualScroll.ts
@@ -8,18 +8,21 @@ const useVirtualScroll = ({
   fixedHeight = false,
   lineHeight = 30,
   bufferSize = 20,
+  threshold = 100,
 }: {
   data: any;
   container: any;
   fixedHeight: boolean;
   lineHeight: number;
   bufferSize: number;
+  threshold: number;
 }) => {
   const state = reactive({
     visibleData: [],
     cachedHeight: [],
     cachedScrollY: [],
   });
+  const isVirtual = computed(() => data.value.length > threshold);
   const updateId = ref(0);
   const trs = new Map(); // 当前展示的行元素和数据
 
@@ -56,7 +59,7 @@ const useVirtualScroll = ({
       const average = maxScrollY / cachedHeight.length; // 平均高度
       return maxScrollY + (data.value.length - cachedHeight.length) * average; // 预估总高度
     }
-    return data.value.length * lineHeight;
+    return isVirtual.value ? data.value.length * lineHeight : 0;
   });
   const translateY = computed(() => {
     const { visibleData } = state;
@@ -163,6 +166,7 @@ const useVirtualScroll = ({
 
   // 滚动时动态计算和渲染
   const handleScroll = () => {
+    if (!isVirtual.value) return;
     // if (revising) {
     //   return false; // 修正滚动条时，暂停滚动逻辑
     // }
@@ -229,6 +233,7 @@ const useVirtualScroll = ({
 
   !fixedHeight && watch(updateId, calculateScrollY, { flush: 'post' });
   const handleRowMounted = () => {
+    if (!isVirtual.value) return;
     updateId.value++;
   };
   watch(data, () => {
@@ -242,7 +247,11 @@ const useVirtualScroll = ({
     start = 0;
     // revising = false;
     trs.clear();
-    updateVisibleData();
+    if (data.value.length <= threshold) {
+      state.visibleData = data.value;
+    } else {
+      updateVisibleData();
+    }
     container.value && (container.value.scrollTop = 0);
   });
   let mounted = false;
@@ -260,7 +269,7 @@ const useVirtualScroll = ({
       const entry = entries[0];
       if (entry.isIntersecting || entry.intersectionRatio) {
         mounted = true;
-        refreshContainer();
+        isVirtual.value && refreshContainer();
         ob.unobserve(container.value);
       }
     });

diff --git a/src/table/base-table.tsx b/src/table/base-table.tsx
@@ -115,20 +115,21 @@ export default defineComponent({
       translateY = null,
       handleScroll: handleVirtualScroll = null,
       handleRowMounted = null,
-    } = isVirtual.value
+    } = type === 'virtual'
       ? useVirtualScroll({
         container: tableContentRef,
         data,
         fixedHeight: isFixedRowHeight,
         lineHeight: rowHeight,
         bufferSize,
+        threshold: props.scroll?.threshold,
       })
       : {};
     provide('tableContentRef', tableContentRef);
     provide('rowHeightRef', ref(rowHeight));
 
     let lastScrollY = -1;
-    const onInnerScroll = isVirtual.value
+    const onInnerScroll = type === 'virtual'
       ? (e: WheelEvent) => {
         onTableContentScroll(e);
         const target = (e.target || e.srcElement) as HTMLElement;