VUE table 每行5个算法，不足5个也补齐
思路1、计算出需要的行数tr_num2、循环遍历,只取当前行tr_num的td3、 当trNum是最后一行并且不是最后一个,计算剩余空位数，循环填补
直接上代码来源
思路
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">
 
; 
;
</td
>
</tr
>
</table
>
来源
链接: 掘金平台 作者：Joinze
