Как сделать ленивую загрузку в веб-компонентах Lightning?

В этом посте мы поговорим о том, как реализовать Infinity или ленивую загрузку в веб-компоненте Lightning с помощью Lightning Datatable. Ленивая загрузка помогает вам загружать данные только тогда, когда это необходимо. Бесконечная прокрутка (включить бесконечную загрузку) позволяет загружать подмножество данных, а затем загружать дополнительные данные, когда пользователи прокручивают таблицу до конца.

Ленивая загрузка — это метод оптимизации для загрузки контента по запросу. Вместо того, чтобы загружать все данные и отображать их пользователю за один раз, как при массовой загрузке, концепция ленивой загрузки помогает загружать только необходимый раздел и задерживает остальные до тех пор, пока они не потребуются пользователю во время прокрутки.

В этом посте мы узнаем о данные молнии атрибуты включить бесконечную загрузку и загрузить больше смещения.

включить бесконечную загрузку : вы можете загрузить подмножество данных, а затем отобразить больше
когда пользователи прокручивают до конца таблицы. Используйте с обработчиком событий onloadmore для получения дополнительных данных.
нагрузка больше смещения : определяет, когда запускать бесконечную загрузку, исходя из того, на сколько пикселей от нижней части таблицы находится положение прокрутки таблицы. По умолчанию 20
onloadmore : действие запускается, когда бесконечная загрузка загружает больше данных

public with sharing class LazyLoadingLWCController {

    @AuraEnabled(cacheable=true)
    public static List<Account> getAccounts(Integer limitSize, Integer offset){
        List<Account> accountList = [SELECT Id,Name, AnnualRevenue
                                     FROM Account
                                     ORDER BY CreatedDate
                                     LIMIT :limitSize
                                     OFFSET :offset
                                     ];
        return accountList;
    }
}

<template>
    <div style="height:500px">
    <lightning-datatable key-field="Id"
            data={accounts}
            columns={columns}
            enable-infinite-loading
            onloadmore={loadMoreDataHandler}
            hide-checkbox-column="true"
            show-row-number-column="true">
    </lightning-datatable> 
</div>
</template>

Чтобы включить бесконечную прокрутку, укажите enable-infinite-loading и предоставьте обработчик событий с помощью onloadmore.

import { LightningElement, track, wire } from 'lwc';
import getAccounts from '@salesforce/apex/LazyLoadingLWCController.getAccounts';

const columns = [
    { label: 'Id', fieldName: 'Id', type: 'text' },
    { label: 'Name', fieldName: 'Name', type: 'text'},
    { label: 'Annual Revenue', fieldName: 'AnnualRevenue', type: 'text'}
  
];

export default class LazyLoadingLWC extends LightningElement {
    accounts=[];
    error;
    columns = columns;
    rowLimit =20;
    rowOffSet=0;
  
    connectedCallback() {
        this.loadData();
    }

    loadData(){
        return getAccounts({ limitSize: this.rowLimit , offset : this.rowOffSet })
        .then(result => {
            //Updating the accounts array from result as well apart from updating the updatedRecords variable
            let updatedRecords = [...this.accounts, ...result];
            this.accounts = updatedRecords;
            this.error = undefined;
        })
        .catch(error => {
            this.error = error;
            this.accounts = undefined;
        });
    }

    loadMoreDataHandler(event) {
        const currentRecord = this.accounts;
        const { target } = event;
        target.isLoading = true;

        this.rowOffSet = this.rowOffSet + this.rowLimit;
        this.loadData()
            .then(()=> {
                target.isLoading = false;
            });   
    }
}

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="
    <apiVersion>56.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>  
</LightningComponentBundle>