Lista virtual

Solución de rendimiento para listas largas: solo se renderizan los elementos del área visible. En el modo de altura fija se usa itemHeight, y en el modo de altura variable, la función itemSize.

Lista virtual

<template>
  <div class="demo-col">
    <p class="demo-note">Modo de altura fija: itemHeight + overscan; con un millar de datos solo se renderiza el área visible</p>
    <LhVirtualList :data="items" :height="240" :item-height="36" :overscan="6">
      <template #default="{ item, index }">
        <div class="vl-item" :style="{ background: index % 2 ? 'transparent' : 'var(--lh-fill-color, #f6f1ea)' }">
          {{ index + 1 }}. {{ item }}
        </div>
      </template>
    </LhVirtualList>
    <p class="demo-note">Modo de altura variable: itemSize devuelve la altura de cada elemento</p>
    <LhVirtualList :data="items" :height="200" :item-size="sizeOf">
      <template #default="{ item, index }">
        <div class="vl-item" :style="{ height: sizeOf(index) + 'px' }">
          {{ index + 1 }}. {{ item }} (alto {{ sizeOf(index) }}px)
        </div>
      </template>
    </LhVirtualList>
  </div>
</template>

<script>
export default {
  data: () => ({
    items: Array.from({ length: 1000 }, (_, i) => `Obra ${i + 1}`),
  }),
  methods: {
    sizeOf(index) {
      return 28 + (index % 5) * 14
    },
  },
}
</script>

Props

Prop	Descripción	Tipo	Predeterminado
data	Origen de datos (el renderizado de cada elemento corre a cargo del slot default)	any[]	—
height	Altura del contenedor (un número se interpreta como px)	number \| string	—
itemHeight	Altura de los elementos en el modo de altura fija (mutuamente excluyente con itemSize; si se define itemSize, se usa la altura variable)	number	—
itemSize	Modo de altura variable: quien llama devuelve la altura de cada elemento	(index: number) => number	—
overscan	Número de elementos de sobreexploración	number	—
sx	Prop abreviada de maquetación	—	—

Slots

Slot por defecto (parámetros de alcance: item, el elemento de datos; index, el índice): renderizado de los elementos de la lista.

Consejo

El .vl-item del ejemplo es un estilo de demostración; la biblioteca no lo proporciona.