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

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