根据pid来确定父级,顶级菜单pid为null
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
width: 200px;
height: 100px;
background-color: red;
transition: all 3s;
}
/* @keyframes show {
form{
width: 200px;
}
to{
width: 800px;
}
} */
</style>
</head>
<body>
</body>
<script>
let menus = [
{
pid:null,
id:1,
name:'计算机'
},
{
pid:null,
id:2,
name:'水果'
},
{
pid:2,
id:'taiguo',
name:'泰国水果'
},
{
pid:'taiguo',
id:'apple',
name:'苹果'
},
{
pid:2,
id:'hanguo',
name:'韩国水果'
},
{
pid:null,
id:3,
name:'蔬菜'
},
{
pid:1,
id:'shenzhou',
name:'神舟'
},
{
pid:1,
id:'lenovo',
name:'联想'
},
{
pid:'lenovo',
id:'km-7',
name:'km-7型号'
},
{
pid:'lenovo',
id:'km-8',
name:'km-8型号'
},
]
function getMenus(menus){
// 分而自治
let parents = menus.filter((p)=>!p.pid)
let childrens = menus.filter((c)=>c.pid)
toTree(parents,childrens)
function toTree(parents,childrens){
parents.forEach((p)=>{
childrens.forEach((c,i)=>{
if(c.pid === p.id){
let _c = JSON.parse(JSON.stringify(childrens))
_c.splice(i,1)
toTree([c],_c)
if(p.children){
p.children.push(c)
}else{
p.children=[c]
}
}
})
})
}
return parents
}
let menuTree = getMenus(menus)
console.log('menuTree',menuTree,);
</script>
</html>