Laravel：如何在发票列表页关联显示所属公司信息？

问题描述 #

我有Company和Invoice两个模型，二者为一对多关系（一个公司可拥有多张发票）。现在正在搭建发票的列表页（index页面），需要在页面中显示发票所属的公司名称，但当前控制器只传递了发票数据，不知道如何获取并传递关联的公司数据。

当前发票控制器代码：

public function index()
{
    
    return Inertia::render('Invoices/Index', [
        'invoices' => Invoice::all(),
    ]);

}

Invoice模型（表中包含company_id字段）：

public function company(){

     return $this->belongsTo(Company::class);

}

Company模型：

public function invoices(){

    return $this->hasMany(Invoice::class);

}

公司表迁移代码：

public function up()
{
    Schema::create('companies', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->string('website')->nullable();
        $table->string('address_1')->nullable();
        $table->string('address_2')->nullable();
        $table->string('city')->nullable();
        $table->string('post_code')->nullable();
        $table->string('country')->nullable();
        $table->timestamps();
    });
}

发票表迁移代码：

public function up()
{
    Schema::create('invoices', function (Blueprint $table) {
        $table->id()->from(8023052);
        $table->integer('company_id')->unsigned();
        $table->integer('invoice_company_id');
        $table->text('description');
        $table->string('status');
        $table->decimal('subtotal', 8, 2);
        $table->decimal('tax', 8, 2);
        $table->decimal('total', 8, 2);
        $table->date('invoice_date');
        $table->date('due_date');
        $table->timestamps();
    });
}

解决方案 #

1. 预加载关联模型解决N+1查询问题 #

只需在查询发票时，通过with()方法预加载关联的company模型，即可一次性获取所有发票及其对应公司数据，避免性能损耗：

public function index()
{
    $invoices = Invoice::with('company')->get();

    return Inertia::render('Invoices/Index', [
        'invoices' => $invoices,
    ]);
}

2. 仅获取所需字段（可选优化） #

如果只需要公司名称，可指定只查询id和name字段，减少不必要的数据传输：

public function index()
{
    $invoices = Invoice::with(['company' => function ($query) {
        $query->select('id', 'name');
    }])->get();

    return Inertia::render('Invoices/Index', [
        'invoices' => $invoices,
    ]);
}

3. 前端页面调用关联数据 #

在Inertia前端页面（如Invoices/Index.vue）中，直接通过发票对象访问公司名称，建议使用可选链避免空值报错：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>发票ID</th>
          <th>所属公司</th>
          <th>总金额</th>
          <!-- 其他字段 -->
        </tr>
      </thead>
      <tbody>
        <tr v-for="invoice in invoices" :key="invoice.id">
          <td>{{ invoice.id }}</td>
          <td>{{ invoice.company?.name }}</td>
          <td>{{ invoice.total }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

额外建议 #

当前发票表迁移中company_id字段使用integer('company_id')->unsigned()，Laravel 8+版本推荐使用foreignId定义外键并添加约束，保证数据一致性：

// 修改发票表迁移的company_id字段
$table->foreignId('company_id')->constrained();

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