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,13 +138,20 @@ const List = defineComponent({
     // ================================ Height ================================
     const [setInstance, collectHeight, heights] = useHeights(getKey, null, null);
 
-    const calRes = ref();
+    const calRes = ref<{
-    watchEffect(() => {
+      scrollHeight?: number;
+      start?: number;
+      end?: number;
+      offset?: number;
+    }>({});
+    watch(
+      [inVirtual, useVirtual, () => state.scrollTop, mergedData, heights, () => props.height],
+      () => {
         if (!useVirtual.value) {
           calRes.value = {
             scrollHeight: undefined,
             start: 0,
-          end: state.mergedData.length - 1,
+            end: mergedData.value.length - 1,
             offset: undefined,
           };
           return;
@@ -152,7 +162,7 @@ const List = defineComponent({
           calRes.value = {
             scrollHeight: fillerInnerRef.value?.offsetHeight || 0,
             start: 0,
-          end: state.mergedData.length - 1,
+            end: mergedData.value.length - 1,
             offset: undefined,
           };
           return;
@@ -162,9 +172,10 @@ const List = defineComponent({
         let startIndex: number | undefined;
         let startOffset: number | undefined;
         let endIndex: number | undefined;
-      const dataLen = state.mergedData.length;
+        const dataLen = mergedData.value.length;
+        const data = mergedData.value;
         for (let i = 0; i < dataLen; i += 1) {
-        const item = state.mergedData[i];
+          const item = data[i];
           const key = getKey(item);
 
           const cacheHeight = heights[key];
@@ -191,27 +202,30 @@ const List = defineComponent({
           startOffset = 0;
         }
         if (endIndex === undefined) {
-        endIndex = state.mergedData.length - 1;
+          endIndex = dataLen - 1;
         }
 
         // Give cache to improve scroll experience
-      endIndex = Math.min(endIndex + 1, state.mergedData.length);
+        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!];