Tabel yang saya coba siapkan seharusnya diformat sebagai berikut:


### Title (category)

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

Tampaknya cukup sederhana, dan saya telah meletakkan objek saya dalam format ini:

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

Untuk mencetaknya di frontend saya meletakkannya dalam format ini:

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

Sekarang, logika untuk tabel inilah yang membuat saya bingung. Saya tidak yakin bagaimana memecahnya menjadi 4 kelompok terpisah dan memberikan hasil dalam urutan tabel yang saya butuhkan di:

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>

Tapi saya tidak bisa mendapatkannya sejauh:

### Title (category)

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

Tetapi saya tidak dapat menambahkan jumlah total nilai di kolom bulan dan pada akhirnya jumlah total.

Saya tidak yakin persis saya hilang di sini, tapi saya butuh bantuan untuk mencoba mencari tahu ini.l

0
Samuel 29 Maret 2019, 22:45

1 menjawab

Jawaban Terbaik

Menyatakan Anda dapat memberikan data Anda dalam format seperti:

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

Sarannya adalah membuat komponen tabel khusus untuk digunakan dalam banyak kesempatan:

// 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: () => []
        }
    }
};

Anda dapat menggunakan komponen ini seperti:

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

Catatan: kode ini belum diuji.

1
Thomas Van der Veen 30 Maret 2019, 17:08