如何给Laravel PowerGrid表格的分页/每页条数切换添加加载动画？

问题说明 #

Laravel新手使用PowerGrid组件展示员工数据表，页面初始加载时骨架动画正常，但切换「每页条数」或分页时，加载骨架未显示。尝试绑定perPage属性到wire:loading未生效。

正确实现步骤 #

1. 明确触发加载的目标属性 #

PowerGrid中，分页切换对应内部属性page，每页条数变更对应perPage，需要同时监听这两个属性的变化来触发加载动画。

2. 调整加载组件的调用逻辑 #

无需修改PowerGrid核心组件代码，只需在调用PowerGrid的Blade视图中，添加全局加载骨架并指定正确的wire:target：

<div class="relative">
    {{-- 加载骨架：监听page和perPage的变更 --}}
    <div wire:loading wire:target="page, perPage" class="absolute inset-0 bg-white/90 z-10 flex items-center justify-center">
        @include('components.table-loading')
    </div>

    {{-- PowerGrid表格组件 --}}
    <livewire:powergrid-table />
</div>

3. 优化加载组件样式（可选） #

为让加载骨架更贴合表格布局，可调整table-loading.blade.php的结构，使其与实际表格列数、行数匹配：

<div class="p-4 w-full">
    @for ($i = 0; $i < 10; $i++)
        <div class="flex items-center gap-6 py-3 border-b border-gray-200">
            <div class="h-4 bg-gray-300 rounded-full dark:bg-neutral-500 w-8"></div>
            <div class="h-4 bg-gray-300 rounded-full dark:bg-neutral-500 w-64"></div>
        </div>
    @endfor
</div>

4. 验证效果 #

切换分页按钮或调整每页条数时，加载骨架会自动显示，直到新数据加载完成后隐藏。

补充说明 #

如果希望过滤、排序操作也触发加载动画，只需在wire:target中添加对应的属性，例如：

wire:target="page, perPage, sortField, sortDirection, year, month"

内容的提问来源于stack exchange，提问作者Ermuun