How to use v-lazy on a v-data-table?

Question

I'm using v-expansion-panels and when it's open load a v-data-table, where always show ALL so sometimes it could be too many data, so I want to add a v-lazy component, how I can add it?

<v-data-table :headers="headers"
                                  :style="!$vuetify.breakpoint.mobile ? 'width: 40%' : 'width: 100%'"
                                  :items="item.Data"
                                  :items-per-page="-1"
                                  :no-data-text="i18next.t('General:noHayResultados')"
                                  :footer-props="{
                                  itemsPerPageText: i18next.t('General:itemsperpage'),
                                  itemsPerPageAllText: i18next.t('General:todos')
                                  }">

                        <template v-slot:footer.page-text="{pageStart, pageStop, itemsLength}">
                            {{pageStart}} - {{pageStop}} {{i18next.t('General:de').toLowerCase()}} {{itemsLength}}
                        </template>

                    </v-data-table>`

I tried to slice the items in a computed method:

lazyItems() {
      return this.items.slice(0, 50);
    },

but only loaded 50

Answer 1

You can follow in Data table - Server side tables to know resolve your problem. Basically, you should have pageNumber and pageSize (item per page) when you fetch data you filter follow pageNumber, pageSize. Then, you just get data follow pageSize.

Example if pageSize = 10, pageNumber = 1, you get data from 1 to 10, and pageSize = 10, pageNumber = 2, you get data from 11 to 20, not all.