使用作用域插槽自定义表格操作 | Laravel.io

在构建可重用Laravel Blade组件时，通常需要定义默认的渲染和行为，例如按钮或操作。然而，有时您可能需要灵活地覆盖或自定义这些默认值。这就是局部插槽的用武之地。

在组件中添加局部插槽

让我们扩展我的上一博客文章中的TBODY组件，以获得局部插槽的功能。对于'操作'列，它会检查是否提供了自定义的$actions局部插槽，如果是，则渲染该插槽。否则，它会渲染默认的查看/编辑/删除操作。

对于其他列，它显示记录对象中的单元格数据。在遍历记录后，如果没有记录，则会渲染一个包含“没有找到记录”消息的单行。

$slot变量允许消费组件在需要时注入自定义内容。

@props(['columns', 'records'])  

<tbody {{ $attributes->merge(['id' => 'table-body']) }}>  
    @if(isset($records))  
        @forelse ($records as $record)  
            <x-table.tr id="row-{{ $record->id }}">  
                @foreach($columns as $column)  
                    <x-table.td>  
                        @if($column === 'actions')  
                            @if(isset($actions))  
                                {{ $actions($record) }}  
                            @else  
                                <x-table.actions.view :record="$record"/>  
                                <x-table.actions.edit :record="$record"/>  
                                <x-table.actions.delete :record="$record"/>  
                            @endif  
                        @else                            
                            {{ $record->{$column} }}  
                        @endif  
                    </x-table.td>  
                @endforeach  
            </x-table.tr>  
        @empty  
            <x-table.tr>  
                <x-table.td colspan="100%">No record found.</x-table.td>  
            </x-table.tr>  
        @endforelse  
    @endif    

    {{ $slot }}  
</tbody>

总之，这通过遍历记录和列来处理表格主体的渲染。它还允许通过局部插槽覆盖操作列，并显示默认的空状态。

将数据传递给局部插槽

表格组件允许使用局部插槽自定义操作列。然而，局部插槽需要访问当前记录数据以渲染操作。

在撰写此博客文章时，我找不到直接将数据传递给范围插槽的方法。有任何直接方法。但是，一个有用的包提供了Blade宏，可以实现此功能。

现在，@scopedSlot指令可以接受一个参数，从tbody组件获取$record变量。在范围插槽内部，可以使用$record构建自定义操作。默认视图操作仍然用于保持一致性。

因此，整个表格以正常方式渲染，显示了联系数据。但只有操作列被范围插槽替代。这允许在重用表格组件的其他部分的同时进行自定义操作。$record变量将必要的数据传递到范围插槽。

<div id="table-container" 
     hx-get="{{ route('contacts.index') }}" 
     hx-trigger="loadContacts from:body">  

    <x-table :columns="['name', 'email', 'phone', 'address', 'actions']">  

        <x-table.tbody :records="$contacts">  

          @scopedSlot('actions', ($record)) 
             <x-table.actions.view :record="$record"/>  
             <a href="{{ route('contacts.edit', $record->id)}}">
                 Custom Edit :)
             </a> 
          @endScopedSlot 

        </x-table.tbody>  

    </x-table>  

    <div id="pagination-links" class="p-3" 
        hx-boost="true" 
        hx-target="#table-container">  
        {{ $contacts->links() }}  
    </div>  

</div>

这实现了操作的按需定制，同时保持了一致且可重用的表格结构。范围插槽仅处理所需的定向定制。

在没有包的情况下向范围插槽传递数据

您还可以实现范围插槽来传递数据，而无需第三方包。这涉及到在Blade模板中使用PHP的一个小技巧。

<div id="table-container" 
     hx-get="{{ route('contacts.index') }}" 
     hx-trigger="loadContacts from:body">  

    <x-table :columns="['name', 'email', 'phone', 'address', 'actions']">  

        <x-table.tbody :records="$contacts">  

              <?php  $__env->slot('actions', function($record) use ($__env) { ?>  
                    <x-table.actions.view :record="$record"/>  
                    <a href="{{ route('contacts.edit', $record->id)}}">
                         Custom Edit :)
                    </a> 
              <?php }); ?> 

        </x-table.tbody>  

    </x-table>  

    <div id="pagination-links" class="p-3" 
       ...
    </div>  

</div>

虽然有点小漏洞，但这允许在不添加包的情况下将数据传递给范围插槽。@env指令处理注入插槽内容。

总之