在构建 Filament 后台时，我们经常需要处理重复性、结构化的数据录入场景，例如一个订单中的多个商品、一个产品下的多种规格等。Filament 自带的 Repeater 组件无疑是处理这类需求的利器，它允许我们动态添加、删除和排序表单项。然而，当这些重复的表单项数量增多，或者每个表单项内部字段较多时，默认的垂直堆叠布局会使得页面显得冗长、杂乱，用户需要不断滚动才能看清所有数据，大大降低了数据录入的效率和直观性。我们迫切需要一种方式，能将这些重复的表单项以表格的形式呈现，提供更清晰、更紧凑的视觉体验，就像在操作一个迷你电子表格一样。
问题的症结：默认 Repeater 的视觉限制
想象一下，你正在为电商后台添加订单管理功能。每个订单可能包含几十个商品，每个商品又有数量、单价、折扣等字段。如果使用默认的 Filament Repeater，每个商品都会以一个独立的卡片或区块形式展现，页面会迅速拉长，用户在查看和编辑时，很难一眼看出整体结构，也无法方便地进行横向比较。这种“垂直堆叠”的模式，对于简单的列表尚可，但对于需要“表格化”展示的数据，就显得力不从心了。
解决方案：awcodes/filament-table-repeater 登场！
幸好，PHP 社区的力量是无穷的！针对 Filament Repeater 的这一痛点，awcodes/filament-table-repeater 这个 Composer 包应运而生。它完美地将 Filament 的 Repeater 组件改造为表格形式，让你的后台数据录入界面瞬间变得专业、高效，简直是雪中送炭！
这个库的核心思想很简单：将原本垂直排列的表单项，以表格的行形式展示，每个字段则对应表格的一列，从而提供一个清晰、紧凑且易于操作的数据录入界面。
如何引入并使用 awcodes/filament-table-repeater
使用 Composer 安装这个包非常简单：
composer require awcodes/filament-table-repeater
安装完成后，为了让样式生效，你还需要进行一些简单的配置，这主要是为了与 Filament 的主题系统保持一致。
自定义主题配置（如果你还没有）： 如果你还没有为 Filament 设置自定义主题，请先按照 Filament 官方文档的指引进行设置。
-
导入插件样式： 在你的主题 CSS 文件（通常是
resources/css/filament/admin/theme.css或类似路径）中，导入awcodes/filament-table-repeater的样式：@import '../../../../vendor/awcodes/filament-table-repeater/resources/css/plugin.css';
-
添加到 Tailwind JIT 扫描路径： 在你的
tailwind.config.js文件中，确保插件的视图文件被 Tailwind JIT 模式扫描到，以便生成正确的 CSS：content: [ // ... 其他内容 './vendor/awcodes/filament-table-repeater/resources/**/*.blade.php', ]
完成这些设置后，你就可以在你的 Filament 表单中使用 TableRepeater 了。
基本用法示例：
假设你需要管理一个产品的所有变体（例如：尺寸、颜色、库存）。
use Awcodes\TableRepeater\Components\TableRepeater;
use Awcodes\TableRepeater\Header;
use Filament\Forms\Components\TextInput;
use Filament\Forms\Components\Select;
use Filament\Support\Enums\Alignment;
TableRepeater::make('product_variants')
->headers([
// 定义表格的列头
Header::make('size')->width('120px')->align(Alignment::Center)->markAsRequired(),
Header::make('color')->width('120px'),
Header::make('stock')->width('80px')->align(Alignment::End),
])
->schema([
// 定义每一行（每个变体）的表单字段
Select::make('size')
->options([
'S' => 'Small',
'M' => 'Medium',
'L' => 'Large',
'XL' => 'Extra Large',
])
->required(),
TextInput::make('color')
->required(),
TextInput::make('stock')
->numeric()
->default(0)
->required(),
])
->columnSpan('full') // 让表格占据整个宽度
->label('产品变体') // 表格的整体标签
->emptyLabel('暂无产品变体，点击“添加”按钮新增。') // 自定义空状态提示
->showLabels() // 显示每个字段的标签
->streamlined() // 启用更紧凑的流线型外观
->stackAt('md'); // 在中等屏幕以下堆叠显示为卡片，优化移动端体验关键特性解析：
-
headers()：定义列头 这是TableRepeater最核心的部分。通过Header::make('字段名')来定义每一列的标题。你还可以链式调用以下方法来定制列头：-
width('150px')：设置列宽。 -
align(Alignment::Center)：设置文本对齐方式（左、中、右）。 -
markAsRequired()：在列头显示必填星号。 -
renderHeader(false)：隐藏列头，但保留其在可访问性方面的作用。
-
schema()：定义行内字段 与普通 Repeater 类似，这里定义了每一行（即每个重复项）包含的表单组件。这些组件会根据headers()中定义的顺序和宽度在表格中呈现。showLabels()：显示字段标签 默认情况下，为了表格的简洁，行内字段的标签是隐藏的。调用此方法可以显示它们。emptyLabel()：自定义空状态提示 当表格中没有数据时，显示自定义的提示信息。stackAt('md')：响应式布局 在小屏幕设备上（例如手机），表格可能会过宽导致显示不佳。stackAt()方法允许你设置一个断点，当屏幕宽度小于该断点时，表格会自动切换回类似默认 Repeater 的堆叠式卡片布局，从而优化移动端的用户体验。streamlined()：流线型外观 这个方法可以使表格的字段显示得更紧凑，与表格的整体样式更融合。extraActions()：表格底部额外操作 你可以在表格的“添加”按钮旁边或下方添加自定义的操作按钮，例如“导出数据”、“批量导入”等，进一步提升功能性。
总结与实际应用效果
awcodes/filament-table-repeater 极大地提升了 Filament 后台在处理复杂列表数据时的用户体验和开发效率。
优势总结：
- 直观的数据视图： 将数据以表格形式呈现，一目了然，方便用户快速浏览和理解数据结构。
- 高效的数据录入： 字段紧凑排列，减少了滚动和点击次数，提高了录入效率。
- 提升用户体验： 提供了更专业、更友好的后台界面，尤其适用于需要频繁编辑列表数据的场景。
- 良好的响应式支持： 自动适应不同屏幕尺寸，确保移动端用户也能有流畅的操作体验。
- 高度可定制： 丰富的配置选项允许你根据具体需求调整表格的样式和行为。
通过引入 awcodes/filament-table-repeater，你的 Filament 后台不再只是简单的表单堆砌，而是能提供类似专业数据管理工具的强大功能。如果你正在为 Filament 的数据录入界面感到头疼，不妨立即尝试这个强大的 Composer 包，它定会让你眼前一亮！
