展示记录

#使用标签页过滤记录

你可以在表格上面添加标签页，使之基于预定义条件过滤记录。每个标签页以不同的方式设置表格的 Eloquent 查询范围。要注册标签页，在列表页类中添加 getTabs() 方法，并返回一个 Tab 对象数组：

use Filament\Resources\Components\Tab;
use Illuminate\Database\Eloquent\Builder;
 
public function getTabs(): array
{
    return [
        'all' => Tab::make(),
        'active' => Tab::make()
            ->modifyQueryUsing(fn (Builder $query) => $query->where('active', true)),
        'inactive' => Tab::make()
            ->modifyQueryUsing(fn (Builder $query) => $query->where('active', false)),
    ];
}
use Filament\Resources\Components\Tab;
use Illuminate\Database\Eloquent\Builder;

public function getTabs(): array
{
    return [
        'all' => Tab::make(),
        'active' => Tab::make()
            ->modifyQueryUsing(fn (Builder $query) => $query->where('active', true)),
        'inactive' => Tab::make()
            ->modifyQueryUsing(fn (Builder $query) => $query->where('active', false)),
    ];
}

#自定义过滤器标签页标签

数组的键将用作选项卡的标识符，因此它们可以持久化在 URL 的查询字符串中。每个选项卡的标签也是由键生成的，但你可以通过将标签传递到选项卡的 make() 方法来覆盖它：

use Filament\Resources\Components\Tab;
use Illuminate\Database\Eloquent\Builder;
 
public function getTabs(): array
{
    return [
        'all' => Tab::make('All customers'),
        'active' => Tab::make('Active customers')
            ->modifyQueryUsing(fn (Builder $query) => $query->where('active', true)),
        'inactive' => Tab::make('Inactive customers')
            ->modifyQueryUsing(fn (Builder $query) => $query->where('active', false)),
    ];
}
use Filament\Resources\Components\Tab;
use Illuminate\Database\Eloquent\Builder;

public function getTabs(): array
{
    return [
        'all' => Tab::make('All customers'),
        'active' => Tab::make('Active customers')
            ->modifyQueryUsing(fn (Builder $query) => $query->where('active', true)),
        'inactive' => Tab::make('Inactive customers')
            ->modifyQueryUsing(fn (Builder $query) => $query->where('active', false)),
    ];
}

#添加图标到过滤器标签页

你可以将图标传递到标签页的 icon 方法，将图标添加到标签页中：

use Filament\Resources\Components\Tab;
 
Tab::make()
    ->icon('heroicon-m-user-group')
use Filament\Resources\Components\Tab;

Tab::make()
    ->icon('heroicon-m-user-group')

你也可以使用 iconPosition() 方法修改图标的位置，使其从标签前面移到标签后面：

use Filament\Support\Enums\IconPosition;
 
Tab::make()
    ->icon('heroicon-m-user-group')
    ->iconPosition(IconPosition::After)
use Filament\Support\Enums\IconPosition;

Tab::make()
    ->icon('heroicon-m-user-group')
    ->iconPosition(IconPosition::After)

#添加徽章到过滤器标签页

你可以将字符串传递给标签页的 badge() 方法，在标签页中添加徽章：

use Filament\Resources\Components\Tab;
 
Tab::make()
    ->badge(Customer::query()->where('active', true)->count())
use Filament\Resources\Components\Tab;

Tab::make()
    ->badge(Customer::query()->where('active', true)->count())

#修改过滤器标签页徽章颜色

使用 badgeColor() 方法，可以修改徽章颜色：

use Filament\Resources\Components\Tab;
 
Tab::make()
    ->badge(Customer::query()->where('active', true)->count())
    ->badgeColor('success')
use Filament\Resources\Components\Tab;

Tab::make()
    ->badge(Customer::query()->where('active', true)->count())
    ->badgeColor('success')

#向过滤器选项卡添加额外属性

使用 extraAttributes()，你可以将额外的 HTML 属性传递给过滤器选项卡：

use Filament\Resources\Components\Tab;
 
Tab::make()
    ->extraAttributes(['data-cy' => 'statement-confirmed-tab'])
use Filament\Resources\Components\Tab;

Tab::make()
    ->extraAttributes(['data-cy' => 'statement-confirmed-tab'])

#自定义默认标签页

要自定义页面加载时选中的默认标签页，你可以在 getDefaultActiveTab() 方法中，返回该标签页对应的数组键名：

use Filament\Resources\Components\Tab;
 
public function getTabs(): array
{
    return [
        'all' => Tab::make(),
        'active' => Tab::make(),
        'inactive' => Tab::make(),
    ];
}
 
public function getDefaultActiveTab(): string | int | null
{
    return 'active';
}
use Filament\Resources\Components\Tab;

public function getTabs(): array
{
    return [
        'all' => Tab::make(),
        'active' => Tab::make(),
        'inactive' => Tab::make(),
    ];
}

public function getDefaultActiveTab(): string | int | null
{
    return 'active';
}

#授权

关于授权，Filament 会监听所有应用中注册的模型策略。

如果模型策略的 viewAny() 方法返回 true，则用户可以访问列表页。

reorder() 方法用于控制重排记录。

#自定义表格 Eloquent 查询

尽管你可以为整个资源自定义 Eloquent 查询，你也可以为列表页表格进行特定修改。为此，请在资源的 table() 方法中使用 modifyQueryUsing() 方法：

use Filament\Tables\Table;
use Illuminate\Database\Eloquent\Builder;
 
public static function table(Table $table): Table
{
    return $table
        ->modifyQueryUsing(fn (Builder $query) => $query->withoutGlobalScopes());
}
use Filament\Tables\Table;
use Illuminate\Database\Eloquent\Builder;

public static function table(Table $table): Table
{
    return $table
        ->modifyQueryUsing(fn (Builder $query) => $query->withoutGlobalScopes());
}

#自定义列表页视图

要进一步自定义，你可以重写页面类的静态 $view 属性：

protected static string $view = 'filament.resources.users.pages.list-users';
protected static string $view = 'filament.resources.users.pages.list-users';

这假定了你已经创建了一个视图文件 resources/views/filament/resources/users/pages/list-users.blade.php。

下例是视图可能包含内容的简单示例：

<x-filament-panels::page>
    {{ $this->table }}
</x-filament-panels::page>
<x-filament-panels::page>
    {{ $this->table }}
</x-filament-panels::page>

要查看默认视图中包含的内容，你可以查看项目的 vendor/filament/filament/resources/views/resources/pages/list-records.blade.php 文件。

Edit on GitHub

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