操作

#开始

#单一操作

单一操作按钮在每一个表格行的最后进行渲染。

如果你在 Livewire 组件中使用操作，你可以将他们放到 getTableActions() 方法中。

protected function getTableActions(): array
{
    return [
        // ...
    ];
}
protected function getTableActions(): array
{
    return [
        // ...
    ];
}

如果你在后台面板的资源或者关系管理器中使用，你应该将它们放在 $table 上：

public static function table(Table $table): Table
{
    return $table
        ->actions([
            // ...
        ]);
}
public static function table(Table $table): Table
{
    return $table
        ->actions([
            // ...
        ]);
}

操作可以使用静态方法 make() 传入名字作为参数创建。操作名必须是唯一的。你可以将一个执行任务的回调函数作为参数传入到 action() 中，或者将一个生成URL的回调函数作为参数传给 url():

如果你想在新的标签页中打开URL，你可以使用 openUrlInNewTab() 方法。

use App\Models\Post;
use Filament\Tables\Actions\Action;
 
Action::make('edit')
    ->url(fn (Post $record): string => route('posts.edit', $record))
    ->openUrlInNewTab()
use App\Models\Post;
use Filament\Tables\Actions\Action;

Action::make('edit')
    ->url(fn (Post $record): string => route('posts.edit', $record))
    ->openUrlInNewTab()

#批量操作

当用户选择至少一个记录时，批量操作(Bulk Action)按钮变为可见。

如果你在 Livewire 组件中使用操作，你可以将其放在 getTableBulkActions() 中。

protected function getTableBulkActions(): array
{
    return [
        // ...
    ];
}
protected function getTableBulkActions(): array
{
    return [
        // ...
    ];
}

如果你在后台面板的资源或者关系管理器中使用，你必须将它们放到 $table 上:

public static function table(Table $table): Table
{
    return $table
        ->bulkActions([
            // ...
        ]);
}
public static function table(Table $table): Table
{
    return $table
        ->bulkActions([
            // ...
        ]);
}

批量操作使用静态 make() 方法，传入操作名称创建。操作名应该是唯一的。你可以传入一个回调到 action() 中去执行任务：

use Filament\Tables\Actions\BulkAction;
use Illuminate\Database\Eloquent\Collection;
 
BulkAction::make('delete')
    ->action(fn (Collection $records) => $records->each->delete())
use Filament\Tables\Actions\BulkAction;
use Illuminate\Database\Eloquent\Collection;

BulkAction::make('delete')
    ->action(fn (Collection $records) => $records->each->delete())

请注意 Filament 在函数中使用 $records 参数名，来注入集合。其他任何参数名会将会从容器中解析出来。

使用 deselectRecordAfterCompletion() 方法，可以在批量操作执行之后取消选择记录：

use Filament\Tables\Actions\BulkAction;
use Illuminate\Database\Eloquent\Collection;
 
BulkAction::make('delete')
    ->action(fn (Collection $records) => $records->each->delete())
    ->deselectRecordsAfterCompletion()
use Filament\Tables\Actions\BulkAction;
use Illuminate\Database\Eloquent\Collection;

BulkAction::make('delete')
    ->action(fn (Collection $records) => $records->each->delete())
    ->deselectRecordsAfterCompletion()

#设置标签

默认情况下，操作的标签是由操作名称生成。你可以使用 label() 方法自定义：

use App\Models\Post;
use Filament\Tables\Actions\Action;
 
Action::make('edit')
    ->label('Edit post')
    ->url(fn (Post $record): string => route('posts.edit', $record))
use App\Models\Post;
use Filament\Tables\Actions\Action;

Action::make('edit')
    ->label('Edit post')
    ->url(fn (Post $record): string => route('posts.edit', $record))

另外，你可以使用 translateLabel() 方法自动获取翻译标签:

use App\Models\Post;
use Filament\Tables\Actions\Action;
 
Action::make('edit')
    ->translateLabel() // 相当于 `label(__('Edit'))`
    ->url(fn (Post $record): string => route('posts.edit', $record))
use App\Models\Post;
use Filament\Tables\Actions\Action;

Action::make('edit')
    ->translateLabel() // 相当于 `label(__('Edit'))`
    ->url(fn (Post $record): string => route('posts.edit', $record))

#设置颜色

操作可以有颜色指示其意义。可以说 primary、secondary、success、warning 或 danger:

use Filament\Tables\Actions\BulkAction;
use Illuminate\Database\Eloquent\Collection;
 
BulkAction::make('delete')
    ->action(fn (Collection $records) => $records->each->delete())
    ->deselectRecordsAfterCompletion()
    ->color('danger')
use Filament\Tables\Actions\BulkAction;
use Illuminate\Database\Eloquent\Collection;

BulkAction::make('delete')
    ->action(fn (Collection $records) => $records->each->delete())
    ->deselectRecordsAfterCompletion()
    ->color('danger')

#禁用记录批量操作

你可以条件性地禁用指定记录的批量操作：

use Closure;
use Illuminate\Database\Eloquent\Model;
 
public function isTableRecordSelectable(): ?Closure
{
    return fn (Model $record): bool => $record->status === Status::Enabled;
}
use Closure;
use Illuminate\Database\Eloquent\Model;

public function isTableRecordSelectable(): ?Closure
{
    return fn (Model $record): bool => $record->status === Status::Enabled;
}

#设置大小

表格操作按钮的默认大小是 sm，不过你也可以改成 md 或 lg:

use Filament\Tables\Actions\Action;
 
Action::make('delete')
    ->size('lg')
use Filament\Tables\Actions\Action;

Action::make('delete')
    ->size('lg')

#设置图标

批量操作或者部分单一操作也可以渲染图标组件指示他们含义：

use App\Models\Post;
use Filament\Tables\Actions\Action;
use Filament\Tables\Actions\BulkAction;
use Illuminate\Database\Eloquent\Collection;
 
BulkAction::make('delete')
    ->action(fn (Collection $records) => $records->each->delete())
    ->deselectRecordsAfterCompletion()
    ->color('danger')
    ->icon('heroicon-o-trash')
 
Action::make('edit')
    ->label('Edit post')
    ->url(fn (Post $record): string => route('posts.edit', $record))
    ->icon('heroicon-s-pencil')
use App\Models\Post;
use Filament\Tables\Actions\Action;
use Filament\Tables\Actions\BulkAction;
use Illuminate\Database\Eloquent\Collection;

BulkAction::make('delete')
    ->action(fn (Collection $records) => $records->each->delete())
    ->deselectRecordsAfterCompletion()
    ->color('danger')
    ->icon('heroicon-o-trash')

Action::make('edit')
    ->label('Edit post')
    ->url(fn (Post $record): string => route('posts.edit', $record))
    ->icon('heroicon-s-pencil')

#模态框

操作和批量操作在运行之前可能会要求额外的确认或者表单信息。使用表格构造器，你可以在执行任务前通过打开模态框实现。

#确认模态框

你可以使用 requiresConfirmation() 方法，在操作运行前要求确认信息。对于破坏性操作，比如删除记录，这个尤其有用。

use Filament\Tables\Actions\BulkAction;
use Illuminate\Database\Eloquent\Collection;
 
BulkAction::make('delete')
    ->action(fn (Collection $records) => $records->each->delete())
    ->deselectRecordsAfterCompletion()
    ->requiresConfirmation()
use Filament\Tables\Actions\BulkAction;
use Illuminate\Database\Eloquent\Collection;

BulkAction::make('delete')
    ->action(fn (Collection $records) => $records->each->delete())
    ->deselectRecordsAfterCompletion()
    ->requiresConfirmation()

注意：当使用 url() 方法代替 action() 时，确认模态框会失效。因此，建议在 action() 的回调函数中使用重定向URL。

#自定义表单

你也可以在模态框中渲染表单，用以在操作运行之前从用户侧收集更多信息。

你也可以使用表单构造器的组件，创建自定义操作模态表单。表单中的数据可以在 action() 的回调函数的 $data 数组中使用：

use App\Models\User;
use Filament\Forms;
use Filament\Tables\Actions\BulkAction;
use Illuminate\Database\Eloquent\Collection;
 
BulkAction::make('updateAuthor')
    ->action(function (Collection $records, array $data): void {
        foreach ($records as $record) {
            $record->author()->associate($data['authorId']);
            $record->save();
        }
    })
    ->form([
        Forms\Components\Select::make('authorId')
            ->label('Author')
            ->options(User::query()->pluck('name', 'id'))
            ->required(),
    ])
use App\Models\User;
use Filament\Forms;
use Filament\Tables\Actions\BulkAction;
use Illuminate\Database\Eloquent\Collection;

BulkAction::make('updateAuthor')
    ->action(function (Collection $records, array $data): void {
        foreach ($records as $record) {
            $record->author()->associate($data['authorId']);
            $record->save();
        }
    })
    ->form([
        Forms\Components\Select::make('authorId')
            ->label('Author')
            ->options(User::query()->pluck('name', 'id'))
            ->required(),
    ])

#填入默认数据

使用 mountUsing() 方法，你可以在表单中填入默认数据：

use App\Models\User;
use Filament\Forms;
use Filament\Tables\Actions\Action;
use Illuminate\Database\Eloquent\Collection;
 
Action::make('updateAuthor')
    ->mountUsing(fn (Forms\ComponentContainer $form, User $record) => $form->fill([
        'authorId' => $record->author->id,
    ]))
    ->action(function (User $record, array $data): void {
        $record->author()->associate($data['authorId']);
        $record->save();
    })
    ->form([
        Forms\Components\Select::make('authorId')
            ->label('Author')
            ->options(User::query()->pluck('name', 'id'))
            ->required(),
    ])
use App\Models\User;
use Filament\Forms;
use Filament\Tables\Actions\Action;
use Illuminate\Database\Eloquent\Collection;

Action::make('updateAuthor')
    ->mountUsing(fn (Forms\ComponentContainer $form, User $record) => $form->fill([
        'authorId' => $record->author->id,
    ]))
    ->action(function (User $record, array $data): void {
        $record->author()->associate($data['authorId']);
        $record->save();
    })
    ->form([
        Forms\Components\Select::make('authorId')
            ->label('Author')
            ->options(User::query()->pluck('name', 'id'))
            ->required(),
    ])

#Wizards

你可以很容易地将表单操作转换成多步的操作向导。

在操作中，只要传入向导步骤到 step() 方法中，而非原来的 form()中：

use Filament\Forms\Components\MarkdownEditor;
use Filament\Forms\Components\TextInput;
use Filament\Forms\Components\Toggle;
use Filament\Forms\Components\Wizard\Step;
use Filament\Tables\Actions\Action;
 
Action::make('create')
    ->steps([
        Step::make('Name')
            ->description('Give the category a clear and unique name')
            ->schema([
                TextInput::make('name')
                    ->required()
                    ->reactive()
                    ->afterStateUpdated(fn ($state, callable $set) => $set('slug', Str::slug($state))),
                TextInput::make('slug')
                    ->disabled()
                    ->required()
                    ->unique(Category::class, 'slug', fn ($record) => $record),
            ]),
        Step::make('Description')
            ->description('Add some extra details')
            ->schema([
                MarkdownEditor::make('description')
                    ->columnSpan('full'),
            ]),
        Step::make('Visibility')
            ->description('Control who can view it')
            ->schema([
                Toggle::make('is_visible')
                    ->label('Visible to customers.')
                    ->default(true),
            ]),
    ])
use Filament\Forms\Components\MarkdownEditor;
use Filament\Forms\Components\TextInput;
use Filament\Forms\Components\Toggle;
use Filament\Forms\Components\Wizard\Step;
use Filament\Tables\Actions\Action;

Action::make('create')
    ->steps([
        Step::make('Name')
            ->description('Give the category a clear and unique name')
            ->schema([
                TextInput::make('name')
                    ->required()
                    ->reactive()
                    ->afterStateUpdated(fn ($state, callable $set) => $set('slug', Str::slug($state))),
                TextInput::make('slug')
                    ->disabled()
                    ->required()
                    ->unique(Category::class, 'slug', fn ($record) => $record),
            ]),
        Step::make('Description')
            ->description('Add some extra details')
            ->schema([
                MarkdownEditor::make('description')
                    ->columnSpan('full'),
            ]),
        Step::make('Visibility')
            ->description('Control who can view it')
            ->schema([
                Toggle::make('is_visible')
                    ->label('Visible to customers.')
                    ->default(true),
            ]),
    ])

#设置模态框标题, 副标题, 以及按钮标签

你可以自定义模态框的标题、副标题以及按钮标签

use Filament\Tables\Actions\BulkAction;
use Illuminate\Database\Eloquent\Collection;
 
BulkAction::make('delete')
    ->action(fn (Collection $records) => $records->each->delete())
    ->deselectRecordsAfterCompletion()
    ->requiresConfirmation()
    ->modalHeading('Delete posts')
    ->modalSubheading('Are you sure you\'d like to delete these posts? This cannot be undone.')
    ->modalButton('Yes, delete them')
use Filament\Tables\Actions\BulkAction;
use Illuminate\Database\Eloquent\Collection;

BulkAction::make('delete')
    ->action(fn (Collection $records) => $records->each->delete())
    ->deselectRecordsAfterCompletion()
    ->requiresConfirmation()
    ->modalHeading('Delete posts')
    ->modalSubheading('Are you sure you\'d like to delete these posts? This cannot be undone.')
    ->modalButton('Yes, delete them')

#自定义内容

你也可以自定义模态框中要渲染的内容，在 modalContent() 方法中传入 Blade 视图可以指定自定义内容：

use Filament\Tables\Actions\BulkAction;
 
BulkAction::make('advance')
    ->action(fn () => $this->record->advance())
    ->modalContent(view('filament.resources.event.actions.advance'))
use Filament\Tables\Actions\BulkAction;

BulkAction::make('advance')
    ->action(fn () => $this->record->advance())
    ->modalContent(view('filament.resources.event.actions.advance'))

默认情况下，如果有模态框表单，自定义内容会展示在模态框之上，不过你可以用 modalFooter() 将内容添加到表单下面：

use Filament\Pages\Actions\BulkAction;
 
BulkAction::make('advance')
    ->action(fn () => $this->record->advance())
    ->modalFooter(view('filament.resources.event.actions.advance'))
use Filament\Pages\Actions\BulkAction;

BulkAction::make('advance')
    ->action(fn () => $this->record->advance())
    ->modalFooter(view('filament.resources.event.actions.advance'))

#授权

在 visible() 和 hidden() 方法中传入一个闭包，你就可以条件性地对特定用户显示或隐藏操作和批量操作：

use App\Models\Post;
use Filament\Tables\Actions\Action;
 
Action::make('edit')
    ->url(fn (Post $record): string => route('posts.edit', $record))
   ->visible(fn (Post $record): bool => auth()->user()->can('update', $record))
use App\Models\Post;
use Filament\Tables\Actions\Action;

Action::make('edit')
    ->url(fn (Post $record): string => route('posts.edit', $record))
   ->visible(fn (Post $record): bool => auth()->user()->can('update', $record))

这对于授权特定操作给有权限的用户很有用。

#预制操作

#复制

此扩展包有一个操作用以复制记录。你可以这样使用：

use Filament\Tables\Actions\ReplicateAction;
 
ReplicateAction::make('replicate')
use Filament\Tables\Actions\ReplicateAction;

ReplicateAction::make('replicate')

excludeAttribute() 方法用于指示哪些字段在复制的时候应该被排除：

use Filament\Tables\Actions\ReplicateAction;
 
ReplicateAction::make('replicate')->excludeAttributes('slug')
use Filament\Tables\Actions\ReplicateAction;

ReplicateAction::make('replicate')->excludeAttributes('slug')

beforeReplicaSaved() 方法用于保存复制结果前调用一个闭包：

use Filament\Tables\Actions\ReplicateAction;
use Illuminate\Database\Eloquent\Model;
 
ReplicateAction::make('replicate')
    ->beforeReplicaSaved(function (Model $replica): void {
        // ...
    })
use Filament\Tables\Actions\ReplicateAction;
use Illuminate\Database\Eloquent\Model;

ReplicateAction::make('replicate')
    ->beforeReplicaSaved(function (Model $replica): void {
        // ...
    })

afterReplicaSaved() 方法用于保存复制结果后调用一个闭包：

use Filament\Tables\Actions\ReplicateAction;
use Illuminate\Database\Eloquent\Model;
 
ReplicateAction::make('replicate')
    ->afterReplicaSaved(function (Model $replica): void {
        // ...
    })
use Filament\Tables\Actions\ReplicateAction;
use Illuminate\Database\Eloquent\Model;

ReplicateAction::make('replicate')
    ->afterReplicaSaved(function (Model $replica): void {
        // ...
    })

#检索用户输入

如普通操作一样，你可以提供表单模式(form schema)用于修改复制的过程：

use Filament\Tables\Actions\ReplicateAction;
 
ReplicateAction::make('replicate')
	->excludeAttributes(['title'])
	->form([
		TextInput::make('title')->required(),
	])
	->beforeReplicaSaved(function (Model $replica, array $data): void {
		$replica->fill($data);
	})
use Filament\Tables\Actions\ReplicateAction;

ReplicateAction::make('replicate')
	->excludeAttributes(['title'])
	->form([
		TextInput::make('title')->required(),
	])
	->beforeReplicaSaved(function (Model $replica, array $data): void {
		$replica->fill($data);
	})

#分组

你可以使用 ActionGroup 对象，将多个 Action 聚合到一个下拉按钮中：

use Filament\Tables;
 
protected function getTableActions(): array
{
    return [
        Tables\Actions\ActionGroup::make([
            Tables\Actions\ViewAction::make(),
            Tables\Actions\EditAction::make(),
            Tables\Actions\DeleteAction::make(),
        ]),
    ];
}
use Filament\Tables;

protected function getTableActions(): array
{
    return [
        Tables\Actions\ActionGroup::make([
            Tables\Actions\ViewAction::make(),
            Tables\Actions\EditAction::make(),
            Tables\Actions\DeleteAction::make(),
        ]),
    ];
}

#位置

默认情况下，表格中的行操作在最后一个单元格中渲染。你可以重写 getTableActionsPosition() 方法，修改其位置：

use Filament\Tables\Actions\Position;
 
protected function getTableActionsPosition(): ?string
{
    return Position::BeforeCells;
}
use Filament\Tables\Actions\Position;

protected function getTableActionsPosition(): ?string
{
    return Position::BeforeCells;
}

#对齐

默认情况下，你表格中的行操作会被对齐到最后的单元格的右边。要调整默认对齐方式，在扩展包的配置文件里更新这个配置值：

'actions' => [
    'cell' => [
        'alignment' => 'right', // `right`, `left` or `center`
    ],
]
'actions' => [
    'cell' => [
        'alignment' => 'right', // `right`, `left` or `center`
    ],
]

#Tooltips

如果你想在后台面板之外使用tooltips工具提示条，请在你的应用中安装@ryangjchandler/alpine-tooltip，引入tippy.css。如果你使用了自定义后台主题，你同时需要安装tippy.css 。

你可以指定鼠标悬停在操作之上时，要显示的提示内容：

use Filament\Tables\Actions\Action;
 
Action::make('edit')
    ->tooltip('Edit this blog post')
use Filament\Tables\Actions\Action;

Action::make('edit')
    ->tooltip('Edit this blog post')

该方法同时可接收获取当前表格记录的闭包函数：

use Filament\Tables\Actions\Action;
use Filament\Tables\Columns\TextColumn;
use Illuminate\Database\Eloquent\Model;
 
Action::make('edit')
    ->tooltip(fn (Model $record): string => "Edit {$record->title}")
use Filament\Tables\Actions\Action;
use Filament\Tables\Columns\TextColumn;
use Illuminate\Database\Eloquent\Model;

Action::make('edit')
    ->tooltip(fn (Model $record): string => "Edit {$record->title}")

Edit on GitHub

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