Question

所以我有如下数据：

[
  {
    "role": "p1",
    "activities": [
      {
        "games": ["g1", "g2", "g3"],
        "prize": "prize1"
      },
      {
        "games": ["g1", "g4", "g3"],
        "prize": "prize2"
      },
      {
        "games": ["g2", "g3"],
        "prize": "prize2"
      },
      ..... (n number of elements)
    ]
  },
  ... (m number of elements)

]

我需要使表头为“ role”和“ prize”，并且每个“ prize”头将具有4个以上的头，即“ g1”，“ g2”，“ g3”，“ g4”。相应地，我需要将具有相应游戏的单元格标记为“ Y”或“ N”。

结果如下图所示：

这是我到目前为止尝试过的：

<table>
            <col>
            <colgroup span="4" v-for="(a, idx) in items[1].activities" :key="idx"></colgroup>
            <tr>
              <th rowspan="2">Role</th>
              <th v-for="a in items[1].activities" colspan="4">{{a.prize}}</th>
            </tr>
            <tr>
              <thead>
                <tr>
                  <th scope="col">G1</th>
                  <th scope="col">G2</th>
                  <th scope="col">G3</th>
                  <th scope="col">G4</th>

                </tr>
              </thead>
            </tr>
            <tr v-for="item in items">
              <td>{{item.role}}</td>
              <tbody>
                <tr>
                  <td v-for="a in item.activities">{{a.games.includes('G1') ? 'Y' : 'N'}}</td>
                  <td v-for="a in item.activities">{{a.games.includes('G2') ? 'Y' : 'N'}}</td>
                  <td v-for="a in item.activities">{{a.games.includes('G3') ? 'Y' : 'N'}}</td>
                  <td v-for="a in item.activities">{{a.games.includes('G4') ? 'Y' : 'N'}}</td>
                </tr>
              </tbody>
            </tr>
            <tr>
            </tr>
          </table>

我得到一张看起来很奇怪的桌子，没有什么比我想要的要近。谁能告诉我我要去哪里错了？

我已经在Vue.js中编写了它，但是任何框架只要得到结果就可以被接受。

Answer 1

您希望您的桌子看起来如何？如果您画这张桌子，它实际上应该看起来如何？您应该映射原始数据对象，并决定如何将其转换为html标签。

为简化表格，您可以：删除和标签。仅使用和标签使表格简单。然后还要删除所有的rowpan =“ x”，因为这会使您的表单元格占用更多空间，这可能不是您想要的。还要删除scope =“ col”和所有colspan =“ x”属性。

创建一个异常的HTML表

1 个答案: