如何在Laravel Backpack的CRUD中显示关联模型字段？

你当前的写法没法自动实现角色选择后同步描述的功能，必须配合JavaScript来完成。下面是具体的实现步骤：

1. 修正Crud字段配置 #

首先把repeatable的字段配置调整成这样，确保角色选择框能正常关联Role模型，同时添加描述输入框：

$this->crud->addFields([
    [
        'type' => 'repeatable',
        'label' => '角色',
        'name' => 'roles',
        'subfields' => [
            [
                'name'  => 'role_id',
                'label' => '选择角色',
                'type'  => 'select2',
                'entity' => 'roles',
                'attribute' => 'name', // 显示角色名称
                'model' => \App\Models\Role::class,
            ],
            [
                'name'  => 'description',
                'label' => '角色描述',
                'type'  => 'text',
                'attributes' => [
                    'readonly' => 'readonly', // 设为只读，避免手动修改
                ],
            ]
        ],
        'new_item_label' => '添加新角色',
    ]
]);

2. 加JS实现自动填充 #

在UserCrudController的setup方法末尾加入这段自定义脚本，监听角色选择的变化，自动填充描述：

$this->crud->addScript('
    // 监听角色选择变化
    $(document).on("change", ".repeatable-container select[name*=role_id]", function() {
        const selectEl = $(this);
        const roleId = selectEl.val();
        const descInput = selectEl.closest(".repeatable-item").find("input[name*=description]");

        if (roleId) {
            // 预加载所有角色的描述数据，直接匹配
            const roleDescriptions = '.json_encode(\App\Models\Role::all()->pluck("description", "id")).';
            descInput.val(roleDescriptions[roleId] || "");
        } else {
            descInput.val("");
        }
    });

    // 页面加载时初始化已存在的角色描述
    $(document).ready(function() {
        $(".repeatable-container select[name*=role_id]").each(function() {
            $(this).trigger("change");
        });
    });
');

3. 注意事项 #

• 预加载角色数据的方式适合角色数量不多的场景，要是角色太多，改成AJAX请求单个角色的描述更合适。
• 描述是Role模型的固有属性，不需要存在中间表里，这里只是用来展示给用户参考。
• 确保Role模型里的description字段没有被隐藏（比如没在$hidden属性里），否则无法正常获取。

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