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

思路

1、计算出需要的行数tr_num

2、循环遍历,只取当前行tr_num的td

3、 当trNum是最后一行并且不是最后一个,计算剩余空位数，循环填补

直接上代码

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

来源

链接: 掘金平台 作者：Joinze