在 Livewire 组件中添加表格

#准备 Livewire 组件

首先，生成新的 Livewire 组件：

php artisan make:livewire ListProducts
php artisan make:livewire ListProducts

然后，在页面中渲染 Livewire 组件：

@livewire('list-products')
@livewire('list-products')

此外，你可以使用全页 Livewire 组件：

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

Route::get('products', ListProducts::class);

#添加表格

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

1. 实现 HasTable 和 HasForms 接口，并且使用 InteractsWithTable 和 InteractsWithForms 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');
    }
}
<?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>
<div>
    {{ $this->table }}
</div>

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

#为 Eloquent 关联创建表格

如果你想为 Eloquent 关联创建表格，你可以在 $table 中使用 relationship() 和 inverseRelationship() 方法，而无需再传递 query()。 HasMany、HasManyThrough、BelongsToMany、MorphMany 和 MorphToMany 关联都兼容：

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'),
        ]);
}
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 和 detaching 和 associating 和 dissociating Action。

#使用 CLI 生成表格 Livewire 组件

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

php artisan make:livewire-table Products/ListProducts
php artisan make:livewire-table Products/ListProducts

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

#自动生成表格列

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

php artisan make:livewire-table Products/ListProducts --generate
php artisan make:livewire-table Products/ListProducts --generate

Edit on GitHub

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