Question

我正在尝试绘制一个学生的表格，其中每一列都是一个主题，并且在每一列下列出了所有未通过该课程的学生。问题是我的数据是以行结构而不是列的形式形成的。这是表行数据的示例：

[{"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>

我的问题是，从列的角度来看，如何修改数据以使行之间没有空单元格？

要强调：

name name name        name name name
          name  == >  name name name
     name                  name name
name name name

Answer 1

要只招收失败的学生，您可以根据原始数据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>

Answer 2

所以您真正想要的不是一张表，因为一行没有任何意义。您想要的是更多左右排列的列。

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

要为特定考试（例如第i次考试）创建列表，您可以遍历学生，并且如果数组的第i个元素的“通过”值为true，则将学生的姓名添加到列表。

第i次考试的伪代码：

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

并创建一个单列表，对myList中的值进行迭代。当然，“ i”也可以作为循环的一部分，以迭代考试。

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

2 个答案: