Есть данные в json, которые я отображаю в таблице через bootstrap vue
[
{"data": "data1", kvartal: '1'},
{"data": "data2", kvartal: '1'},
{"data": "data3", kvartal: '2'},
{"data": "data4", kvartal: '2'},
{"data": "data5", kvartal: '3'}
]
Нужно отобразить так, чтобы в начале каждого квартала стоял разделитель типа:
<table>
<tbody>
<tr>
<td colspan='2'>Квартал 1</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td colspan='2'>Квартал 2</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td colspan='2'>Квартал 3</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
</tbody>
</table>
Ума не приложу как это реализовать, спасибо за помощь