VirtualList 가상 리스트

원문 보기 위키 갱신 2026.10.11

가상 리스트 무한 스크롤이에요.

출처: 문서

본문

언제 사용하나요

대량의 리스트 데이터를 표시할 때

기본 사용법

:::demo 대량의 데이터를 렌더링해요

<template>
  <div style="margin-bottom: 12px">
    <d-input-number v-model="num" placeholder="请输入" :min="0" :max="data.length - 1" size="sm" />
    <d-button @click="onScrollTo" size="sm" style="margin-left: 6px;">Scroll to</d-button>
  </div>
  <d-virtual-list :data="data" ref="vlRef">
    <template #item="{ value }">
      <div>children{{ value }}</div>
    </template>
  </d-virtual-list>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const data = ref(Array.from({ length: 100000 }).map((_, index) => ({ value: index })));
    const num = ref(0);
    const vlRef = ref(null);
    const onScrollTo = () => {
      vlRef.value.scrollTo(num.value);
    };
    return { data, num, vlRef, onScrollTo };
  },
};
</script>

:::

VirtualList 파라미터

파라미터	타입	기본값	설명	Demo 링크
data	`Array<Object>`	[]	데이터 배열	기본 사용법
component	`string`	div	스크롤 태그 정의	기본 사용법
height	`number`	100	스크롤 영역 높이	기본 사용법
virtual	`boolean`	true	가상 스크롤 사용 여부	기본 사용법
item-height	`number`	20	개별 리스트 항목 높이

VirtualList 메서드

메서드명	설명	파라미터
scrollTo	지정 항목으로 스크롤	index: 스크롤할 항목 인덱스

VirtualList 이벤트

이벤트	타입	설명	Demo 링크
scroll	`(e: Event) => void`	스크롤 이벤트	기본 사용법
show-change	`(renderList: Array<Object>, allList: Array<Object>) => void`	현재 가상 스크롤 렌더링 데이터	기본 사용법

VirtualList 슬롯

이름	기본값	설명	Demo 링크
item	--	기본 콘텐츠 커스텀	기본 사용법

더 알아보기 (Learn more)

수만 건 데이터도 가상 스크롤로 부드럽게 그려 줘요. ref로 컴포넌트 인스턴스를 받아 scrollTo(index)로 원하는 항목으로 바로 이동할 수 있어요.