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

但是我不能在月份列中添加值的总数，而在末尾不能添加总数。

我不确定我是否真的想念这里，但是我需要一些帮助来找出答案。l

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"

注意：此代码尚未经过测试。

设置复杂表格格式

1 个答案: