LiveWire оптимизиран падащ списък

Показването на хиляди записи в падащо меню обикновено не се препоръчва, защото може да причини проблеми с производителността на вашето приложение. Въпреки това, ако все пак трябва да покажете хиляди записи в падащо меню, можете да използвате техника за виртуално превъртане, за да оптимизирате производителността.

Виртуалното превъртане означава, че изобразявате само записите, които в момента са видими в падащото меню, и докато потребителят превърта, динамично зареждате и изобразявате повече записи. Това може значително да намали количеството DOM елементи, които трябва да бъдат изобразени наведнъж, което може да подобри производителността на вашето приложение.

оптимизирана версия на кода, която зарежда само първите 50 записа първоначално и зарежда следващите 50 записа, когато потребителят превърта:

<div wire:ignore>
    <div style="height: 200px; overflow-y: auto" wire:scroll="loadMore">
        <div style="height: {{ $totalHeight }}px">
            <div style="position: relative" wire:ignore>
                <select wire:model="selectedUser" style="position: absolute; top: {{ $top }}px">
                    <option value="">Select a user</option>
                    @foreach($visibleUsers as $user)
                        <option value="{{ $user->id }}">{{ $user->name }}</option>
                    @endforeach
                </select>
            </div>
        </div>
    </div>
</div>
use Livewire\Component;
use App\Models\User;

class UserDropdown extends Component
{
    public $selectedUser;
    public $users;
    public $visibleUsers = [];
    public $top = 0;
    public $totalHeight = 0;

    public function mount()
    {
        $this->users = User::take(50)->get();
        $this->visibleUsers = $this->getVisibleUsers();
        $this->totalHeight = $this->users->count() * 32; // assuming each option has a height of 32px
    }

    public function render()
    {
        return view('livewire.user-dropdown');
    }

    public function loadMore()
    {
        $start = $this->users->count();
        $end = $start + 50;
        $newUsers = User::skip($start)->take(50)->get();
        $this->users = $this->users->concat($newUsers);
        $this->visibleUsers = $this->getVisibleUsers();
        $this->totalHeight = $this->users->count() * 32; // assuming each option has a height of 32px
    }

    public function getVisibleUsers()
    {
        $start = floor($this->top / 32); // assuming each option has a height of 32px
        $end = min($start + 30, $this->users->count());
        return $this->users->slice($start, $end - $start);
    }

    public function updatedTop()
    {
        $this->visibleUsers = $this->getVisibleUsers();
    }
}

В горния код използваме метода mount() за инициализиране на свойството $users с всички записи от базата данни и за инициализиране на свойствата $visibleUsers и $totalHeight.

Ние също така дефинираме loadMore() метода, който се задейства, когато потребителят превърта, и getVisibleUsers() метода, който изчислява видимите записи въз основа на текущата позиция на превъртане.

В тази оптимизирана версия на кода използваме метода take(), за да заредим само първите 50 записа от базата данни, и метода skip(), за да пропуснем първите 50 записа, когато зареждаме повече записи.

Също така използваме метода concat(), за да свържем новите записи със съществуващите записи, и метода count(), за да изчислим общия брой записи.