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": "第一章",
}, {
 "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>