返回的是一维数组[],需要将一维数组转化为二位数组[[],[]]
方式一:slice不会改变原数组,splice会改变原数组
let arr = [1,2,3,4,5,6,7,8]
let newArr = [arr.slice(0,4),arr.slice(4,8)]
console.log(newArr)
方式二:通过loadsh,不需要下载,cli中已经包含,可以直接使用,在计算属性中转换
import chunk from 'lodash/chunk'
data:{
list: [
{
"id": 20,
"title": "甜品饮品",
},
{
"id": 10,
"title": "商超便利",
},
{
"id": 15,
"title": "美食",
},
{
"id": 40,
"title": "甜品",
},
{
"id": 50,
"title": "便利",
},
{
"id": 65,
"title": "饮品",
},
{
"id": 70,
"title": "商超",
},
{
"id": 80,
"title": "鲜花",
},
{
"id": 90,
"title": "蛋糕",
},
{
"id": 33,
"title": "寿司",
},
{
"id": 11,
"title": "定食",
},
{
"id": 36,
"title": "泡菜",
},
{
"id": 78,
"title": "烤肉",
},
{
"id": 26,
"title": "日韩",
},
{
"id": 36,
"title": "料理",
},
],
},
computed:{
new(){
return chunk(this.arr,8) // chunk(需要转化的数组,二位数组中几个为一组)
}
}
方式三:遍历转换
data: {
list: [
{
"id": 20,
"title": "甜品饮品",
},
{
"id": 10,
"title": "商超便利",
},
{
"id": 15,
"title": "美食",
},
{
"id": 40,
"title": "甜品",
},
{
"id": 50,
"title": "便利",
},
{
"id": 65,
"title": "饮品",
},
{
"id": 70,
"title": "商超",
},
{
"id": 80,
"title": "鲜花",
},
{
"id": 90,
"title": "蛋糕",
},
{
"id": 33,
"title": "寿司",
},
{
"id": 11,
"title": "定食",
},
{
"id": 36,
"title": "泡菜",
},
{
"id": 78,
"title": "烤肉",
},
{
"id": 26,
"title": "日韩",
},
{
"id": 36,
"title": "料理",
},
],
},
computed: {
categorysArr() {
// 取出相关的数据
const bigArr = []
let smallArr = []
const { arr } = this
// 计算产生结果
arr.forEach(c => {
// 将小数组放入大数组(同一个小数组只能被保存一次)
if (smallArr.length === 0) {
bigArr.push(smallArr)
}
// 将分类对象放入小数组(小数组的长度最大为8)
smallArr.push(c)
// 如果满了, 重新准备一个新的小数组
if (smallArr.length === 8) {
smallArr = []
}
})
// 返回结果
return bigArr
}
}