
valentin-morice/filament-json-column 这个插件。
Composer在线学习地址:学习地址filament-json-column 是一个 Filament 的插件,它允许你在 Filament 的表单中以更友好的方式查看和编辑 JSON 格式的字段。它提供了两个选项卡:
- Viewer: 以美观的格式展示 JSON 数据,方便阅读。
- Editor: 提供一个 JSON 编辑器,方便修改 JSON 数据。
安装
使用 Composer 安装非常简单:
composer require valentin-morice/filament-json-column
使用
确保你的 Eloquent 模型中,对应的字段被 cast 为 json 或 array。
protected $casts = [
'example' => 'array', // 或者 'json'
];然后在 Filament 的表单中使用 FilamentJsonColumn:
use Filament\Forms\Form;
use ValentinMorice\FilamentJsonColumn\FilamentJsonColumn;
public static function form(Form $form): Form
{
return $form
->schema([
FilamentJsonColumn::make('example'),
]);
}自定义
-
Accent Color: 可以自定义选项卡选择器的颜色。
FilamentJsonColumn::make('example')->accent('#007bff'); -
Single Tab: 可以只显示 Viewer 或 Editor。
FilamentJsonColumn::make('example')->editorOnly(); // 只显示 Editor FilamentJsonColumn::make('example')->viewerOnly(); // 只显示 Viewer -
Height: 可以自定义 Viewer 和 Editor 的高度。
FilamentJsonColumn::make('example')->editorHeight(500); FilamentJsonColumn::make('example')->viewerHeight(500);
filament-json-column 极大地简化了 Filament 中 JSON 数据的处理,提高了开发效率。如果你在使用 Filament,强烈推荐尝试这个插件。它让 JSON 数据的查看和编辑变得更加轻松愉快!










