面板生成器 - 资源 - 列表记录

使用标签过滤记录

您可以在表格上方添加标签，用于根据某些预定义条件过滤记录。每个标签页都可以不同的方式对表格进行 Eloquent 查询。要注册标签页，可在 List 页面类中添加一个 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()` 方法传递 icon，可以为标签页添加图标：

use Filament\Resources\Components\Tab;

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

VeryAUX 翻译于 1年前

0 重译

由 王成涛 审阅

You can also change the icon's position to be after the label instead of before it, using the iconPosition() method:

use Filament\Support\Enums\IconPosition;

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

Adding badges to filter tabs

You can add badges to the tabs by passing a string into the badge() method of the tab:

use Filament\Resources\Components\Tab;

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

Changing the color of filter tab badges

The color of a badge may be changed using the badgeColor() method:

use Filament\Resources\Components\Tab;

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

Customizing the default tab

To customize the default tab that is selected when the page is loaded, you can return the array key of the tab from the getDefaultActiveTab() method:

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

Authorization

For authorization, Filament will observe any model policies that are registered in your app.

Users may access the List page if the viewAny() method of the model policy returns true.

The reorder() method is used to control reordering a record.

Customizing the table Eloquent query

Although you can customize the Eloquent query for the entire resource, you may also make specific modifications for the List page table. To do this, use the modifyQueryUsing() method on the List page class:

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

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

Custom list page view

For further customization opportunities, you can override the static $view property on the page class to a custom view in your app:

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

This assumes that you have created a view at resources/views/filament/resources/users/pages/list-users.blade.php.

Here's a basic example of what that view might contain:

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

To see everything that the default view contains, you can check the vendor/filament/filament/resources/views/resources/pages/list-records.blade.php file in your project.