[Vuejs]-V-for with 3000+ recs loading REALLY slow (12+ seconds)

by

0👍

✅

Looks like using a virtual-scroller was the way to go. I found this one designed for Vue.js that took it from 12 seconds to near instant.

https://github.com/Akryum/vue-virtual-scroller

new html:

<v-container>
<RecycleScroller
   class="scroller"
   :items="oParts"
   :item-size="65"
   key-field="partsid"
   v-slot="{ item }"
   >
   <v-row>
      <v-col>
         <v-checkbox
            value="false"
            :label="item.descript + ' (' + item.partno + ')'"
            :messages="item.partsid + (item.serialized ? ' (serialized)' : '')"
            class="notes-chkBox"
            color="primary"
            @click.capture.stop="btnOKClicked(item)"
            >
         </v-checkbox>
      </v-col>
   </v-row>
</RecycleScroller>  
</v-container>

Leave a comment