Question

所以我的桌子上有四行。我正在尝试用列表中的数据填充每一列。以下是从左到右生成表格单元格的过程，但是我正在尝试从上到下填充。我不确定如何使用列表来做到这一点。

  <template>
    <table>
    <tr>
      <td>Header 1</td>
      <td>Header 2</td>
      <td>Header 3</td>
      <td>Header 4</td>
    </tr>
    <tr>
      <template v-for='job in list1'>
      <td>{{ job.id }}</td>
      </template>
    </tr>
    <tr>
      <template v-for='job in list2'>
      <td>{{ job.id }}</td>
      </template>
    </tr>
    <tr>
    <template v-for='job in list3'>
      <td>{{ job.id }}</td>
    </template>
    </tr>
  </table>
  </template>

Answer 1

您可以在制作表格之前对列表进行预处理。如：

let preprocessed = [];

for(let i = 0; i < list1.length || i < list2.length || i < list3.length; i++){
    let this_row = [];

    if(list1[i])
        this_row.push(list1[i]);
    else
        this_row.push(null);

    if(list2[i])
        this_row.push(list2[i]);
    else
        this_row.push(null);

    if(list3[i])
        this_row.push(list3[i]);
    else
        this_row.push(null);

    preprocessed.push(this_row);
}

现在您有一个要迭代的列表，其中每个元素都是原始列表中相应索引处的元素的列表。

<template>
    <table>
        <tr>
            <td>Header 1</td>
            <td>Header 2</td>
            <td>Header 3</td>
        </tr>    
        <template v-for='elems in preprocessed'>
            <tr>
                <template v-for='elem in elems'>
                    <td v-if="elem !== null">{{ elem.id }}</td>
                    <td v-if="elem === null"></td>
                </template>
            </tr>
        </template>
    </table>
</template>

注意：这都是未经测试的，但是应该可以给您一个想法。

Answer 2

默认情况下，HTML表在顶部显示标题，在数据从左至右显示。

要扭转它，您应该尝试这样的事情

<template>
  <table>
    <tbody>
      <tr>
        <td>Header 1</td>
        <td v-for="job in list1">{{ job.id }}</td>
      </tr>
      <tr>
        <td>Header 2</td>
        <td v-for="job in list2">{{ job.id }}</td>
      </tr>
      <tr>
        <td>Header 3</td>
        <td v-for="job in list3">{{ job.id }}</td>
      </tr>
    </tbody>
  </table>
</template>

如何使用CSS / JS为表中的每一行创建不同长度的列？

2 个答案: