VUE table 每行5个算法，不足5个也补齐

<table class="tb1">
	<tr>
	  <td colspan="5" style="text-align: left;"><b>标题</b></td>
	</tr>
	
	<!-- 计算需要多少行 trNum -->
	<tr v-for="trNum in Math.ceil(dataList.length/5)" class="tb1" :key="trNum">
	  <!-- 计算并且循环遍历出在当前tr行内的td -->
	  <td class="tb1" v-if="(index < trNum * 5) && (index>=((trNum -1) * 5))" v-for="(item,index) in dataList" :key="item.id">
		<!-- 使用浏览器打印功能，用if判断，不使用true-value 绑定 -->
		<input v-if="item.selectEd==1"  checked type="checkbox"/> 
		<input v-else type="checkbox"/> 
		
		{{item.riskName}}
	  </td>
	  
	  <!-- 补齐 当trNum是最后一行并且不是最后一个,计算剩余空位数，循环填补 -->
	  <td class="tb1" v-if="trNum == Math.ceil(dataList.length/5) && trNum*5 != dataList.length" v-for="td_empty in (Math.ceil(dataList.length/5)*5-dataList.length)" :key="td_empty">
	  &nbsp;&nbsp;
	  </td>
	  
	</tr>
 </table>

问题：vue不推荐在同一元素上使用 v-if 和 v-for，但上述代码目前是可以使用。

vue不推荐一起使用的说明链接如下

doc.vue-js.com/v2/guide/li…

doc.vue-js.com/v2/style-gu…