php - 无法通过选中全选复选框将选定的行发送到子组件

Question

描述

我需要将选定的行发送到子组件，该组件负责显示确认模式，显示选定用户的计数，将导出谁的数据。我正在使用全选复选框功能来选择所有行。当我在每页结果设置为 5 时选择所有 12 行，然后打开模式时，它只显示选择了 5 行，但是当我将每页结果设置为 25 时，它显示所有 12行已被选中。但是在我手动选择行的情况下，无论每页的结果设置为什么，它都会向我显示所有选定的行。为什么会发生这种行为。

重现的具体步骤

• 当每页结果设置为 5 时选择所有行。

• 当每页结果设置为 25 时选择所有行时。

• 当每页结果设置为任何值时手动选择行时。

精简、可复制粘贴的代码片段

• 具有批量操作特征

trait WithBulkActions
{
    public $selectPage = false;
    public $selectAll = false;
    public $selected = [];

    public function renderingWithBulkActions()
    {
        if ($this->selectAll) $this->selectPageRows();
    }

    public function resetSelected() 
    {
        $this->reset('selected'); 
    }

    public function updatedSelected()
    {
        $this->selectAll = false;
        $this->selectPage = false;
    }

    public function updatedSelectPage($value)
    {
        if ($value) return $this->selectPageRows();

        $this->selectAll = false;
        $this->selected = [];
    }

    public function selectPageRows()
    {
        $this->selected = $this->rows->pluck('id')->map(fn($id) => (string) $id);
    }

    public function selectAll()
    {
        $this->selectAll = true;
    }

    public function getSelectedRowsQueryProperty()
    {
        return (clone $this->rowsQuery)
            ->unless($this->selectAll, fn($query) => $query->whereKey($this->selected));
    }
}

• 子组件类

class UserBulkExportation extends Component
{
    use WithSorting, WithBulkActions, WithPerPagePagination;

    public $showModal = [
        'userBulkExport' => false,
    ];
    public $filters = [
        'search' => "",
        'email' => null,
        'role' => '',
        'date-min' => null,
        'date-max' => null,
    ];

    protected $listeners = [
        'confirmUserBulkExport'
    ];

    public function confirmUserBulkExport($selected)
    {
        $this->selected = $selected;
        $this->showModal['userBulkExport'] = true;
    }

    public function processUserBulkExport()
    {
        return response()->streamDownload(function () {
            $exportCount = $this->selectedRowsQuery->count();

            echo $this->selectedRowsQuery->toCsv();
            $this->showModal['userBulkExport'] = false;

            $this->notify('You\'ve exported '.$exportCount.' users');
        }, 'Users.csv');
        
    }

    public function getRowsQueryProperty()
    {
        $query = User::query()
            ->select('id', 'name', 'email', 'created_at')
            ->withRole()
            ->when($this->filters['search'], fn($query, $search) => $query->where('name', 'like', '%'.$search.'%'))
            ->when($this->filters['email'], fn($query, $email) => $query->where('email', 'like', '%'.$email.'%'))
            ->when($this->filters['role'], fn($query, $role) => $query->where('role_id', $role))
            ->when($this->filters['date-min'], fn($query, $created_at) => $query->where('created_at', '>=', Carbon::createFromFormat('d/m/Y', $created_at)))
            ->when($this->filters['date-max'], fn($query, $created_at) => $query->where('created_at', '<=', Carbon::createFromFormat('d/m/Y', $created_at)));
        
        return $this->applySorting($query);
    }

    public function render()
    {
        return view('livewire.backend.management.audience-management.user-controller-component.user-bulk-exportation');
    }
}

• 子组件视图

<div>
    <form wire:submit.prevent="processUserBulkExport">
        <x-modal.confirmation wire:model.defer="showModal.userBulkExport">
            <x-slot name="title">Export</x-slot>

            <x-slot name="content">
                Are you sure you want to export {{ $this->selectedRowsQuery->count() }} users?
            </x-slot>

            <x-slot name="footer">
                <x-button.secondary wire:click="$set('showModal.userBulkExport', false)">Cancel</x-button.primary>
                
                <x-button.primary type="submit">Confirm</x-button.primary>
            </x-slot>
        </x-modal.confirmation>
    </form>
</div>

• 父组件视图

@if (count($selected) >= 2)
<x-dropdown label="Bulk Actions">
    <x-dropdown.item type="button" wire:click="$emit('confirmUserBulkExport', {{ json_encode($selected) }})" class="flex items-center space-x-2">
        <x-icon.download class="text-cool-gray-400" /> <span>Export</span>
    </x-dropdown.item>
</x-dropdown>
@endif

语境

• Livewire 版本：2.4.0
• Laravel 版本：8.31.0
• 高山版本：2.8.0
• 浏览器：铬

标签： phplaravellaravel-8laravel-livewire