vue-virtual-list

DynamicHeight is broken atm.

1. Install component

npm install vue-virtual-list

If you have mixed heights on your rows then you need to specify h (Number) property on your object with the height.

2. Setup your app

<template>
  <div id="app">
    <vue-virtual-list>
        <div v-for="item of items">{{item.name}}</div> 
    </vue-virtual-list>
  </div>
</template>

<script>
import vl from 'vue-virtual-list'

export default {
  components: {
    vl
  },
  data () {
    var items = []
    for (var i = 0; i < 50; i++) {
      items.push({name: 'item' + i, h: 20})
    }

    return {
      items: items,
    }
  }
}
</script>

Component properties

| Name | Type | Default | | ------------- |:-------------:| -----:| | scroll | String | None, this prop is required can either be window or container. | | scrollContainerHegiht | Number | Defaults to 500 and is only required if you use scroll container | | dynamicHeight | Boolean | Defaults to true this requires that you specify height on your objects. | | rowHeight | Number | Defaults to 0 and is only required if you set objectHeight to false|