Vue 在table中使用v-for,满足一定条数换行

 <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
}]

 

发布了4 篇原创文章 · 获赞 1 · 访问量 8213
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览