公告: 旧版文档请移步 -> http://v2.laravel-filament.cn/docs

Languages

Version

Theme

表格构造器

在 Livewire 组件中添加表格

准备 Livewire 组件

首先,生成新的 Livewire 组件:

php artisan make:livewire ListProducts

然后,在页面中渲染 Livewire 组件:

@livewire('list-products')

此外,你可以使用全页 Livewire 组件:

use App\Livewire\ListProducts;
use Illuminate\Support\Facades\Route;
 
Route::get('products', ListProducts::class);

添加表格

添加表格到 Livewire 组件类需要完成 3 个任务:

  1. 实现 HasTableHasForms 接口,并且使用 InteractsWithTableInteractsWithForms trait。
  2. 添加用于配置表格的 table() 方法,。添加表格列字段、过滤器和 Action
  3. 确保在表格中配置了用于获取行数据的基础查询。比如,如果要从 Product 模型中罗列产品,你可能需要返回 Product::query()
<?php
 
namespace App\Livewire;
 
use App\Models\Shop\Product;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Filament\Tables\Columns\TextColumn;
use Filament\Tables\Concerns\InteractsWithTable;
use Filament\Tables\Contracts\HasTable;
use Filament\Tables\Table;
use Illuminate\Contracts\View\View;
use Livewire\Component;
 
class ListProducts extends Component implements HasForms, HasTable
{
use InteractsWithTable;
use InteractsWithForms;
public function table(Table $table): Table
{
return $table
->query(Product::query())
->columns([
TextColumn::make('name'),
])
->filters([
// ...
])
->actions([
// ...
])
->bulkActions([
// ...
]);
}
public function render(): View
{
return view('livewire.list-products');
}
}

最后,在 Livewire 组件视图中渲染表格:

<div>
{{ $this->table }}
</div>

现在,可以到浏览器中访问该 Livewire 组件,应该就能看到该表格了。

为 Eloquent 关联创建表格

如果你想为 Eloquent 关联创建表格,你可以在 $table 中使用 relationship()inverseRelationship() 方法,而无需再传递 query()HasManyHasManyThroughBelongsToManyMorphManyMorphToMany 关联都兼容:

use App\Models\Category;
use Filament\Tables\Table;
use Illuminate\Database\Eloquent\Relations\BelongsToMany;
 
public Category $category;
 
public function table(Table $table): Table
{
return $table
->relationship(fn (): BelongsToMany => $this->category->products())
->inverseRelationship('categories')
->columns([
TextColumn::make('name'),
]);
}

本例中,$category 属性对应了 Category 模型实例。该 category 有一个关联名为 products。我们使用一个函数来返回关联实例。这是一个多对多关联,因此反转的关联名叫做 categories 并且它定义在 Product 模型上。我们只需将此关联的名称传入到 inverseRelationship() 方法中,而无需传递整个实例。

既然表格使用了关联而非普通 Eloquent 查询,所有的 Action 都会在关联上执行,而不再在查询上执行。比如,如果你使用了 CreateAction,新产品会自动关联到该目录(category)中。

如果关联使用了中间表,只要这些字段在关联反转关联的 withPivot() 中罗列出来,你就可以在表格中使用所有这些字段。

关联表在面板中以"关联管理器"的方式使用。大部分关联管理器的特性也能用在关联表中。比如,attaching 和 detachingassociating 和 dissociating Action。

使用 CLI 生成表格 Livewire 组件

建议你了解如何使用表格构造器手动创建 Livewire 组件,不过一旦熟悉之后,你可以使用 CLI 来为你生成表格。

php artisan make:livewire-table Products/ListProducts

这将会要求输入预制模型的名称,比如 Product。最后,它将会生成一个新的 app/Livewire/Products/ListProducts.php 组件,你可以对其进行自定义。

自动生成表格列

Filament 可以基于模型数据库字段,猜测你想要在表格中添加哪些表格列字段。生成表格时,请使用 --generate 标志:

php artisan make:livewire-table Products/ListProducts --generate
Edit on GitHub

Still need help? Join our Discord community or open a GitHub discussion

上一页
高级
下一页
测试