** V-for的横向遍历**
对于二维数组只需要嵌套循环即可,这里说的是对一维数组遍历的特殊情况
在循环表格内容的时候一般都是纵向循环列。但是如果在一个多行3列的table里想要按从左到右的顺序就有些困难。
此时需要将要循环的数组以3个为分割,分割成多维数组,然后再使用v-for的嵌套循环即可
// 这里是html代码
<tbody>
<tr v-for="(item, index) in riskCategories" :key="index">
<td v-for="(i, j) in item" :key="j" class="beforeclass" :class="{ afterclass: num }">
<img :src="i.iconUrl" alt="" />
<span style="fontsize:10px">{{ i.name }}</span>
</td>
</tr>
</tbody>
//这里是data的数据及处理
data(){
return{
riskCategories:[],//接口拿到的数组
}
}
//对数组的处理
if (this.riskCategories) {
let n = Math.ceil(this.riskCategories.length / 3)//以3列为标准,数据总长度除以三向上取整可以得到表格该有的总行数
let res = []//作为分割后的数组的容器
for (let i = 0; i < n; i++) {
// slice() 方法返回一个从开始到结束(不包括结束)选择的数组的一部分浅拷贝到一个新数组对象。且原始数组不会被修改。
//每次循环都会执行一次语句
//第一行,1肯定是小于总行数的,执行分割语句,第0个到第3个切成一个数组为第一行数据,push到res
//以此类推。注意i是从0开始的,这样在拿i*3的时候才是从第0个拿到第3个的
let temp = this.riskCategories.slice(i * 3, i * 3 + 3)
res.push(temp)
}
//等一切都万事大吉了,就把新的多维数组重新赋值给老父亲就好了
this.riskCategories = res
}
刚开始是这个样子
最后的数组就长这个样子
但是这样做有一个问题,由于表格是遍历出来的td,所以当最后一行可能会有1个或者2个的情况,所以还需要做个自动补全否则会很丑,补全的方法就是填空项
//这里我设置的最多有18个子项的情况。也就是说6行整。调整的时候必须是3的倍数
if (this.riskCategories.length < 18) {
for (let i = this.cardinfo.riskCategories.length; i < 18; i++) {
this.riskCategories.push({ a: null, b: null })//a,b是一个子项里的数据,有什么就给这个字段null就行了
}
}
如果有其他好办法欢迎大佬告知