Javascript 如何在vuejs中创建动态行跨度表？

如何使用vueJs将以下数据呈现到具有行跨度的html表中

排列

这是结果的一个例子

---

首先，您可以使用Laravel Collection方法按给定的键“total”对集合的项进行分组

控制器代码

//...

$myElequentCollection = Model::where(...)->get();

$grouped = $myElequentCollection->groupBy('total');

$data = $grouped->toArray();

//outpout
/*
    [
        '45.000' => [
            ['id' => '1', 'name' => 'Dog', ...],
            ['id' => '2', 'name' => 'Cat', ...],
        ],
        '55.000' => [
            ['id' => '3', 'name' => 'Fish', ...],
        ],
        '75.000' => [
            ['id' => '4', 'name' => 'Bird', ...],
        ],
    ]
*/

//...

return view('viewName', compact('data'));

HTML代码示例

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    @foreach($data as $item)
    @foreach($item as $row)
    <tr>
      <td> {{ $row['id'] }}</td>
      <td> {{ $row['name'] }}</td>
      @if($loop->first )
      <td rowspan="{{ count($item) }}">{{ $row['total'] }}</td>
      @else
      <td>{{ $row['total'] }}</td>
      @endif
    </tr>
    @enforeach
    @endforeach
  </tbody>
</table>

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    @foreach($data as $item)
    @foreach($item as $row)
    <tr>
      <td> {{ $row['id'] }}</td>
      <td> {{ $row['name'] }}</td>
      @if($loop->first )
      <td rowspan="{{ count($item) }}">{{ $row['total'] }}</td>
      @else
      <td>{{ $row['total'] }}</td>
      @endif
    </tr>
    @enforeach
    @endforeach
  </tbody>
</table>