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

Question

[Алексей]

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

Получилось вывести на экран почти всю таблицу, но случается загвоздка с выводом раздела Итого Клиент 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>

Comments

[Ivan Kudinov]

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

[Алексей]

Ivan Kudinov, поправил

Answer 1

[0xD34F]

А что, нормальные имена свойствам придумать было никак? Зачем все эти 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/

Comments

[Алексей]

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
    }
}

[0xD34F]

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

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