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

 

Logo

前往低代码交流专区

更多推荐