什么是树形菜单，或者您希望简短，例如：

上图是来自elementui的截图示例，在一个文档结构中实现(类似于原来的Dom文档结构)。优点是灵活，可轻松定制。作为一个通用视图组件库，这是正确的方法。

在实际的企业应用中，菜单要复杂得多，而且有很多层。如果采用手工编写文档结构的方法，会导致代码冗长，读取和维护效率低下。毫无疑问，所有Vuer都会想到用一个数据结构来驱动文档结构。vue-router的数据结构只是一个完美的嵌套层次结构(树形结构)，vue文档中也提到了递归组件。基于这两点，我们将对代码进行解码，但这次不同，我们选择使用渲染函数，而不是模板中的递归。

数据结构：虚拟路由器的数据结构

constructes=[{name : ' home '，path:'/home '，meta3360 {text:' home page'}，{name3360' inner '，path3360'/inner '，Meta: {text: '内部平台' }，children: [{name3360' OA '，path:' OA '，meta: {text3360' OA'}，{ nameMeta: {text:' audit'}，children: [{name3360' ACL '，path:'/ACL '，meta: {text:' ACL'}}]组件实现：

首先看一下render函数，它包含一个递归函数元素：

render (r) { return r('el-menu '，{ prop s : { background color : ' # 545 c 64 '，textColor: '#fff '，activeTextColor: '#ffd04b' }，On : {select : this。在select}}上，这是。元素(这个。routes，r))}元素功能：

元素(路线，r) {返回路线。map(route={ if(！route . paths)route . paths=[]if(route . children route . children . length){ return r(' El-子菜单'，{ prop : { index : route . name } }，[ r('span '，{ slot: 'title' }，[ route.meta.text ])，this.elements(route.children，r)]} else if(route . path){ return r(' El-menu-item '，{ prop 3: { index : route . name }，}滤镜(item=item)}最终效果：

请在完整的代码示例上盖章：https://codepen.io/360vislab/pen/GQqBve

总结：

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。有问题可以留言交流。谢谢你的支持。