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 |