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

Languages

Version

Theme

面板构建器 - 资源

展示记录

使用标签页过滤记录

你可以在表格上面添加标签页,使之基于预定义条件过滤记录。每个标签页以不同的方式设置表格的 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)),
];
}

自定义过滤器标签页标签

数组的键将用作选项卡的标识符,因此它们可以持久化在 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)),
];
}

添加图标到过滤器标签页

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

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)

添加徽章到过滤器标签页

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

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')

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

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

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';
}

授权

关于授权,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());
}

自定义列表页视图

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

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>

要查看默认视图中包含的内容,你可以查看项目的 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

上一页
开始