如何在 v-data-table 上使用 v-lazy？

Question

我正在使用 v-expansion-panels，当它打开时加载一个 v-data-table，总是显示所有所以有时它可能是太多数据，所以我想添加一个 v-lazy 组件，我如何可以添加吗？

<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>`

我尝试用计算方法拼接项目：

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

但只加载50个

Answer 1

您可以按照数据表-服务器端表了解解决您的问题。基本上，当您获取按照

pageNumber

、

pageSize

过滤的数据时，您应该有

pageNumber

和

pageSize

（每页项目）。然后，你就可以得到数据了

pageSize

。

例如，如果 pageSize = 10，pageNumber = 1，您将获取从 1 到 10 的数据，而 pageSize = 10，pageNumber = 2，您将获取从 11 到 20 的数据，而不是全部。