如何让Livewire Powergrid表格的ID列可点击并加载Laravel路由

我使用Livewire Powergrid构建了一个包含id、name、email三列的表格，希望点击id列的数据时直接跳转到对应的Laravel路由（和现有按钮的功能一致）。目前已通过按钮实现该功能，按钮代码如下：

public function actions(): array
{
   return [
       Button::make('edit', 'Edit')
           ->class('bg-indigo-500 cursor-pointer text-white px-3 py-2.5 m-1 rounded text-sm')
           ->route('refund.edit', ['refund' => 'id']),

       Button::make('destroy', 'Delete')
           ->class('bg-red-500 cursor-pointer text-white px-3 py-2 m-1 rounded text-sm')
           ->route('refund.destroy', ['refund' => 'id'])
           ->method('delete')
    ];
}

现在需要把这个功能直接作用于表格的id数据，不再使用按钮。

你可以在定义表格列的columns()方法中，通过->format()自定义id列的渲染内容，将其转为可点击的链接或触发请求的元素：

实现编辑跳转（GET路由） #

修改id列的配置，将id值渲染为指向编辑路由的链接：

public function columns(): array
{
    return [
        Column::make('ID', 'id')
            ->format(function($row) {
                // 生成对应编辑路由的链接，$row->id为当前行的ID值
                return '<a href="' . route('refund.edit', ['refund' => $row->id]) . '" class="text-indigo-500 hover:underline cursor-pointer">' . $row->id . '</a>';
            })
            ->raw(), // 必须调用此方法，让Powergrid直接渲染HTML内容
        
        // 其余列保持原有定义
        Column::make('Name', 'name'),
        Column::make('Email', 'email'),
    ];
}

同时实现编辑跳转与删除功能（处理DELETE请求） #

如果需要保留删除功能，可在id列中嵌入表单，通过按钮触发DELETE请求：

public function columns(): array
{
    return [
        Column::make('ID', 'id')
            ->format(function($row) {
                return '<div class="flex items-center gap-2">
                            <a href="' . route('refund.edit', ['refund' => $row->id]) . '" class="text-indigo-500 hover:underline">' . $row->id . '</a>
                            <form action="' . route('refund.destroy', ['refund' => $row->id]) . '" method="POST" class="inline">
                                ' . csrf_field() . method_field('DELETE') . '
                                <button type="submit" class="text-red-500 hover:underline cursor-pointer">删除</button>
                            </form>
                        </div>';
            })
            ->raw(),
        
        Column::make('Name', 'name'),
        Column::make('Email', 'email'),
    ];
}

关键说明 #

• ->format()：允许自定义列的渲染逻辑，$row参数包含当前行的所有数据字段。
• ->raw()：关闭HTML转义，确保生成的链接、表单能被正确渲染。
• 样式类可根据需求调整，保持和原有按钮的视觉风格一致即可。

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