方案一：

標簽換掉。不要用表格 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%; }

方案二：

<table id="example" class="table table-bordered"><tbody> <!--滿足4條數據換行--><tr v-for="(chapter,index) in chapterList" v-if="index%4==0"><td>{{chapterList[index]==null?"":chapterList[index].name}}</td><td>{{chapterList[index+1]==null?"":chapterList[index+1].name}}</td><td>{{chapterList[index+2]==null?"":chapterList[index+2].name}}</td><td>{{chapterList[index+3]==null?"":chapterList[index+3].name}}</td></tr></tbody></table>

我遍歷的數據

"chapterList": [{"id": 1,"novelCode": "fgjgjgjh","name": "第一章防守對方答復","content": "案發時發生","wordNum": 3533,"path": null,"createtime": "2020-01-12T07:37:39.000+0000","updatetime": "2020-01-12T07:37:42.000+0000","status": 0 }, {"id": 2,"novelCode": "fgjgjgjh","name": "第二章防守對方答復","content": "案發生","wordNum": 3533,"path": null,"createtime": "2020-01-12T07:37:39.000+0000","updatetime": "2020-01-12T07:37:42.000+0000","status": 0 }, {"id": 3,"novelCode": "fgjgjgjh","name": "第三章防守對方答復","content": "案發生222","wordNum": 3533,"path": null,"createtime": "2020-01-12T07:37:39.000+0000","updatetime": "2020-01-12T07:37:42.000+0000","status": 0 }, {"id": 4,"novelCode": "fgjgjgjh","name": "第四章防守對方答復","content": "案發生222","wordNum": 3533,"path": null,"createtime": "2020-01-12T07:37:39.000+0000","updatetime": "2020-01-12T07:37:42.000+0000","status": 0 }, {"id": 5,"novelCode": "fgjgjgjh","name": "第五章防守對方答復","content": "案發生222","wordNum": 3533,"path": null,"createtime": "2020-01-12T07:37:39.000+0000","updatetime": "2020-01-12T07:37:42.000+0000","status": 0 }, {"id": 6,"novelCode": "fgjgjgjh","name": "第六章防守對方答復","content": "案發生222","wordNum": 3533,"path": null,"createtime": "2020-01-12T07:37:39.000+0000","updatetime": "2020-01-12T07:37:42.000+0000","status": 0 }]

?方案三

<tr v-for="(oneRights,index) in rights" v-if="index%3==0"><th v-for="i in 3" v-if="rights[i-1+index] != null"><input name="rights-name" type="checkbox">{{ rights[i-1+index].description }}</th></tr>

感謝分享https://blog.csdn.net/weixin_38225800/article/details/103981140?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-2&spm=1001.2101.3001.4242?

?

總結

以上是生活随笔為你收集整理的vue v-for循环表格 希望第四个＜th＞或＜td＞标签自动换到下一行应该怎么做？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。