鍍金池/ 問答/HTML/ vue v-for循環(huán)表格 希望第四個<th>或<td>

vue v-for循環(huán)表格 希望第四個<th>或<td>標簽自動換到下一行應該怎么做？

<tr v-for="item in xxList">
    // 這里寫一個 <td> 標簽
    <td>{{item}}</td>
    // 那么如果有10個 item 那么這10個 item 就都在一行了
    // 希望一行只放 3 個應該怎么做呢
    // 把 td 寬度設(shè)置為 33% 第四個也不會自動換行 而是擠在同一行
</tr>

希望效果是這樣的：

clipboard.png

回答
編輯回答
瘋子范

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

<tr v-for="tr in xxList">
  <td v-for="td in tr">{{td}}</td>
</tr>
2018年9月19日 02:59
編輯回答
尐飯團

我是小白，我覺得可能你需要把原始數(shù)據(jù)更改為二維數(shù)組再渲染

2018年3月10日 03:00
編輯回答
扯不斷

標簽換掉。不要用表格 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%;
}
2017年2月11日 22:43