在FilamentPHP中基于下拉框选项实现带条件的动态Repeater

核心思路 #

1. 让课程下拉框响应式（reactive），选中后触发状态更新事件
2. 根据选中的课程数据，构建符合Repeater格式的条目数组
3. 将数组设置为Repeater的状态，实现动态生成
4. 配置Repeater与模型的关联关系，确保数据能正常保存

完整代码示例 #

1. 表单组件定义（Create/Edit页面） #

use Filament\Forms\Components\Select;
use Filament\Forms\Components\Repeater;
use Filament\Forms\Components\TextInput;
use App\Models\Course;

// ... 其他页面代码

public static function form(Form $form): Form
{
    return $form
        ->schema([
            Select::make('course_id')
                ->label('课程')
                ->options(Course::pluck('name', 'id'))
                ->reactive()
                ->default(2)
                ->searchable()
                ->afterStateUpdated(function (callable $set, callable $get) {
                    $course = Course::find($get('course_id'));
                    if (!$course) {
                        // 未选中课程时清空Repeater
                        $set('details', []);
                        return;
                    }

                    // 根据课程生成Repeater条目，可替换为你的业务逻辑
                    $repeaterItems = [];
                    // 示例：根据课程课时数生成对应条目，这里用固定4条演示
                    for ($i = 0; $i < 4; $i++) {
                        $repeaterItems[] = [
                            'user_id' => 12, // 可根据课程动态赋值
                            'type' => 1,
                            'course_name' => $course->name, // 关联课程信息
                            // 其他自定义字段...
                        ];
                    }

                    // 批量设置Repeater状态
                    $set('details', $repeaterItems);
                }),

            Repeater::make('details')
                ->label('课程详情')
                ->schema([
                    TextInput::make('user_id')
                        ->label('用户ID')
                        ->required(),
                    TextInput::make('type')
                        ->label('类型')
                        ->required(),
                    TextInput::make('course_name')
                        ->label('课程名称')
                        ->disabled(), // 关联课程信息，设为不可编辑
                    // 其他需要的字段...
                ])
                ->defaultItems(0) // 默认不显示条目，由下拉框触发生成
                ->relationship('details'), // 绑定模型关联，用于自动保存
        ]);
}

2. 主模型关联配置（比如Lesson模型） #

use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Relations\HasMany;

class Lesson extends Model
{
    // ... 其他模型代码

    public function details(): HasMany
    {
        return $this->hasMany(LessonDetail::class);
    }
}

3. 关联子模型（LessonDetail） #

use Illuminate\Database\Eloquent\Model;

class LessonDetail extends Model
{
    protected $fillable = ['user_id', 'type', 'course_name', 'lesson_id'];
    // 必须包含主模型的外键（如lesson_id）
}

关键说明 #

• Repeater状态设置：Repeater的状态是一个数组，每个元素对应一条子项的字段集合，必须通过$set('repeater字段名', 条目数组)批量设置，不能单独修改子字段。
• 保存逻辑：通过->relationship('details')绑定模型的hasMany关联后，Filament会自动处理子项的创建、更新和删除；如果用JSON字段存储，可去掉该方法，同时在主模型中添加$casts = ['details' => 'array'];。
• 动态逻辑调整：可以根据课程的属性（如课时数、章节数）动态生成对应数量的条目，替换示例中的固定循环次数。

内容的提问来源于stack exchange，提问作者Batuhan Hazar GÜLER