如何在Laravel Blade表格的指定列中动态创建子行

要实现每位员工对应多条休假类型子行的表格，需要从后端数据关联和前端表格单元格合并两部分处理：

1. 后端模型关联与数据查询 #

首先确保你的Eloquent模型建立正确关联，假设通过中间表employee_leaves存储员工的休假额度、已用天数和余额（字段包含employee_id, leave_type_id, entitled, used, balance）：

模型关联代码 #

• Employee 模型：

public function employeeLeaves()
{
    return $this->hasMany(EmployeeLeave::class);
}

• EmployeeLeave 模型：

public function leaveType()
{
    return $this->belongsTo(LeaveType::class);
}

控制器查询数据 #

预加载关联数据避免N+1查询问题，同时将部门、职位数据转为ID键名的集合，简化视图逻辑：

$users = User::with('employeeLeaves.leaveType')->get();
$designations = Designation::all()->keyBy('id');
$departments = Department::all()->keyBy('id');

return view('your-view-name', compact('users', 'designations', 'departments'));

2. 修改Blade视图代码 #

利用HTML的rowspan属性合并员工基础信息单元格，内层循环遍历该员工的所有休假记录：

<table class="table table-bordered mb-0" id="myTable">
    <thead class="bg-orange">
        <tr class="text-light">
            <th>#</th>
            <th>Employee Name</th>
            <th>Employee Id</th>
            <th>Employee Type</th>
            <th>Leave Type</th>
            <th>Entitled</th>
            <th>Used Leave</th>
            <th>Balance</th>
        </tr>
    </thead>
    <tbody>
        @foreach($users as $index => $user)
            @php $leaveRecordCount = $user->employeeLeaves->count(); @endphp
            
            {{-- 员工基础信息行，合并对应行数的单元格 --}}
            <tr>
                <th scope="row" rowspan="{{ $leaveRecordCount }}">{{ $index + 1 }}</th>
                <td rowspan="{{ $leaveRecordCount }}">
                    {{ $user->name }} <br>
                    {{ $designations[$user->designationId]->designationName }} <br>
                    {{ $departments[$user->departmentId]->departmentName }}
                </td>
                <td rowspan="{{ $leaveRecordCount }}">{{ $user->employeeId }}</td>
                <td rowspan="{{ $leaveRecordCount }}">{{ $designations[$user->designationId]->attendanceType }}</td>
                
                {{-- 第一条休假记录 --}}
                @if($leaveRecordCount > 0)
                    <td>{{ $user->employeeLeaves[0]->leaveType->name }}</td>
                    <td>{{ $user->employeeLeaves[0]->entitled }}</td>
                    <td>{{ $user->employeeLeaves[0]->used }}</td>
                    <td>{{ $user->employeeLeaves[0]->balance }}</td>
                @else
                    <td colspan="4">No leave types assigned</td>
                @endif
            </tr>
            
            {{-- 剩余休假记录行，仅显示休假相关列 --}}
            @for($i = 1; $i < $leaveRecordCount; $i++)
                <tr>
                    <td>{{ $user->employeeLeaves[$i]->leaveType->name }}</td>
                    <td>{{ $user->employeeLeaves[$i]->entitled }}</td>
                    <td>{{ $user->employeeLeaves[$i]->used }}</td>
                    <td>{{ $user->employeeLeaves[$i]->balance }}</td>
                </tr>
            @endfor
        @endforeach
    </tbody>
</table>

核心要点 #

• rowspan属性：将员工基础信息的单元格合并为休假记录数量行，确保基础信息只展示一次。
• 数据查询优化：将部门、职位数据转为ID键名的集合，避免视图中嵌套循环判断，提升性能和代码可读性。
• 空状态处理：当员工无休假记录时，用colspan合并后续4列，给出明确提示。

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