fix: select dynamic virtual list

components/vc-virtual-list/List.tsx

@@ -9,6 +9,7 @@ import {
   onBeforeUnmount,
   reactive,
   CSSProperties,
+  watch,
 } from 'vue';
 import { Key } from '../_util/type';
 import Filler from './Filler';
@@ -53,10 +54,9 @@ function renderChildren<T>(
   });
 }
 
-export interface ListState<T = object> {
+export interface ListState {
   scrollTop: number;
   scrollMoving: boolean;
-  mergedData: T[];
 }
 
 const List = defineComponent({
@@ -97,7 +97,10 @@ const List = defineComponent({
     const state = reactive<ListState>({
       scrollTop: 0,
       scrollMoving: false,
-      mergedData: computed(() => props.data || EMPTY_DATA) as any,
+    });
+
+    const mergedData = computed(() => {
+      return props.data || EMPTY_DATA;
     });
 
     const componentRef = ref<HTMLDivElement>();
@@ -108,7 +111,7 @@ const List = defineComponent({
       if (typeof props.itemKey === 'function') {
         return props.itemKey(item);
       }
-      return item[props.itemKey];
+      return item?.[props.itemKey];
     };
 
     const sharedConfig = {
@@ -135,83 +138,94 @@ const List = defineComponent({
     // ================================ Height ================================
     const [setInstance, collectHeight, heights] = useHeights(getKey, null, null);
 
-    const calRes = ref();
+    const calRes = ref<{
-    watchEffect(() => {
+      scrollHeight?: number;
-      if (!useVirtual.value) {
+      start?: number;
-        calRes.value = {
+      end?: number;
-          scrollHeight: undefined,
+      offset?: number;
-          start: 0,
+    }>({});
-          end: state.mergedData.length - 1,
+    watch(
-          offset: undefined,
+      [inVirtual, useVirtual, () => state.scrollTop, mergedData, heights, () => props.height],
-        };
+      () => {
-        return;
+        if (!useVirtual.value) {
-      }
+          calRes.value = {
-
+            scrollHeight: undefined,
-      // Always use virtual scroll bar in avoid shaking
+            start: 0,
-      if (!inVirtual.value) {
+            end: mergedData.value.length - 1,
-        calRes.value = {
+            offset: undefined,
-          scrollHeight: fillerInnerRef.value?.offsetHeight || 0,
+          };
-          start: 0,
+          return;
-          end: state.mergedData.length - 1,
-          offset: undefined,
-        };
-        return;
-      }
-
-      let itemTop = 0;
-      let startIndex: number | undefined;
-      let startOffset: number | undefined;
-      let endIndex: number | undefined;
-      const dataLen = state.mergedData.length;
-      for (let i = 0; i < dataLen; i += 1) {
-        const item = state.mergedData[i];
-        const key = getKey(item);
-
-        const cacheHeight = heights[key];
-        const currentItemBottom =
-          itemTop + (cacheHeight === undefined ? props.itemHeight! : cacheHeight);
-
-        if (currentItemBottom >= state.scrollTop && startIndex === undefined) {
-          startIndex = i;
-          startOffset = itemTop;
         }
 
-        // Check item bottom in the range. We will render additional one item for motion usage
+        // Always use virtual scroll bar in avoid shaking
-        if (currentItemBottom > state.scrollTop + props.height! && endIndex === undefined) {
+        if (!inVirtual.value) {
-          endIndex = i;
+          calRes.value = {
+            scrollHeight: fillerInnerRef.value?.offsetHeight || 0,
+            start: 0,
+            end: mergedData.value.length - 1,
+            offset: undefined,
+          };
+          return;
         }
 
-        itemTop = currentItemBottom;
+        let itemTop = 0;
-      }
+        let startIndex: number | undefined;
+        let startOffset: number | undefined;
+        let endIndex: number | undefined;
+        const dataLen = mergedData.value.length;
+        const data = mergedData.value;
+        for (let i = 0; i < dataLen; i += 1) {
+          const item = data[i];
+          const key = getKey(item);
 
-      // Fallback to normal if not match. This code should never reach
+          const cacheHeight = heights[key];
-      /* istanbul ignore next */
+          const currentItemBottom =
-      if (startIndex === undefined) {
+            itemTop + (cacheHeight === undefined ? props.itemHeight! : cacheHeight);
-        startIndex = 0;
-        startOffset = 0;
-      }
-      if (endIndex === undefined) {
-        endIndex = state.mergedData.length - 1;
-      }
 
-      // Give cache to improve scroll experience
+          if (currentItemBottom >= state.scrollTop && startIndex === undefined) {
-      endIndex = Math.min(endIndex + 1, state.mergedData.length);
+            startIndex = i;
-      calRes.value = {
+            startOffset = itemTop;
-        scrollHeight: itemTop,
+          }
-        start: startIndex,
+
-        end: endIndex,
+          // Check item bottom in the range. We will render additional one item for motion usage
-        offset: startOffset,
+          if (currentItemBottom > state.scrollTop + props.height! && endIndex === undefined) {
-      };
+            endIndex = i;
-    });
+          }
+
+          itemTop = currentItemBottom;
+        }
+
+        // Fallback to normal if not match. This code should never reach
+        /* istanbul ignore next */
+        if (startIndex === undefined) {
+          startIndex = 0;
+          startOffset = 0;
+        }
+        if (endIndex === undefined) {
+          endIndex = dataLen - 1;
+        }
+
+        // Give cache to improve scroll experience
+        endIndex = Math.min(endIndex + 1, dataLen);
+        calRes.value = {
+          scrollHeight: itemTop,
+          start: startIndex,
+          end: endIndex,
+          offset: startOffset,
+        };
+      },
+      { immediate: true },
+    );
 
     // =============================== In Range ===============================
     const maxScrollHeight = computed(() => calRes.value.scrollHeight! - props.height!);
 
     function keepInRange(newScrollTop: number) {
-      let newTop = Math.max(newScrollTop, 0);
+      let newTop = newScrollTop;
       if (!Number.isNaN(maxScrollHeight.value)) {
         newTop = Math.min(newTop, maxScrollHeight.value);
       }
+      newTop = Math.max(newTop, 0);
       return newTop;
     }
 
@@ -226,8 +240,7 @@ const List = defineComponent({
       syncScrollTop(newTop);
     }
 
-    // This code may only trigger in test case.
+    // When data size reduce. It may trigger native scroll event back to fit scroll position
-    // But we still need a sync if some special escape
     function onFallbackScroll(e: UIEvent) {
       const { scrollTop: newScrollTop } = e.currentTarget as Element;
       if (Math.abs(newScrollTop - state.scrollTop) >= 1) {
@@ -299,7 +312,7 @@ const List = defineComponent({
     // ================================= Ref ==================================
     const scrollTo = useScrollTo(
       componentRef,
-      state,
+      mergedData,
       heights,
       props,
       getKey,
@@ -328,6 +341,7 @@ const List = defineComponent({
 
     return {
       state,
+      mergedData,
       componentStyle,
       scrollTo,
       onFallbackScroll,
@@ -360,7 +374,7 @@ const List = defineComponent({
       ...restProps
     } = { ...this.$props, ...this.$attrs } as any;
     const mergedClassName = classNames(prefixCls, className);
-    const { scrollTop, mergedData } = this.state;
+    const { scrollTop } = this.state;
     const { scrollHeight, offset, start, end } = this.calRes;
     const {
       componentStyle,
@@ -370,6 +384,7 @@ const List = defineComponent({
       collectHeight,
       sharedConfig,
       setInstance,
+      mergedData,
     } = this;
     const listChildren = renderChildren(
       mergedData,

components/vc-virtual-list/ScrollBar.tsx

@@ -208,37 +208,34 @@ export default defineComponent({
       const ptg = scrollTop / enableScrollRange;
       return ptg * enableHeightRange;
     },
-    // Not show scrollbar when height is large thane scrollHeight
+    // Not show scrollbar when height is large than scrollHeight
-    getVisible() {
+    showScroll() {
-      const { visible } = this.state;
       const { height, scrollHeight } = this.$props;
-
+      return scrollHeight > height;
-      if (height >= scrollHeight) {
-        return false;
-      }
-
-      return visible;
     },
   },
 
   render() {
     // eslint-disable-next-line no-unused-vars
-    const { dragging } = this.state;
+    const { dragging, visible } = this.state;
     const { prefixCls } = this.$props;
     const spinHeight = this.getSpinHeight() + 'px';
     const top = this.getTop() + 'px';
-    const visible = this.getVisible();
+    const canScroll = this.showScroll();
+    const mergedVisible = canScroll && visible;
     return (
       <div
         ref={this.scrollbarRef}
-        class={`${prefixCls}-scrollbar`}
+        class={classNames(`${prefixCls}-scrollbar`, {
+          [`${prefixCls}-scrollbar-show`]: canScroll,
+        })}
         style={{
           width: '8px',
           top: 0,
           bottom: 0,
           right: 0,
           position: 'absolute',
-          display: visible ? undefined : 'none',
+          display: mergedVisible ? undefined : 'none',
         }}
         onMousedown={this.onContainerMouseDown}
         onMousemove={this.delayHidden}

components/vc-virtual-list/hooks/useScrollTo.tsx

@@ -1,12 +1,11 @@
 import { Data } from '../../_util/type';
-import { Ref } from 'vue';
+import { ComputedRef, Ref } from 'vue';
 import raf from '../../_util/raf';
 import { GetKey } from '../interface';
-import { ListState } from '../List';
 
 export default function useScrollTo(
   containerRef: Ref<Element | undefined>,
-  state: ListState,
+  mergedData: ComputedRef<any[]>,
   heights: Data,
   props,
   getKey: GetKey,
@@ -25,7 +24,7 @@ export default function useScrollTo(
 
     // Normal scroll logic
     raf.cancel(scroll!);
-    const data = state.mergedData;
+    const data = mergedData.value;
     const itemHeight = props.itemHeight;
     if (typeof arg === 'number') {
       syncScrollTop(arg);
@@ -58,7 +57,9 @@ export default function useScrollTo(
           let itemTop = 0;
           let itemBottom = 0;
 
-          for (let i = 0; i <= index; i += 1) {
+          const maxLen = Math.min(data.length, index);
+
+          for (let i = 0; i <= maxLen; i += 1) {
             const key = getKey(data[i]);
             itemTop = stackTop;
             const cacheHeight = heights[key!];