Lista virtual

Solo se renderizan los elementos dentro de la ventana visible; admite los modos de altura fija y altura dinámica (el modo dinámico se posiciona mediante offsets precalculados + búsqueda binaria).

Altura fija

Altura fija

Elemento 0 · Elemento 1

Elemento 1 · Elemento 2

Elemento 2 · Elemento 3

Elemento 3 · Elemento 4

<script setup lang="ts">
const listData = Array.from({ length: 1000 }, (_, i) => `Elemento ${i + 1}`)
</script>

<template>
  <LhVirtualList :data="listData" :height="200" :item-height="40">
    <template #default="{ item, index }">
      <div>Elemento {{ index }} · {{ item }}</div>
    </template>
  </LhVirtualList>
</template>

<script>
export default {
  data() {
    return {
      listData: Array.from({ length: 1000 }, (_, i) => `Elemento ${i + 1}`),
    }
  },
}
</script>

<template>
  <LhVirtualList :data="listData" :height="200" :item-height="40">
    <template #default="{ item, index }">
      <div>Elemento {{ index }} · {{ item }}</div>
    </template>
  </LhVirtualList>
</template>

Altura dinámica

itemSize devuelve la altura de cada elemento (puede devolverse de forma dinámica a partir de mediciones).

Altura dinámica

Elemento 1

Elemento 2

Elemento 3

<script setup>
const dynamicSize = (index) => (index % 3 === 0 ? 56 : 36)
</script>

<template>
  <LhVirtualList :data="listData" :height="200" :item-size="dynamicSize">
    <template #default="{ item, index }">{{ item }}</template>
  </LhVirtualList>
</template>

<script>
export default {
  data() {
    return {
      listData: Array.from({ length: 1000 }, (_, i) => `Elemento ${i + 1}`),
    }
  },
  methods: {
    dynamicSize(index) {
      return index % 3 === 0 ? 56 : 36
    },
  },
}
</script>

<template>
  <LhVirtualList :data="listData" :height="200" :item-size="dynamicSize">
    <template #default="{ item, index }">{{ item }}</template>
  </LhVirtualList>
</template>

Búfer de pre-renderizado

overscan indica cuántas filas se pre-renderizan por encima y por debajo de la ventana visible, reduciendo el parpadeo durante el desplazamiento rápido.

overscan

Elemento 0 · Elemento 1

Elemento 1 · Elemento 2

Elemento 2 · Elemento 3

Elemento 3 · Elemento 4

Elemento 4 · Elemento 5

Elemento 5 · Elemento 6

Elemento 6 · Elemento 7

Elemento 7 · Elemento 8

Elemento 8 · Elemento 9

Elemento 9 · Elemento 10

Elemento 10 · Elemento 11

Elemento 11 · Elemento 12

Elemento 12 · Elemento 13

Elemento 13 · Elemento 14

Elemento 14 · Elemento 15

Elemento 15 · Elemento 16

<script setup lang="ts">
const listData = Array.from({ length: 1000 }, (_, i) => `Elemento ${i + 1}`)
</script>

<template>
  <LhVirtualList
    :data="listData"
    :item-height="40"
    :height="200"
    :overscan="8"
  />
</template>

<script>
export default {
  data() {
    return {
      listData: Array.from({ length: 1000 }, (_, i) => `Elemento ${i + 1}`),
    }
  },
}
</script>

<template>
  <LhVirtualList
    :data="listData"
    :item-height="40"
    :height="200"
    :overscan="8"
  />
</template>

API

LhVirtualList 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)	string | number	—
itemHeight	Altura del elemento en el modo de altura fija	number	—
itemSize	Modo de altura dinámica: quien lo invoca devuelve la altura de cada elemento	(index: number) => number	—
overscan	Número de elementos de sobreexploración	number	LH_VIRTUAL_OVERSCAN
sx	Propiedades de diseño rápido sx	LhSxProps	—

Slots: default (con ámbito { item, index }).

Accesibilidad

• El contenedor, con overflow: auto, se puede recorrer con el teclado; los elementos fuera de la ventana no están en el DOM y el lector de pantalla los obtiene bajo demanda (trade-off inherente a las listas largas; se recomienda combinarlo con búsqueda/filtrado para acotar el alcance)
• Si necesitas una tabla semántica completa, utiliza Table (su desplazamiento virtual también está impulsado por funciones puras de la capa core)

Definiciones de tipos

Este componente exporta las siguientes estructuras de tipos TypeScript (extraídas automáticamente de los fuentes packages/components/virtual-list/src/types.ts y @lh-ui/share/core/*; abre cada entrada para ver la definición completa; consulta la tabla de Props de arriba para la descripción de los atributos):

LhVirtualListProps

export interface LhVirtualListProps {
  /** Origen de datos (el renderizado de cada elemento corre a cargo del slot default) */
  data: any[]
  /** Altura del contenedor (un número se interpreta como px) */
  height: number | string
  /** Altura del elemento en el modo de altura fija (es mutuamente excluyente con itemSize; si se proporciona itemSize, se usa altura dinámica) */
  itemHeight?: number
  /** Modo de altura dinámica: quien lo invoca devuelve la altura de cada elemento */
  itemSize?: (index: number) => number
  /** Número de elementos de sobreexploración */
  overscan?: number
  /** Propiedades de diseño rápido sx */
  sx?: LhSxProps
}

Constantes

Las constantes públicas que utiliza este componente (en la columna «Tipo / Predeterminado» de la tabla de Props puedes pulsar el nombre de una constante para saltar hasta aquí):

LH_VIRTUAL_ITEM_SIZE _{(de @lh-ui/share/core/virtual-list)}

/** Altura estimada predeterminada del elemento */
export const LH_VIRTUAL_ITEM_SIZE = 40