Vue 在table中使用v-for,满足一定条数换行
<table id="example" class="table table-bordered"><tbody><!--满足4条数据换行--><tr v-for="(chapte...
·
<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": "第一章", }, { "id": 2, "novelCode": "fgjgjgjh", "name": "第二章", }, { "id": 3, "novelCode": "fgjgjgjh", "name": "第三章", }, { "id": 4, "novelCode": "fgjgjgjh", "name": "第四章", }, { "id": 5, "novelCode": "fgjgjgjh", "name": "第五章", }, { "id": 6, "novelCode": "fgjgjgjh", "name": "第六章", }]
补充更优雅的写法
<tr v-for="(chapter,index) in chapterList" v-if="index%4==0"> <th v-for="i in 4" v-if="chapterList[i-1+index] != null"> {{ chapterList[i-1+index].name}} </th> </tr>
更多推荐
已为社区贡献1条内容
所有评论(0)