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

Languages

Version

Theme

表格构造器

操作

开始

单一操作

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

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

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

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

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

批量操作

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

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

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

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

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

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

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

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

另外,你可以使用 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))

设置颜色

操作可以有颜色指示其意义。可以说 primarysecondarysuccesswarningdanger:

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

设置大小

表格操作按钮的默认大小是 sm,不过你也可以改成 mdlg:

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

模态框

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

确认模态框

你可以使用 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(),
])

填入默认数据

使用 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(),
])

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

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

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 Filament\Tables\Actions\ReplicateAction;
 
ReplicateAction::make('replicate')

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

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 {
// ...
})

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

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

分组

你可以使用 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(),
]),
];
}

位置

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

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

对齐

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

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

上一页
过滤器
下一页
布局