如何在 LitElement 的 vaadin 网格中延迟加载项目

【问题标题】：How to lazy load items in vaadin grid in LitElement如何在 LitElement 的 vaadin 网格中延迟加载项目
【发布时间】：2023-04-02 09:13:01
【问题描述】：

我需要在 LitElement 中以最佳方式呈现无限可滚动数据。 Vaadin-grid 似乎适合用例。然而，数据是巨大的。所以我试图从后端延迟加载数据块。此后端 api 支持以块的形式返回记录（这样在第一次调用时将返回记录总数）。是否有任何可能的方法可以使用 LitElement 从 vaadin-grid 的后端以块的形式延迟加载数据。

【问题讨论】：

是的，没问题。只需转到start.vaadin.com 并创建一个具有主从视图的融合应用程序，您就会看到它是如何工作的

标签： vaadin lit-element vaadin-grid lit

【解决方案1】：

所以这里是来自提到的启动器的一个例子：

  private async getGridData(params: GridDataProviderParams, callback: GridDataProviderCallback) {
    const index = params.page * params.pageSize;
    const data = await SamplePersonEndpoint.list(index, params.pageSize, params.sortOrders as any);
    callback(data ?? []);
  }

如您所见，参数包含 page 和 pageSize，然后可以在后端用于分页。

SampleEndpoint 使用这个：

public List<SamplePerson> list(int offset, int limit, List<GridSorter> sortOrder) {
    Page<SamplePerson> page = service
            .list(PagingUtil.offsetLimitTypeScriptSortOrdersToPageable(offset, limit, sortOrder));
    return page.getContent();
}

【讨论】：