What should I do if the vue v-for circular table wants the fourth < th > or < td > tag to automatically wrap to the next row?

<tr v-for="item in xxList">
    //  <td> 
    <td>{{item}}</td>
    // 10 item 10 item 
    //  3 
    //  td  33%  
</tr>

I hope the effect is as follows:

clipboard.png

Mar.02,2021

I'm a rookie. I think maybe you need to change the original data to a two-dimensional array before rendering


Change the

tag. Do not use the table 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%;
}

you can change your xxList into the form of [[A, B, C], [D, E, F]]

.
{{td}}</td>
</tr>
Menu