Vue 在table中使用v-for，满足一定条数换行，动态控制table行数

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