Guide

Install#

npm#

# Vue3
npm i --save @virtual-list/vue
# Vue2
npm i --save @virtual-list/vue @vue/composition-api

CDN#

Vue3: example
Vue2: example

Import#

// vue3
import VirtualList from '@virtual-list/vue'
// vue2
import VirtualList from '@virtual-list/vue/vue2'

props#

items#

Type: Array as PropType<any[]>
The array data to display.

disabled#

Type: Boolean
When disabled, all items are rendered like a normal html list.

horizontal#

Type: Boolean
Display horizontally.

firstRender#

Type: Number. Default: 10
Render count at start. For ssr.

buffer#

Type: Number. Default: 100
Visible area + buffer area = render area.

itemKey#

Type: [String, Function] as PropType< "index" | ((item: any, index: number) => any) >
Set the key for each item. No key by default. Can be string index, use index as key. Can be a function which return the key.

table#

Type: Boolean
Render as table.

itemSize#

Type: Function as PropType< (item: any, index: number) => number | null | undefined | void >
Return height/width of each item. Not recommended, beacause it can get runtime size automatically.

Examples#

Affected by the global CSS of this site, the style of the example is slightly different from the actual style.

Horizontal#

ITEM: 0 - Item 0

ITEM: 1 - Item 1

ITEM: 2 - Item 2

ITEM: 3 - Item 3

ITEM: 4 - Item 4

ITEM: 5 - Item 5

ITEM: 6 - Item 6

ITEM: 7 - Item 7

ITEM: 8 - Item 8

ITEM: 9 - Item 9

ITEM: 10 - Item 10

ITEM: 11 - Item 11

ITEM: 12 - Item 12

ITEM: 13 - Item 13

<template>
  <v-list :items="items" horizontal>
    <template #default="{ item, index }">
      <div style="border: 1px solid #ccc" :style="{ width: item.width }">
        ITEM: {{ index }} - {{ item['text'] }}
      </div>
    </template>
  </v-list>
</template>
<script>
  import VirtualList from '@virtual-list/vue'

  export default {
    components: { 'v-list': VirtualList },
    data() {
      return {
        items: new Array(1000).fill(1).map((v, i) => ({
          text: 'Item ' + i,
          lineHeight: 20 + (i % 20) + 'px',
          width: 100 + (i % 30) + 'px',
        })),
      }
    },
  }
</script>

Vertical#

ITEM: 0 - Item 0

ITEM: 1 - Item 1

ITEM: 2 - Item 2

ITEM: 3 - Item 3

ITEM: 4 - Item 4

ITEM: 5 - Item 5

ITEM: 6 - Item 6

ITEM: 7 - Item 7

ITEM: 8 - Item 8

ITEM: 9 - Item 9

ITEM: 10 - Item 10

ITEM: 11 - Item 11

ITEM: 12 - Item 12

ITEM: 13 - Item 13

ITEM: 14 - Item 14

ITEM: 15 - Item 15

ITEM: 16 - Item 16

ITEM: 17 - Item 17

ITEM: 18 - Item 18

ITEM: 19 - Item 19

ITEM: 20 - Item 20

ITEM: 21 - Item 21

ITEM: 22 - Item 22

ITEM: 23 - Item 23

ITEM: 24 - Item 24

ITEM: 25 - Item 25

ITEM: 26 - Item 26

ITEM: 27 - Item 27

<template>
  <v-list :items="items" style="height: 600px">
    <template #default="{ item, index }">
      <div
        style="border: 1px solid #ccc"
        :style="{ lineHeight: item.lineHeight }"
      >
        ITEM: {{ index }} - {{ item['text'] }}
      </div>
    </template>
  </v-list>
</template>
<script>
  import VirtualList from '@virtual-list/vue'

  export default {
    components: { 'v-list': VirtualList },
    data() {
      return {
        items: new Array(1000).fill(1).map((v, i) => ({
          text: 'Item ' + i,
          lineHeight: 20 + (i % 20) + 'px',
          width: 100 + (i % 30) + 'px',
        })),
      }
    },
  }
</script>

Table#

Text	Index
0	ITEM: 0 - Item 0
1	ITEM: 1 - Item 1
2	ITEM: 2 - Item 2
3	ITEM: 3 - Item 3
4	ITEM: 4 - Item 4
5	ITEM: 5 - Item 5
6	ITEM: 6 - Item 6
7	ITEM: 7 - Item 7
8	ITEM: 8 - Item 8
9	ITEM: 9 - Item 9
10	ITEM: 10 - Item 10
11	ITEM: 11 - Item 11
12	ITEM: 12 - Item 12
13	ITEM: 13 - Item 13
14	ITEM: 14 - Item 14
15	ITEM: 15 - Item 15
16	ITEM: 16 - Item 16
17	ITEM: 17 - Item 17
18	ITEM: 18 - Item 18
19	ITEM: 19 - Item 19

<template>
  <v-list :items="items" table class="list-table" style="height: 600px">
    <template #prepend>
      <thead>
        <tr>
          <th>Text</th>
          <th>Index</th>
        </tr>
      </thead>
    </template>
    <template #default="{ item, index }">
      <tr>
        <td>{{ index }}</td>
        <td>ITEM: {{ index }} - {{ item['text'] }}</td>
      </tr>
    </template>
  </v-list>
</template>
<script>
  import VirtualList from '@virtual-list/vue'

  export default {
    components: { 'v-list': VirtualList },
    data() {
      return {
        items: new Array(1000).fill(1).map((v, i) => ({
          text: 'Item ' + i,
          lineHeight: 20 + (i % 20) + 'px',
          width: 100 + (i % 30) + 'px',
        })),
      }
    },
  }
</script>
<style>
  .list-table table,
  .list-table td,
  .list-table th {
    border: 1px solid #ccc;
  }
  .list-table table {
    border-collapse: collapse;
    width: 100%;
  }
</style>