遇到一个渲染问题,需要用到多维数组进行渲染
//如
Array(10).fill(Array(4).fill({a:''}))
问题:后端返回数据长度不定义,需要手动构建需要的数组,进行渲染
实现代码
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
这样就可以动态设置了