模拟的数据
export const islandDetail = opation => {
const template = {
code: 200,
data: {
'list': [
{
id: '1',
title: '湖泊概况',
'children': [
{
id: '1.1',
title: '位置境域',
children: []
},
{
id: '1.2',
title: '地质构造',
children: []
},
{
id: '1.3',
title: '流域概况',
children: []
}
]
},
{
id: '2',
title: '气候特征',
'children': []
},
{
id: '3',
title: '水文特征',
'children': [
{
id: '3.1',
title: '水文水质',
children: []
},
{
id: '3.2',
title: '水位',
children: []
},
{
id: '3.3',
title: '生态特征',
children: []
},
{
id: '3.4',
title: '形态特点',
children: []
}
]
},
{
id: '4',
title: '自然资源',
'children': []
},
{
id: '5',
title: '治理开发',
'children': [
{
id: '5.1',
title: '旅游开发',
children: []
},
{
id: '5.2',
title: '环境治理',
children: []
},
{
id: '5.3',
title: '水利工程',
children: []
}
]
},
{
id: '6',
title: '最佳旅游时间',
'children': []
},
{
id: '7',
title: '治理开发',
'children': [
{
id: '7.1',
title: '外部交通',
children: []
},
{
id: '7.2',
title: '内部交通',
children: []
}
]
},
]
},
message: 'Success'
}
return Mock.mock(template)
}
页面布局
组件获取数据
islandDetail().then(res=> {
this.directory = res.data.list
this.directory.forEach((item,index) => {
item.order = index+1
})
//转化为一维数组
for(let i= 0; i < this.directory.length; i++) {
if(this.directory[i].children.length) {
this.directory = this.directory.slice(0,i+1).concat(this.directory[i].children,this.directory.slice(i+1))
delete this.directory[i].children
}
}
//平分
let arr2d = [this.directory1, this.directory2, this.directory3, this.directory4]
if (this.directory.length >= 4) {
let count = 0;
for (let arr of arr2d) {
count++;
if (count != 4) {
arr.push(...this.directory.slice(Math.round(this.directory.length / 4) * (count - 1), Math.round(this.directory.length / 4) * count));
} else {
arr.push(...this.directory.slice(Math.round(this.directory.length / 4) * (count - 1)));
}
}
}
})