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

最新推荐文章于 2023-11-23 18:16:49 发布

聪聪ii

最新推荐文章于 2023-11-23 18:16:49 发布

阅读量415

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_41672186/article/details/132825667

版权

方案一：

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