Laravel7使用Yajra DataTable无法显示菜单分类关联产品名如何解决

问题根因 #

你前端DataTable配置中指定读取product_name字段，但接口返回的WebMenu数据中没有该字段，且多对多关联的product是集合对象，无法直接按字符串字段读取。

修复步骤 #

1. 修改控制器代码，手动添加product_name字段
   在Yajra DataTable的链式调用中使用addColumn方法，将关联的产品名称处理为字符串输出：

public function datatable()
{
    $productCategory = WebMenu::with('product')
        ->whereHas('product', function ($query) {
            $query->where('parent_id','!=', 0);
        })
        ->get();
    return DataTables::of($productCategory)
        ->addColumn('product_name', function ($item) {
            // 情况1：每个分类关联多个产品，用顿号拼接所有产品名称
            // return $item->product->pluck('name')->implode('、');
            // 情况2：每个分类仅关联1个产品，取第一个产品名称，空关联时返回空避免报错
            return optional($item->product->first())->name ?? '';
        })
        ->rawColumns(['product_name'])
        ->make(true);
}

2. 可选：关联规则校验（调整后仍无数据可排查）
   检查中间表products_categories的字段：如果WebMenu对应的外键字段不是product_category_id，需要调整WebMenu模型中product关联的第三个参数。
3. 前端配置无需修改
   你现有前端配置中{ "data": "product_name", "defaultContent": "" }已经和控制器新增的字段别名对齐，无需额外调整。

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