Come si creano tabelle con apertura dei file dinamiche in vuejs?

2020-02-15 javascript html laravel vue.js

Come si trasformano i seguenti dati in una tabella html con rowpan usando vueJs?

Vettore

[
  {
    "id": 1,
    "name": "Dog",
    "param_id": 5,
    "total": "45.000"
  },
  {
    "id": 2,
    "name": "Cat",
    "param_id": 5,
    "total": "45.000"
  },
  {
    "id": 3,
    "name": "Fish",
    "param_id": null, 
    "total": "55.000"
  },
  {
    "id": 4,
    "name": "Bird",
    "param_id": 2, 
    "total": "75.000"
  }
]

Questo è un esempio del risultato

TES

Answers

Per prima cosa puoi usare il metodo groupBy Laravel Collection per raggruppare gli elementi della collezione in base a una determinata chiave ( 'total' )

Codice del controller

//...

$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'));

Esempio di codice 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>

Related