vue v-for横向遍历

** 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就行了
          }
        }

如果有其他好办法欢迎大佬告知

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值