Javascript 折叠使用vuejs呈现的表中的空单元格

我试图呈现一个学生的表格，其中每一列都是一个主题， 在每一列下面都列出了所有在这门课上不及格的学生。 问题是我的数据是以行结构而不是列结构形成的。 以下是表格行数据的示例：

[{"name":"dummy1","pass":true},{"name":"dummy1","pass":false},{"name":"dummy1","pass":false}]

在本例中，有3个主题，因此行长度为2（包含3项）

现在，如果第二个学生的行如下所示：

[{"name":"dummy2","pass":false},{"name":"dummy2","pass":false},{"name":"dummy2","pass":false}]

发生的情况是，第一列以空白单元格开头，因为第一个学生通过了第一个科目，而该列中的第一个名字将只出现在第二行中

HTML代码如下所示：

<div class="table-row" v-for="(row, i) in trows">
   <div class="item" v-for="(item, i) in row" >
      <span class="item-content" v-if="!item.pass">{{item.name}}</span>
      <span class="item-content" v-else></span>
   </div>
</div> 

---

所以你想要的不是一张真正的桌子，因为一行没有任何意义。您需要的更多是一系列列，并排排列

我要做的是创建一个通过第一次考试的学生列表，并用该列表创建一个单列表。然后继续其他的考试

要为特定的考试（例如第i次考试）创建列表，可以循环遍历学生，如果数组的第i个元素的值为true，则将学生的姓名添加到列表中

第i次考试的伪代码：

examId = i
myList = []
for studentResults in studentsResultsList
  if studentResults[i]['pass']
    myList.push(studentResults[i]['name'])

并创建一个单列表，迭代myList中的值。

---

当然，“i”也可以是循环的一部分，以重复考试。

要仅获取失败的学生，您可以基于原始数据创建计算值

trows

：

computed: {
    failedOnlyTrows() {
        return this.trows.map(row => row.filter(({ pass }) => !!pass));
    }
}

然后可以使用CSS:flex将它们显示为列而不是行：

<div class="table-row" style="display:flex;flex-direction:row;" v-for="(row, i) in failedOnlyTrows">
   <div class="item" v-for="(item, i) in row" >
      <span class="item-content" v-if="!item.pass">{{item.name}}</span>
      <span class="item-content" v-else></span>
   </div>
</div> 

{{item.name}

<div class="table-row" style="display:flex;flex-direction:row;" v-for="(row, i) in failedOnlyTrows">
   <div class="item" v-for="(item, i) in row" >
      <span class="item-content" v-if="!item.pass">{{item.name}}</span>
      <span class="item-content" v-else></span>
   </div>
</div>