列出记录 | DevRefinery

使用选项卡过滤记录

你可以在表格上方添加选项卡，这些选项卡可以根据一些预定义条件来筛选记录。每个选项卡都可以以不同方式限定表格的 Eloquent 查询。要注册选项卡，请在 List 页面类中添加一个 getTabs() 方法，并返回一个 Tab 对象数组：

php

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() 方法来覆盖它：

php

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() 方法中，为选项卡添加图标：

php

use Filament\Schemas\Components\Tabs\Tab;

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

您还可以将图标的位置从标签之前更改为标签之后，使用 iconPosition() 方法：

php

use Filament\Support\Enums\IconPosition;

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

为筛选选项卡添加徽章

您可以通过将字符串传递给选项卡的badge()方法，为选项卡添加徽章：

php

use Filament\Schemas\Components\Tabs\Tab;

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

更改筛选器选项卡徽章的颜色

徽章的颜色可以使用 badgeColor() 方法进行更改：

php

use Filament\Schemas\Components\Tabs\Tab;

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

为筛选器选项卡添加额外属性

您还可以使用 extraAttributes() 传递额外的 HTML 属性以筛选标签页：

php

use Filament\Schemas\Components\Tabs\Tab;

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

自定义默认选项卡

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

php

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 查询，您也可以对列表页表格进行特定修改。为此，请使用 modifyQueryUsing() 方法，在资源的 table() 方法中：

php

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。List 页面的 content() 方法默认包含以下组件：

php

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 属性，将其设置为您应用中的一个自定义视图：

php

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

这假设您已在 resources/views/filament/resources/users/pages/list-users.blade.php 创建了一个视图：

blade

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

使用选项卡过滤记录

php

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)),
    ];
}

自定义筛选选项卡标签

php

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() 方法中，为选项卡添加图标：

php

use Filament\Schemas\Components\Tabs\Tab;

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

您还可以将图标的位置从标签之前更改为标签之后，使用 iconPosition() 方法：

php

use Filament\Support\Enums\IconPosition;

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

为筛选选项卡添加徽章

您可以通过将字符串传递给选项卡的badge()方法，为选项卡添加徽章：

php

use Filament\Schemas\Components\Tabs\Tab;

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

更改筛选器选项卡徽章的颜色

徽章的颜色可以使用 badgeColor() 方法进行更改：

php

use Filament\Schemas\Components\Tabs\Tab;

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

为筛选器选项卡添加额外属性

您还可以使用 extraAttributes() 传递额外的 HTML 属性以筛选标签页：

php

use Filament\Schemas\Components\Tabs\Tab;

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

自定义默认选项卡

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

php

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 查询，您也可以对列表页表格进行特定修改。为此，请使用 modifyQueryUsing() 方法，在资源的 table() 方法中：

php

use Filament\Tables\Table;
use Illuminate\Database\Eloquent\Builder;

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

自定义页面内容

php

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 属性，将其设置为您应用中的一个自定义视图：

php

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

这假设您已在 resources/views/filament/resources/users/pages/list-users.blade.php 创建了一个视图：

blade

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

文档导航

使用选项卡过滤记录

自定义筛选选项卡标签

为筛选选项卡添加图标

为筛选选项卡添加徽章

更改筛选器选项卡徽章的颜色

为筛选器选项卡添加额外属性

自定义默认选项卡

授权

定制表格 Eloquent 查询

自定义页面内容

使用自定义 Blade 视图

使用选项卡过滤记录

自定义筛选选项卡标签

为筛选选项卡添加图标

为筛选选项卡添加徽章

更改筛选器选项卡徽章的颜色

为筛选器选项卡添加额外属性

自定义默认选项卡

授权

定制表格 Eloquent 查询

自定义页面内容

使用自定义 Blade 视图