vant树型菜单多级_树形多级菜单数据源嵌套结构与扁平结构互转

1.前言

在日常开发中，往往会有这样的需求：根据后端返回的数据，动态渲染出一颗多级导航菜单树，类似于计算机中资源管理器的样子。如下图所示：

要实现这样的需求，其实不难，只是对后端返回的数据源有要求，如果后端返回的数据能够很清楚的表现出节点与节点之间的层级关系，那么前端实现起来就易如反掌。

2.数据源格式

一般来说，要想动态的渲染出一个树形菜单，如下所示的数据源格式对前端开发人员来说是十分友好的。

var data = [

{

name: "父节点1",

children: [

{

name: "子节点11",

children:[

{

name: "叶子节点111",

children:[]

},

{

name: "叶子节点112",

children:[]

},

{

name: "叶子节点113",

children:[]

},

{

name: "叶子节点114",

children:[]

}

]

}

//...

]

},

];

后端返回这样的数据源格式，节点之间的层级关系一目了然，前端人员拿到数据，只需进行递归遍历，并判断children.length是否等于0，等于0表明当前节点已为叶子节点，停止遍历即可。在上一篇博文vue+element UI以组件递归方式实现多级导航菜单中，动态渲染多级导航菜单，也是推荐使用这种数据源格式的。

3.问题痛点

虽然前端人员想法是好的，但是在后端，这些数据通常是存储在关系型数据库中，后端开发将数据从数据库中取出来返回给前端的数据往往这样子的：

const data =[

{ id:1, pid:0, name:"父节点1" },

{ id:11, pid:1, name:"父节点11" },

{ id:111, pid:11, name:"叶子节点111" },

{ id:112, pid:11, name:"叶子节点112" },

{ id:113, pid:11, name:"叶子节点113" },

{ id:114