自动补齐多维数组

55 阅读1分钟

遇到一个渲染问题,需要用到多维数组进行渲染

//如
Array(10).fill(Array(4).fill({a:''}))

image.png

问题:后端返回数据长度不定义,需要手动构建需要的数组,进行渲染

实现代码

  let targetList = []
      const rowNum = 4
      let serList = this.formData.serList
      // let serList = Array(15).fill({ spNo: '', num: '' })
      if (serList.length == 0) targetList = []
      if (serList.length < rowNum) {
        targetList = [serList.concat(Array(rowNum - serList.length).fill({ spNo: '', num: '' }))]
      } else {
        // 判断serList的长度是否是 rowNum 的整数倍
        const rest = serList.length % rowNum
        if (rest != 0) {
          const restArr = Array(rowNum - rest).fill({ spNo: '', num: '' })
          serList = serList.concat(restArr)
        }
        for (let index = rowNum; index <= serList.length; index += rowNum) {
          const group = serList.slice(index - rowNum, index)
          targetList.push(group)
        }
      }

      return targetList
   

这样就可以动态设置了