Filament 中文文档

主题

全部文档

在 Blade 视图中渲染表格 ​

WARNING

继续之前，请确认项目中已安装 filament/tables。可通过运行以下命令检查：

bash
composer show filament/tables

若尚未安装，请参阅安装指南，并按说明配置独立组件。

设置 Livewire 组件 ​

首先，生成一个新的 Livewire 组件：

bash
php artisan make:livewire ListProducts

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

blade
@livewire('list-products')

或者，你也可以使用整页 Livewire 组件：

php
use App\Livewire\ListProducts;
use Illuminate\Support\Facades\Route;

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

添加表格 ​

向 Livewire 组件类添加表格时有 3 项任务：

  1. 实现 `HasTable` 和 `HasSchemas` 接口，并使用 `InteractsWithTable` 和 `InteractsWithSchemas` trait。
  2. 添加 `table()` 方法，在此配置表格。[添加表格的列、过滤器和操作](/5.x/tables/overview#columns)。
  3. 确保定义用于获取表格行的基础查询。例如，若要从 `Product` 模型列出产品，应返回 `Product::query()`。
php
<?php

namespace App\Livewire;

use App\Models\Shop\Product;
use Filament\Actions\Concerns\InteractsWithActions;  
use Filament\Actions\Contracts\HasActions;
use Filament\Schemas\Concerns\InteractsWithSchemas;
use Filament\Schemas\Concerns\RestrictsFileUploadsToSchemaComponents;
use Filament\Schemas\Contracts\HasSchemas;
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 HasActions, HasSchemas, HasTable
{
    use InteractsWithActions;
    use InteractsWithSchemas;
    use InteractsWithTable;
    use RestrictsFileUploadsToSchemaComponents;
    
    public function table(Table $table): Table
    {
        return $table
            ->query(Product::query())
            ->columns([
                TextColumn::make('name'),
            ])
            ->filters([
                // ...
            ])
            ->recordActions([
                // ...
            ])
            ->toolbarActions([
                // ...
            ]);
    }
    
    public function render(): View
    {
        return view('livewire.list-products');
    }
}

最后，在 Livewire 组件的视图中渲染表格：

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

在浏览器中访问你的 Livewire 组件，应该能看到表格。

INFO

filament/tables 还包含以下包：

  • filament/actions
  • filament/forms
  • filament/support

这些包允许你在 Livewire 组件中使用它们的组件。 例如，若你的表格使用了 Actions，请记得实现 HasActions 接口并包含 InteractsWithActions trait。

若在表格中使用了其他 Filament 组件，请务必一并安装并集成对应的包。

为 Eloquent 关系构建表格 ​

若要为 Eloquent 关系构建表格，可在 $table 上使用 relationship() 和 inverseRelationship() 方法，而不是传入 query()。兼容 HasMany、HasManyThrough、BelongsToMany、MorphMany 和 MorphToMany 关系：

php
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 模型实例。该分类有一个名为 products 的关系。我们用函数返回关系实例。这是多对多关系，因此反向关系名为 categories，定义在 Product 模型上。只需将该关系名称传给 inverseRelationship() 方法，而不是整个实例。

现在表格使用的是关系而不是普通 Eloquent 查询，所有操作都会在关系上执行，而不是在查询上。例如，若使用 CreateAction，新产品会自动关联到该分类。

若关系使用了中间表（pivot），只要这些列在关系以及反向关系定义的 withPivot() 方法中列出，就可以像普通表格列一样使用所有中间表列。

关系表格在面板构建器中用作「关系管理器」。关系管理器文档中的大多数功能也适用于关系表格。例如，附加与分离以及关联与取消关联操作。

使用 CLI 生成表格 Livewire 组件 ​

建议先学习如何手动用 Table Builder 设置 Livewire 组件；熟练后，可使用 CLI 为你生成表格。

bash
php artisan make:livewire-table Products/ListProducts

这会询问你一个已有模型的名称，例如 Product。最后会生成新的 app/Livewire/Products/ListProducts.php 组件，你可以自行定制。

自动生成表格列 ​

Filament 还能根据模型的数据库列猜测你想要的表格列。生成表格时可使用 --generate 标志：

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