如何在Blade <table>中添加可访问行数据的自定义动作？

问题出在你当前的组件中，actions插槽的作用域是组件顶层，无法直接访问循环内的$row变量。需要将插槽改为作用域插槽，传递当前行的数据给插槽。

步骤1：修改表格组件代码 #

更新组件中渲染actions插槽的逻辑，传递当前行的$row参数：

<table>
  <tbody>
    @foreach ($rows as $row)
      <tr>
        @foreach ($row as $cell)
          <td>{{ $cell }}</td> {{-- 修复原代码未闭合的td标签 --}}
        @endforeach
        @isset($actions)
          <td>
            {{ $actions->with(['row' => $row]) }} {{-- 向插槽传递当前行数据 --}}
          </td>
        @endisset
      </tr>
    @endforeach
  </tbody>
</table>

步骤2：在使用组件时接收行数据 #

通过slot-scope接收插槽传递的row参数，就能在动作中访问对应行的数据了：

<x-components.table :columns="['Title', 'Status', 'Description']" :rows="$data">
  <x-slot name="actions" slot-scope="{ row }"> {{-- 解构接收row参数 --}}
    <a x-on:click="console.log({{ $row['id'] }})">Test</a>
  </x-slot>
</x-components.table>

补充说明 #

• 如果你的$row是Eloquent模型实例，将$row['id']改为$row->id即可。
• 原代码中@foreach ($row as $cell)的<td>标签未闭合，已在修改后的组件代码中修复，否则会导致HTML结构错误。

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