Настройка сложного формата таблицы

Question

Таблица, которую я пытаюсь настроить, должна быть отформатирована следующим образом:

---

### Title (category)

ColumnName(result)|January|February|...|December|Total|
------------------|-------|--------|---|--------|-----|
Column1           |2      |33      |...|32      |122  |
Column2           |102    |2       |...|42      |200  |
Column3           |32     |31      |...|22      |132  |

Кажется достаточно простым, и я поместил свой объект в этот формат:

[
  {
    "category": "Title",
    "result": "Column Name",
    "total": 32,
    "date": "March"
  },
  //...
]

Чтобы напечатать его во внешнем интерфейсе, я поставил его в следующем формате:

{
  "Category": {
    "March": [
      {
        "st_category": "Category",
        "date": "March",
        "column1": 0
      },
    ],
    "April": [/*...*/],
    "May": [/*...*/],
  },
  "OtherCategory": {/*...*/},
  "OtherCategory": {/*...*/},
}

Теперь логика таблицы - это то, что меня смущает.Я не уверен, как разбить это на 4 отдельные группы и дать результаты в порядке таблицы, в которой я нуждаюсь это в:

export default {
  props: ['dataEffects'],
  data() {
    return {
      effects: JSON.parse(this.dataEffects)
    }
  },
  computed: {
    headers() {
      return this.effects.headers;
    },
    results() {
      return this.effects.table;
    },
    availableEffects() {
      return this.effects.effects;
    },
  }
}

<template>
  <div class="card">

    <div class="card-header">
      Student Effect
    </div>

    <div class="card-body">

      <div v-for="(result, index) in results"
        v-bind:key="index">
        <h5 class="mt-3">{{ index }}</h5>
        <table class="table table-hover">
          <thead>
            <tr>
              <th></th>
              <th v-for="(month, monthIndex) in result"
                v-bind:key="monthIndex">
                {{ monthIndex }}
              </th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(effects, key) in availableEffects"
              v-bind:key="key">
              <th>{{ effects.description }}</th>
              <td v-for="(effect, effectIndex) in result"
                v-bind:key="effectIndex">
                {{ totals }}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

  </div>
</template>

Но я просто не могу понять, насколько:

### Title (category)

ColumnName(result)|January|February|...|December|Total|
------------------|-------|--------|---|--------|-----|
Column1           |-      |-       |...|-       |-    |
Column2           |-      |-       |...|-       |-    |
Column3           |-      |-       |...|-       |-    |

Но я не могу добавить общее количество значений в месяцестолбцы и, в конце, общее количество.

Я не уверен, что именно здесь мне не хватает, но мне нужна помощь, чтобы понять это. *

Answer 1

Заявив, что вы можете предоставить свои данные в формате, подобном:

[
    {
        "column_name": "Column1",
        "january": 123,
        "february": 321,
        ...
    },
    {
        "column_name": "Column2",
        "january": 456,
        "february": 654,
        ...
    },
    ...
]

Было бы предложено создать пользовательский компонент таблицы, который будет использоваться во многих случаях:

// MyTable.vue
<template>
    <table>
        <thead>
            <tr>
                <th v-for="column in columns" :key="`head_${column}`">
                    {{ column }}
                </th>
            </tr>
        </thead>

        <thead>
            <tr v-for="(row, index) in rows" :key="`row_${index}`">
                <th v-for="column in columns" :key="`row_${index}_${column}`">
                    {{ column }}
                </th>
            </tr>
        </thead>
    </table>
</template>

export default {
    name: 'my-table'
    props: {
        columns: : {
            type: Array,
            default: () => []
        },
        rows: {
            type: Array,
            default: () => []
        }
    }
};

Выможно использовать этот компонент, например:

<my-table :columns="['column_name', 'january', 'february', ...]" :rows="this.effects"

Примечание: этот код не был проверен.