Table of contents
Advantages
-
Only 3 required props, simple and very easy to use.
-
Big data list with high render performance and efficient.
-
You don't have to care about item size, it will calculate automatic.
Live demo
https://tangbc.github.io/vue-virtual-scroll-list
https://codesandbox.io/s/live-demo-virtual-list-e1ww1
What's new in v2.0
Here are the major of update informations with release v2.0.
Since the v2.0 is not compatible with v1.x, please note before upgrading, v1.x documentation see v1.x.md.
Simple usage
npm install vue-virtual-scroll-list --save
Root component:
<template>
<div>
<virtual-list style="height: 360px; overflow-y: auto;" // make list scrollable
:data-key="'uid'"
:data-sources="items"
:data-component="itemComponent"
/>
</div>
</template>
<script>
import Item from './Item'
import VirtualList from 'vue-virtual-scroll-list'
export default {
name: 'root',
data () {
return {
itemComponent: Item,
items: [{uid: 'unique_1', text: 'abc'}, {uid: 'unique_2', text: 'xyz'}, ...]
}
},
components: { 'virtual-list': VirtualList }
}
</script>
Item component:
<template>
<div>{{ index }} - {{ source.text }}</div>
</template>
<script>
export default {
name: 'item-component',
props: {
index: { // index of current item
type: Number
},
source: { // here is: {uid: 'unique_1', text: 'abc'}
type: Object,
default () {
return {}
}
}
}
}
</script>
More usages or getting start you can refer to these clearly examples.
Props type
Required props
| Prop | Type | Description |
|---|---|---|
data-key |
String|Function | The unique key get from data-sources in each data object. Or a function called with each data-source and return their unique key. Its value must be unique in data-sources, it is used for identifying item size. |
data-sources |
Array[Object] | The source array built for list, each array data must be an object and has an unique key get or generate for data-key property. |
data-component |
Component | The render item component created / declared by vue, and it will use the data object in data-sources as render prop and named: source. |
Optional props
Public methods
Attentions
This component use an in-place patch strategy to render list instead of v-for and :key. This way achieves the best efficient, but only suitable when your list output does not rely on item component inner state or temporary DOM state (e.g. form input values).
But how to deal with such a situation? Without maintaining inner state, recommend to use props and dispatch (stateless component), here is an example keep-state.
Contributions
Welcome to improve this component with any issue, pull request or code review.
Changelogs
Maintain and update occasionally, for changes see release.