js之一维数组转换为二维数组函数封装与vue中的使用

一、序言

今天，刚好我需要做一个任务，如下图，页面展示就这样，不过，会有一个问题，就是如何去设置一行几个，多列展示问题，我想了挺多办法，最终决定将原本一维的数据转成二维，在试过网上大多函数我试了都没用，不知道是不是我姿势不对。

二、代码

/**
 * 
  * @param arr  一维数组
  * @param n  设置几个为一行
  */
 arraytoDim (arr, n = 3) {
 	  // 定义数组
      let newArray = []
      // Math.ceil(arr.length / n) 是计算按照n列可以划分为几行，不满n则另其一行
      for (let i = 0; i < Math.ceil(arr.length / n); i++) {
        // 使用slice（start，end]进行截取,这个截取公式，可以自行研究
        newArray[i] = arr.slice(i * n, (i + 1) * n)
      }
      console.log(newArray)
    }

下面是 arr = [1,2,3,4,5,6,7,8] ，n = 3 的转换结果

具体在vue中，为避免多次循环，就直接利用v-for，注意index是以1开始的，所以slice需要改写，例如