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

最新推荐文章于 2024-07-16 15:13:51 发布

小仙女de成长

最新推荐文章于 2024-07-16 15:13:51 发布

阅读量4.5k

点赞数 3

分类专栏： vue

原文链接：https://segmentfault.com/q/1010000014320782

版权

vue 专栏收录该内容

218 篇文章 11 订阅

订阅专栏

方案一：

标签换掉。不要用表格 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