Laravel自定义table组件插槽无法访问foreach当前迭代$tr数据如何解决

你需要使用Laravel Blade提供的作用域插槽功能，将组件循环内的当前迭代数据传递到插槽作用域中，实现步骤如下：

1. 修改table组件代码 #

将组件内的插槽调用改为闭包调用形式，把需要暴露的迭代变量作为参数传入插槽：

<table>
    @foreach($rowsArray as $tr)
        <tr>
            @foreach($tr as $td_key => $td_value)
                <td>
                    @if(isset($customSlot))
                        {{-- 传递当前迭代的$tr、字段键、字段值给插槽 --}}
                        {{ $customSlot(compact('tr', 'td_key', 'td_value')) }}
                    @else
                        {{ $td_value }}
                    @endif
                </td>
            @endforeach
        </tr>
    @endforeach
</table>

2. 调用组件时接收插槽参数 #

定义插槽时通过scope属性接收组件传递过来的参数，即可直接访问当前循环的$tr数据：

基础写法（兼容所有支持作用域插槽的Laravel版本） #

<x-table :rows="$rowsArray">
  <x-slot name="customSlot" scope="slotData">
    <div class="flex">
      <span>
          {{ $slotData['tr']['name'] }}
      </span>
      <span>
          {{ $slotData['tr']['age'] }} age
      </span>
    </div>
  </x-slot>
</x-table>

简化解构写法（Laravel 8+ 支持） #

可以直接在scope里解构参数，直接使用$tr变量，和你原本的写法一致：

<x-table :rows="$rowsArray">
  <x-slot name="customSlot" scope="['tr' => $tr]">
    <div class="flex">
      <span>
          {{ $tr['name'] }}
      </span>
      <span>
          {{ $tr['age'] }} age
      </span>
    </div>
  </x-slot>
</x-table>

额外优化说明 #

如果你实际需求是每行仅输出一个包含完整自定义布局的td（而非每个字段对应一个重复布局的td），可以去掉组件内部@foreach($tr as $td_key => $td_value)的循环，直接在tr内写单个td调用插槽即可，避免重复渲染相同内容。

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