Livewire表单多选教室存储容量并在下方表格展示的方案问询

1. 组件属性与方法定义 #

在你使用的Livewire组件中新增以下属性和方法，用于临时存储已选教室列表，处理添加、删除逻辑：

// 临时存储已选教室列表
public $selectedClassrooms = [];

// 添加教室到临时列表
public function addClassroom()
{
    // 基础参数校验
    $this->validate([
        'classroom_id' => 'required|exists:classrooms,id',
        'capacity' => 'required|integer|min:1',
    ]);

    // 避免重复添加同一个教室
    foreach ($this->selectedClassrooms as $item) {
        if ($item['classroom_id'] == $this->classroom_id) {
            $this->addError('classroom_id', '该教室已添加，请勿重复选择');
            return;
        }
    }

    // 写入临时列表，注意这里的classroom_name对应你的教室选项里的名称字段，可自行调整
    $this->selectedClassrooms[] = [
        'classroom_id' => $this->classroom_id,
        'classroom_name' => collect($this->classrooms)->where('id', $this->classroom_id)->first()['name'],
        'capacity' => $this->capacity,
    ];

    // 清空输入项方便下一次添加
    $this->reset(['classroom_id', 'capacity']);
}

// 从临时列表删除指定教室
public function removeClassroom($index)
{
    unset($this->selectedClassrooms[$index]);
    $this->selectedClassrooms = array_values($this->selectedClassrooms);
}

// 如果是编辑页面，需要在mount方法中加载已关联的教室数据
public function mount()
{
    if ($this->form->id) {
        $this->selectedClassrooms = Classroom::where('course_id', $this->form->id)
            ->get()
            ->map(function ($item) {
                return [
                    'classroom_id' => $item->classroom_id,
                    'classroom_name' => $item->classroom->name, // 需确保Classroom模型有对应关联
                    'capacity' => $item->capacity,
                ];
            })
            ->toArray();
    }
}

2. 前端模板调整 #

2.1 原有表单部分新增添加按钮 #

<div class="sm:col-start-1 sm:col-end-3 col-span-3  ">
    <x-select x-on:change="isShowing = $event.target.value" name="classroom_id" label="{!! __('Classroom') !!}" wire:model="classroom_id"
            id="classroom_id"
            :options="$this->classrooms"/>
    <x-jet-input-error for="classroom_id" class="mt-2" />
</div>
<div class="col-span-2 sm:col-span-1 " x-show="isShowing">
    <label class="tf-form-label" for="capacity">
        {{ __('Capacity') }}
    </label>
    <div class="flex gap-2">
        <input wire:model.debounce.250ms="capacity" type="text" name="capacity" id="capacity" class="tf-input flex-1" />
        <button type="button" wire:click="addClassroom" class="tf-btn primary">{{ __('Add Classroom') }}</button>
    </div>
    <x-jet-input-error for="capacity" class="mt-2" />
</div>

2.2 表单下方新增已选教室展示表格 #

<!-- 已选教室列表展示 -->
@if(count($selectedClassrooms) > 0)
<div class="col-span-3 mt-6">
    <h3 class="text-lg font-medium mb-3">{{ __('Selected Classrooms') }}</h3>
    <table class="w-full border-collapse">
        <thead>
            <tr class="bg-gray-50">
                <th class="border px-4 py-2 text-left">{{ __('Classroom Name') }}</th>
                <th class="border px-4 py-2 text-left">{{ __('Capacity') }}</th>
                <th class="border px-4 py-2 text-center">{{ __('Operation') }}</th>
            </tr>
        </thead>
        <tbody>
            @foreach($selectedClassrooms as $index => $item)
            <tr>
                <td class="border px-4 py-2">{{ $item['classroom_name'] }}</td>
                <td class="border px-4 py-2">{{ $item['capacity'] }}</td>
                <td class="border px-4 py-2 text-center">
                    <button type="button" wire:click="removeClassroom({{ $index }})" class="text-red-500 hover:text-red-700">{{ __('Delete') }}</button>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>
@endif

3. 存储逻辑调整 #

首先在表单提交时新增校验，确保至少选择了一个教室：

$this->validate([
    'selectedClassrooms' => 'required|array|min:1',
    'selectedClassrooms.*.classroom_id' => 'required|exists:classrooms,id',
    'selectedClassrooms.*.capacity' => 'required|integer|min:1',
]);

然后把原有单条插入的逻辑改成批量插入，编辑场景需要先清空旧关联数据：

$this->form->save();// 保存课程基础信息

// 编辑场景先删除旧的关联数据，避免重复
Classroom::where('course_id', $this->form->id)->delete();

// 批量插入新的教室关联数据
$classroomData = collect($this->selectedClassrooms)->map(function ($item) {
    return [
        'course_id' => $this->form->id,
        'classroom_id' => $item['classroom_id'],
        'capacity' => $item['capacity'],
        'created_at' => now(),
        'updated_at' => now(),
    ];
})->toArray();
Classroom::insert($classroomData);

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