Laravel中Eloquent如何通过外键关联跨表查询并返回适配Vue的JSON数据

你的需求完全可以通过Eloquent的预加载机制实现，之前的报错是因为对关联字段的select语法理解有误——主查询的select()方法仅能查询当前主模型对应数据表的字段，跨表关联字段必须通过with()方法声明预加载链路，再单独指定每个关联需要获取的字段。

正确实现逻辑 #

• 核心规则：通过with()嵌套声明关联链路，在每个关联后追加:字段1,字段2的格式指定需要查询的关联表字段，必须把关联依赖的主键/外键保留在select列表里，否则Eloquent无法匹配主表和关联表的对应关系，会导致关联值为空。
• 关联链的依赖要求：
  • 从TaskJob关联Job时，必须保留Job表的id（对应TaskJob的外键id_job）
  • 从Job关联Customer时，必须保留Job表的id_customer（对应Customer表的主键id）、以及Customer表的id（对应Job的外键id_customer）

代码示例 #

基础嵌套JSON结构（直接加载关联返回） #

public function getCurrentTasks()
{
    $data = TaskJob::query()
        // 主表仅查询需要的字段
        ->select(['id', 'id_job', 'id_concept', 'id_user'])
        ->with([
            // 加载Job关联，保留关联匹配必须的id、id_customer字段，加上需要的job_name
            'jobs:id,job_name,id_customer',
            // 嵌套加载Job关联的Customer，保留关联必须的id，加上需要的customer_name
            'jobs.customer:id,customer_name',
            // 可按需补充其他需要的关联
            'concepts:id,concept_name'
        ])
        ->orderBy('id')
        ->get();
    return response()->json($data);
}

返回的JSON结构会自动嵌套关联数据，可直接在Vue中通过task.jobs.customer.customer_name取值。

适合Vue使用的拍平结构 #

如果不想在前端做多层嵌套的空值兼容，可以把关联字段映射为JSON的顶层字段，减少前端取值的复杂度：

public function getCurrentTasks()
{
    $data = TaskJob::query()
        ->select(['id', 'id_job', 'id_concept', 'id_user'])
        ->with([
            'jobs:id,job_name,id_customer',
            'jobs.customer:id,customer_name',
            'concepts:id,concept_name'
        ])
        ->orderBy('id')
        ->get()
        ->map(function ($task) {
            return [
                'id' => $task->id,
                'id_job' => $task->id_job,
                'id_concept' => $task->id_concept,
                'id_user' => $task->id_user,
                // 关联字段拍平到顶层，做兼容处理避免空值报错
                'job_name' => $task->jobs->job_name ?? '',
                'customer_name' => $task->jobs->customer->customer_name ?? '',
                'concept_name' => $task->concepts->concept_name ?? '',
            ];
        });
    return response()->json($data);
}

常见坑点说明 #

• 关联select时漏写关联依赖的键值是最常见的问题，比如查Job关联时漏写id、查Customer关联时漏写id，都会导致Eloquent无法匹配关联数据，最终返回的关联值为null
• 不要在主查询的select()里直接写跨表字段的路径（比如你之前试的'id_job->Jobs::job_name'这种写法），这部分语法不属于Eloquent的查询规则，必然会触发SQL语法错误

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