Laravel Filament表单中Repeater无法正常占满宽度问题

问题场景 #

基于Laravel 10.x + Filament 3.x构建表单时，Section和内部Repeater均配置了columns(4)，且每个字段明确设置了columnSpan，但Repeater内字段无法按预期成行排列，也无法占满页面宽度，columnSpan规则未生效。

简化代码示例 #

\Filament\Forms\Components\Section::make()
    ->heading('اطلاعات شغلی')
    ->columns(4) // Section使用4列网格
    ->schema([
        Repeater::make('interests')
            ->relationship('interests')
            ->label('علاقه‌مندی‌ها')
            ->schema([
                Select::make('interest_id')
                    ->label('نوع اشتغال')
                    ->options(Interest::pluck('title', 'id')->toArray())
                    ->required()
                    ->searchable()
                    ->columnSpan(2),

                Select::make('state_id')
                    ->label('استان محل اشتغال')
                    ->getSearchResultsUsing(fn(string $search): array => State::query()
                        ->where('name', 'like', "%{$search}%")
                        ->limit(10)
                        ->pluck('name', 'id')
                        ->toArray())
                    ->getOptionLabelUsing(fn($value): ?string => State::find($value)?->name)
                    ->required()
                    ->searchable()
                    ->columnSpan(1),

                Select::make('city_id')
                    ->label('شهر محل اشتغال')
                    ->required()
                    ->getSearchResultsUsing(fn(string $search, Get $get): array => City::query()
                        ->whereRelation('state', 'id', '=', $get('state_id'))
                        ->where('name', 'like', "%{$search}%")
                        ->limit(10)
                        ->pluck('name', 'id')
                        ->toArray())
                    ->getOptionLabelUsing(fn($value): ?string => City::find($value)?->name)
                    ->placeholder('انتخاب کنید')
                    ->searchable()
                    ->visible(fn(Get $get) => !empty($get('state_id')))
                    ->columnSpan(1),

                Select::make('university_id')
                    ->label('دانشگاه محل فعالیت فعلی')
                    ->getSearchResultsUsing(fn(string $search, Get $get): array => University::query()
                        ->whereRelation('state', 'id', '=', $get('state_id'))
                        ->where('name', 'like', "%{$search}%")
                        ->limit(10)
                        ->pluck('name', 'id')
                        ->toArray())
                    ->getOptionLabelUsing(fn($value): ?string => University::find($value)?->name)
                    ->placeholder('انتخاب کنید')
                    ->required()
                    ->searchable()
                    ->columnSpan(2),

                TextInput::make('activity_place')
                    ->label('محل فعالیت')
                    ->nullable()
                    ->columnSpan(4), // 占满整行
            ])
            ->columns(4) // Repeater使用4列网格
            ->label('اطلاعات شغلی')
            ->required(),
    ]),

已尝试操作 #

• 为Section和Repeater明确设置columns(4)
• 调整各字段的columnSpan数值

解决步骤 #

1. 强制Repeater占满Section整行宽度 #

Repeater作为Section的子组件，默认会受Section的列网格限制，需为Repeater添加columnSpan('full')，让它突破列限制占满整行：

Repeater::make('interests')
    ->columnSpan('full') // 新增此配置
    ->relationship('interests')
    // ... 其余配置保持不变

2. 确认Repeater网格配置的正确性 #

确保Repeater的columns(4)配置生效，且每行字段的columnSpan总和不超过4：

• 第一行字段interest_id(2) + state_id(1) + city_id(1)总和为4，符合网格规则
• university_id(2)单独占半行，若需同行补充其他字段可调整columnSpan
• activity_place(4)占满整行，配置正确

3. 移除Repeater内部多余留白（可选） #

若Repeater内部仍有留白导致无法完全占满宽度，可添加额外CSS类：

Repeater::make('interests')
    ->columnSpan('full')
    ->extraAttributes(['class' => 'w-full']) // 强制宽度100%
    // ... 其余配置

4. 清除Filament缓存 #

缓存可能导致布局未更新，执行以下命令：

php artisan filament:clear-cache
php artisan view:clear

预期效果验证 #

调整完成后，Repeater内字段将：

• 按照columnSpan设置自动成行排列
• 完全占满Section的页面宽度，严格遵循4列网格布局

内容的提问来源于stack exchange，提问作者Pouya