键值对

简介

键值对字段可让你与一维 JSON 对象交互：

use Filament\Forms\Components\KeyValue;

KeyValue::make('meta')

若使用 Eloquent 保存数据，请务必为模型属性添加 array 类型转换（cast）：

use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    /**
     * @return array<string, string>
     */
    protected function casts(): array
    { 
        return [
            'meta' => 'array',
        ];
    }

    // ...
}

添加行

字段下方会显示一个操作按钮，允许用户添加新行。

设置添加操作按钮的标签

你可以使用 addActionLabel() 方法设置标签，自定义添加行按钮上显示的文本：

use Filament\Forms\Components\KeyValue;

KeyValue::make('meta')
    ->addActionLabel('Add property')

TIP

除了允许静态值外，addActionLabel() 方法也接受函数以动态计算。你可以将各种工具作为参数注入到该函数中。

阻止用户添加行

你可以使用 addable(false) 方法阻止用户添加行：

use Filament\Forms\Components\KeyValue;

KeyValue::make('meta')
    ->addable(false)

TIP

除了允许静态值外，addable() 方法也接受函数以动态计算。你可以将各种工具作为参数注入到该函数中。

删除行

每项上会显示一个操作按钮，允许用户删除该项。

阻止用户删除行

你可以使用 deletable(false) 方法阻止用户删除行：

use Filament\Forms\Components\KeyValue;

KeyValue::make('meta')
    ->deletable(false)

TIP

除了允许静态值外，deletable() 方法也接受函数以动态计算。你可以将各种工具作为参数注入到该函数中。

编辑键

自定义键字段的标签

你可以使用 keyLabel() 方法自定义键字段的标签：

use Filament\Forms\Components\KeyValue;

KeyValue::make('meta')
    ->keyLabel('Property name')

TIP

除了允许静态值外，keyLabel() 方法也接受函数以动态计算。你可以将各种工具作为参数注入到该函数中。

添加键字段占位符

你也可以使用 keyPlaceholder() 方法为键字段添加占位符：

use Filament\Forms\Components\KeyValue;

KeyValue::make('meta')
    ->keyPlaceholder('Property name')

TIP

除了允许静态值外，keyPlaceholder() 方法也接受函数以动态计算。你可以将各种工具作为参数注入到该函数中。

阻止用户编辑键

你可以使用 editableKeys(false) 方法阻止用户编辑键：

use Filament\Forms\Components\KeyValue;

KeyValue::make('meta')
    ->editableKeys(false)

TIP

除了允许静态值外，editableKeys() 方法也接受函数以动态计算。你可以将各种工具作为参数注入到该函数中。

编辑值

自定义值字段的标签

你可以使用 valueLabel() 方法自定义值字段的标签：

use Filament\Forms\Components\KeyValue;

KeyValue::make('meta')
    ->valueLabel('Property value')

TIP

除了允许静态值外，valueLabel() 方法也接受函数以动态计算。你可以将各种工具作为参数注入到该函数中。

添加值字段占位符

你也可以使用 valuePlaceholder() 方法为值字段添加占位符：

use Filament\Forms\Components\KeyValue;

KeyValue::make('meta')
    ->valuePlaceholder('Property value')

TIP

除了允许静态值外，valuePlaceholder() 方法也接受函数以动态计算。你可以将各种工具作为参数注入到该函数中。

阻止用户编辑值

你可以使用 editableValues(false) 方法阻止用户编辑值：

use Filament\Forms\Components\KeyValue;

KeyValue::make('meta')
    ->editableValues(false)

TIP

除了允许静态值外，editableValues() 方法也接受函数以动态计算。你可以将各种工具作为参数注入到该函数中。

重新排序行

你可以使用 reorderable() 方法允许用户在表格中重新排序行：

use Filament\Forms\Components\KeyValue;

KeyValue::make('meta')
    ->reorderable()

TIP

除了允许静态值外，reorderable() 方法也接受函数以动态计算。你可以将各种工具作为参数注入到该函数中。

自定义键值对操作对象

该字段使用操作对象以便轻松自定义其中的按钮。你可以通过向操作注册方法传入函数来自定义这些按钮。该函数可访问 $action 对象，可用于 自定义它。以下方法可用于自定义操作：

• addAction()
• deleteAction()
• reorderAction()

以下是自定义操作的示例：

use Filament\Actions\Action;
use Filament\Forms\Components\KeyValue;
use Filament\Support\Icons\Heroicon;

KeyValue::make('meta')
    ->deleteAction(
        fn (Action $action) => $action->icon(Heroicon::XMark),
    )

TIP

操作注册方法可以将各种工具作为参数注入到该函数中。