怎样使用vue.js与element-ui实现菜单树形结构-tutorial js-php.cn

这次给大家带来怎样使用vue.js与element-ui实现菜单树形结构，使用vue.js与element-ui实现菜单树形结构的注意事项有哪些，下面就是实战案例，一起来看一下。

场景：根据业务要求，需要实现活动的树形菜单，菜单数据由后台返回，最后的效果图如下：

后台返回的数据格式是这个样子的：

data=[{ pID:'1',//父ID name:'目录一', menuID:'m1',//本身ID 　　　　　　　　　　　　　　isContent:false//判断是否是目录 }, { pID:'1', name:'目录二', menuID:'m2', 　　　　　　　　　　　　　　isContent:false }, { pID:'m1', name:'目录一--菜单一', menuID:'m11', 　　　　　　　　　　　　　　isContent:true }, { pID:'m1', name:'目录一--目录一', menuID:'m12', 　　　　　　　　　　　　　　isContent:false }, 　　　　　　　　　　　{ 　　　　　　　　　　　　pID:'m12', name:'目录一--目录一--菜单一', menuID:'m121', 　　　　　　　　　　　　 isContent:true }, { pID:'m2', name:'目录二--菜单一', menuID:'m21', 　　　　　　　　　　　　　　isContent:true }, { pID:'m2', name:'目录二--菜单二', menuID:'m22', 　　　　　　　　　　　　　　isContent:true }, ]

Salin selepas log masuk

这是一串具有父子关系的数据，首先就是要把这一大串数据转化成树形结构：

tree(){ let data=[{ pID:'1',//父ID name:'目录一', menuID:'m1',//本身ID 　　　　　　　　　　　　　　isContent:false//判断是否是目录 }, { pID:'1', name:'目录二', menuID:'m2', 　　　　　　　　　　　　　　isContent:false }, { pID:'m1', name:'目录一--菜单一', menuID:'m11', 　　　　　　　　　　　　　　isContent:true }, { pID:'m1', name:'目录一--目录一', menuID:'m12', 　　　　　　　　　　　　　　isContent:false }, 　　　　　　　　　　　{ 　　　　　　　　　　　　pID:'m12', name:'目录一--目录一--菜单一', menuID:'m121', 　　　　　　　　　　　　 isContent:true }, { pID:'m2', name:'目录二--菜单一', menuID:'m21', 　　　　　　　　　　　　　　isContent:true }, { pID:'m2', name:'目录二--菜单二', menuID:'m22', 　　　　　　　　　　　　　　isContent:true }, ] let tree = [] for(let i=0;i
        
         Salin selepas log masuk

运行完后返回的结构就是这个样子：

[{"pID":"1","name":"目录一","menuID":"m1","isContent":false,"list":[{"pID":"m1","name":"目录一--菜单一","menuID":"m11","isContent":true,"list":[]},{"pID":"m1","name":"目录一--目录一","menuID":"m12","isContent":false,"list":[{"pID":"m12","name":"目录一--目录一--菜单一","menuID":"m121","isContent":true,"list":[]}]}]},{"pID":"1","name":"目录二","menuID":"m2","isContent":false,"list":[{"pID":"m2","name":"目录二--菜单一","menuID":"m21","isContent":true,"list":[]},{"pID":"m2","name":"目录二--菜单二","menuID":"m22","isContent":true,"list":[]}]}]

Salin selepas log masuk

接下来就要展示了，项目中用的element-ui的导航菜单组件，为了实现这样的树形结构，将每一级的菜单单独作为一个组件，通过判断isContent的值来递归。我直接把代码贴出来

Salin selepas log masuk

tree-menu组件的代码：

Salin selepas log masuk

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！