< script > export default { name: 'App', data() { return { items: [{ price: '1', name: 'mm' }, { price: '22', name: 'aa' }, { price: '55', name: 'dd' }, { price: '77', name: 'gg' }, { price: '123', name: 'kk' }, { price: '53', name: 'mn' }, { price: '11', name: 'mm' }, { price: '22', name: 'a' }, { price: '33', name: 'd' }, { price: '77', name: 'g' }, { price: '1283', name: 'k' }, { price: '589', name: 'n' } ] } } } < /script> <template> <div id="app"> <div class="wrapper"> <virtual-list class="list" style="height: 360px; overflow-y: auto" :data-key="'item'" :data-sources="item" :data-component="item" :estimate-size="3" /> <div class="item" v-for="item in items" :key="item"> <div class="id">{{ item.price }} {{ item.name }}</div> </div> </div> </div> </template>Estoy tratando de lograr un desplazamiento virtual en vuejs, también puedo mostrar la lista en ui, pero no puedo mostrarlos en desplazamiento virtual. como se muestra en la imagen.
Estoy tratando de lograr un desplazamiento virtual en vuejs, también puedo mostrar la lista en ui, pero no puedo mostrarlos en desplazamiento virtual. como se muestra en la imagen.
intenté instalar: - npm install vue-virtual-scroll-list --save
Debe crear un componente vue para la propiedad data-component como se muestra a continuación:
Artículo.vue
<template> <div class="item"> <span>{{ index }} - {{ source.name }}</span> </div> </template> <script> export default { props: { index: { type: Number, default: 0 }, source: { type: Object, default() { return {} } } } } </script> <style lang="scss" scoped> .item { border-bottom: 1px solid gray; } </style> Y luego úsalo en virtual-list
aplicación.vue
<template> <div id="app"> <div class="wrapper"> <virtual-list class="list" style="height: 360px; overflow-y: auto" data-key="key" :keeps="20" :data-sources="computedItems" :data-component="Item" /> </div> </div> </template> <script> import Item from './Item' export default { name: 'App', data() { return { Item, items: [ { price: '1', name: 'mm' }, { price: '22', name: 'aa' }, { price: '55', name: 'dd' }, { price: '77', name: 'gg' }, { price: '123', name: 'kk' }, { price: '53', name: 'mn' }, { price: '11', name: 'mm' }, { price: '22', name: 'a' }, { price: '33', name: 'd' }, { price: '77', name: 'g' }, { price: '1283', name: 'k' }, { price: '589', name: 'n' } ] } }, computed: { computedItems() { return this.items.map((item, index) => { item.key = `item_${index}` return item }) } } } </script>Si no tiene una clave única para cada elemento, cree un método calculado para agregarlo como en el ejemplo.
Aquí está el código