Как отобразить структуру данных в виде таблицы?

Есть задач отобразить таблицу следующего вида:

Получилось вывести на экран почти всю таблицу, но случается загвоздка с выводом раздела Итого Клиент 1, итого клиент 2
Который должен находить под полем Клиент

objects: [{         data: [         {           road: "Дорога_1",           attr1: [             {               attr2: "Клиент_1",               attr3: [{ road: "Дорога_2", cargo: "нефть1", amount: "1", wo_nds: "1" },                       { road: "Дорога_3", cargo: "нефть2", amount: "12", wo_nds: "12"},                       { road: "Дорога_4",cargo: "нефть3",amount: "3",wo_nds: "31" },               ],               attr4: {cargo: "СУММА", amount: "СУММА", wo_nds: "СУММА"}             },             {               attr2: "Клиент_2",               attr3: [{ road: "Дорога_5", cargo: "рис1", amount: "14", wo_nds: "41" },                       { road: "Дорога_6", cargo: "рис2", amount: "15", wo_nds: "61" },               ],               attr4: {cargo: "СУММА", amount: "СУММА", wo_nds: "СУММА"}              },           ],           TOTAL : {             cargo: 'TOTAL',             amount: 'TOTALA',             wo_nds: 'TOTALWO'           }         }, ]

<template v-for="obj in this.objects[0].data">         <tr :key="obj.id">           <td :rowspan="getRowCount(obj)">{{ obj.road }}</td>           <td :rowspan="obj.attr1[0].attr3.length">{{ obj.attr1[0].attr2 }}</td>           <td>{{ obj.attr1[0].attr3[0].road }}</td>           <td>{{ obj.attr1[0].attr3[0].cargo }}</td>           <td>{{ obj.attr1[0].attr3[0].amount }}</td>           <td>{{ obj.attr1[0].attr3[0].wo_nds }}</td>         </tr>          <tr v-for="val2 in obj.attr1[0].attr3.slice(1)" :key="val2.id">           <td>{{ val2.road }}</td>           <td>{{ val2.cargo }}</td>           <td>{{ val2.amount }}</td>           <td>{{ val2.wo_nds }}</td>         </tr>                    <template v-for="subkey in obj.attr1.slice(1)">           <tr :key="subkey.id">             <td :rowspan="subkey.attr3.length" class="road2">{{ subkey.attr2 }}</td>             <td>{{ subkey.attr3[0].road }}</td>             <td>{{ subkey.attr3[0].cargo }}</td>             <td >{{ subkey.attr3[0].amount }}</td>             <td >{{ subkey.attr3[0].wo_nds }}</td>           </tr>            <tr v-for="value3 in subkey.attr3.slice(1)" :key="value3.id">             <td class="road2">{{ value3.road }}</td>             <td class="road2">{{ value3.cargo }}</td>             <td class="road2">{{ value3.amount }}</td>             <td class="road2">{{ value3.wo_nds }}</td>           </tr>         </template>          <tr class="total_row" :key="obj.id">             <td>Итого {{ obj.road }}</td>             <td></td>             <td></td>             <td>{{ obj.TOTAL.cargo }}</td>             <td>{{ obj.TOTAL.amount }}</td>             <td >{{ obj.TOTAL.wo_nds }}</td>          </tr>       </template>       <tr v-for="obj in objects" :key="obj.id">         <td style="font-weight: bold;">Всего погрузки</td>         <td></td>         <td></td>         <td>{{ obj.ALL_TOTAL.cargo }}</td>         <td>{{ obj.ALL_TOTAL.amount }}</td>         <td>{{ obj.ALL_TOTAL.wo_nds }}</td>        </tr>

Дополнительно:

Структуру данных лучше засунуть в тег <code></code> (кнопка </>).
Иначе глаза вытекут в процессе просмотра, либо придется копировать и форматировать.

А что, нормальные имена свойствам придумать было никак? Зачем все эти attr? Непонятно же ни хрена.

Чтобы не прописывать отдельно строки с rowspan'ами и без, добавьте в v-for индексы, которые затем проверяйте в v-if ячеек с rowspan'ами - рендерить их нужно только при нулевых значениях.

Почему выводится только objects[0]? Неужели в objects может быть только один элемент? Заверните то, что сейчас есть в ещё один template, в котором будет v-for по элементам objects.

Можно немного сократить обращения к вложенным свойствам - для этого деструктурируйте элементы массивов, перебираемых в v-for.

methods: {   rowspan: attr1 => attr1.reduce((acc, n) => acc + n.attr3.length + 1, 0), },

<template v-for="obj in objects">   <template v-for="{ road, attr1, TOTAL } in obj.data">     <template v-for="({ attr2, attr3, attr4 }, iAttr1) in attr1">       <tr v-for="(attr3Item, iAttr3) in attr3">         <td :rowspan="rowspan(attr1)" v-if="!iAttr1 && !iAttr3">{{ road }}</td>         <td :rowspan="attr3.length" v-if="!iAttr3">{{ attr2 }}</td>         <td>{{ attr3Item.road }}</td>         <td>{{ attr3Item.cargo }}</td>         <td>{{ attr3Item.amount }}</td>         <td>{{ attr3Item.wo_nds }}</td>       </tr>       <tr>         <td colspan="2">Итого {{ attr2 }}:</td>         <td>{{ attr4.cargo }}</td>         <td>{{ attr4.amount }}</td>         <td>{{ attr4.wo_nds }}</td>       </tr>     </template>     <tr>       <td colspan="3">Итого {{ road }}:</td>       <td>{{ TOTAL.cargo }}</td>       <td>{{ TOTAL.amount }}</td>       <td>{{ TOTAL.wo_nds }}</td>     </tr>   </template> </template>

https://jsfiddle.net/ctnr98v7/4/

• 0xD34F Спасибо огромное! Совсем не мог разобраться как можно вообще такую вложенность грамонтно вывести, имена свойст согласен, хреновые придумал, поправлю!
• @0xD34F
  Не подскажите как нужно видоизменить эти циклы(пока что тотальный мрак для меня) чтобы вывести такого рода струтктуру, на бэке решили все изменить
  Готов заплатить за помощь, если это возможно

  { "data": { "Восточно-Сибирская ж. д.": { "data": { "ЧЭМК, АО": { "data": { "Южно-Уральская ж. д.": { "loads": 1, "revenue": 3876000.0 } }, "total": { "amount": 1, "revenue": 3876000.0 } } }, "total": { "amount": 1, "revenue": 3876000.0 } }, "Дальневосточная ж. д.": { "data": { "ППО": { "data": { "Красноярская ж. д.": { "loads": 152, "revenue": 615042080.0 } }, "total": { "amount": 152, "revenue": 615042080.0 } }, "ФЛК, ООО": { "data": { "Куйбышевская ж. д.": { "loads": 1, "revenue": 4017155.0000000005 } }, "total": { "amount": 1, "revenue": 4017155.0000000005 } } }, "total": { "amount": 153, "revenue": 619059235.0 } }, }, "total": { "amount": 2313, "revenue": 12780698437.256998 } }

  { "data": { "Восточно-Сибирская ж. д.": { "data": { "ЧЭМК, АО": { "data": { "Южно-Уральская ж. д.": { "loads": 1, "revenue": 3876000.0 } }, "total": { "amount": 1, "revenue": 3876000.0 } } }, "total": { "amount": 1, "revenue": 3876000.0 } }, "Дальневосточная ж. д.": { "data": { "ППО": { "data": { "Красноярская ж. д.": { "loads": 152, "revenue": 615042080.0 } }, "total": { "amount": 152, "revenue": 615042080.0 } }, "ФЛК, ООО": { "data": { "Куйбышевская ж. д.": { "loads": 1, "revenue": 4017155.0000000005 } }, "total": { "amount": 1, "revenue": 4017155.0000000005 } } }, "total": { "amount": 153, "revenue": 619059235.0 } }, }, "total": { "amount": 2313, "revenue": 12780698437.256998 } }

• Готов заплатить

  Алексей, ну раз готовы, тогда платите.