vue v-for循环表格 希望第四个<th>或<td>标签自动换到下一行应该怎么做？

Question

<tr v-for="item in xxList">
    // 这里写一个 <td> 标签
    <td>{{item}}</td>
    // 那么如果有10个 item 那么这10个 item 就都在一行了
    // 希望一行只放 3 个应该怎么做呢
    // 把 td 宽度设置为 33% 第四个也不会自动换行 而是挤在同一行
</tr>

希望效果是这样的：

Answer 1

我是小白，我觉得可能你需要把原始数据更改为二维数组再渲染

Answer 2

标签换掉。不要用表格 tr td

<div v-for="item in xxList" class="box">
    <div class="content">{{item}}</div>
</div>

.box{
    display: flex;
    flex-warp: wrap;
}
.content{
    width: 33%;
}

Answer 3

可以把你的xxList变成[[A, B, C], [D, E, F]]的形式

<tr v-for="tr in xxList">
  <td v-for="td in tr">{{td}}</td>
</tr>