记录列表

#使用选项卡过滤记录

您可以在表格上方添加选项卡(Tabs)，用于根据一些预定义条件筛选记录。每个标签页可以以不同的方式限定表格的 Eloquent 查询范围。要注册标签页，请向列表页面类添加 getTabs() 方法，并返回一个 Tab 对象数组：

use Filament\Schemas\Components\Tabs\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\Schemas\Components\Tabs\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 传入到选项卡的 icon() 方法来向选项卡添加图标：

use use Filament\Schemas\Components\Tabs\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\Schemas\Components\Tabs\Tab;

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

#修改过滤器选项卡徽章的颜色

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

use Filament\Schemas\Components\Tabs\Tab;

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

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

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

use Filament\Schemas\Components\Tabs\Tab;

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

#自定义默认标签页

要自定义页面加载时选择的默认选项卡，你可以从 getDefaultActiveTab() 方法返回选项卡的数组键：

use Filament\Schemas\Components\Tabs\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 查询，同时也可以针对 List 页面的表格进行特定的修改。为此，请在资源的 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());
}

#自定义内容

Filament 中的每个页面都有自己的 Schema，它定义了页面的整体结构和内容。你可以通过定义 content() 方法来重写页面的 Schema。列表页面的 content() 方法默认包含以下组件：

use Filament\Schemas\Components\EmbeddedTable;
use Filament\Schemas\Components\RenderHook;
use Filament\Schemas\Schema;

public function content(Schema $schema): Schema
{
    return $schema
        ->components([
            $this->getTabsContentComponent(), // This method returns a component to display the tabs above a table
            RenderHook::make(PanelsRenderHook::RESOURCE_PAGES_LIST_RECORDS_TABLE_BEFORE),
            EmbeddedTable::make(), // This is the component that renders the table that is defined in this resource
            RenderHook::make(PanelsRenderHook::RESOURCE_PAGES_LIST_RECORDS_TABLE_AFTER),
        ]);
}

在 components() 数组中，你可以插入任何 Schema 组件。你可以通过修改数组的排序或者移除不需要的组件来对组件进行重写排序。

#使用自定义 Blade 视图

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

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

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

<x-filament-panels::page>
    {{ $this->content }} {{-- This will render the content of the page defined in the `content()` method, which can be removed if you want to start from scratch --}}
</x-filament-panels::page>

Edit on GitHub

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