Vue递归实现树形菜单方法实例

时间:2021-05-26

什么是树形菜单还是要简单的啰嗦一下,比如:


上图是截图自elementui的实例,实现方式是用文档结构(类似像原生Dom文档结构的写法)的方式,好处就是很灵活,可以方便的自定义,作为一个通用视图组件库这是正确的做法。

在实际的企业应用中,菜单要比这复杂很多,层次也要多很多,如果我们采取手动编写文档结构的方式,会导致代码亢长,阅读和维护都很低效。毫无疑问所有Vuer都会想到用一个数据结构来驱动文档结构。vue-router的数据结构恰恰就是完美的嵌套层次结构(树结构),同时vue文档中也提到了递归组件,基于这两点,我们来撸码,不过这次有所不同,我们选择使用render函数来实现,而不是在模板中递归。

数据结构:vue-router的数据结构

const routes = [ { name: 'home', path: '/home', meta: { text: '首页' } }, { name: 'inner', path: '/inner', meta: { text: '内部平台' }, children: [ { name: 'oa', path: 'oa', meta: { text: 'OA' } }, { name: 'jira', path: 'jira', meta: { text: 'Jira' } }, { name: 'wiki', path: 'wiki', meta: { text: 'Wiki' } }, { name: 'caiwu', path: 'caiwu', meta: { text: '财务' }, children: [ { name: 'chailv', path: 'chailv', meta: { text: '差旅' } }, { name: 'richang', path: 'richang', meta: { text: '日常' }, children: [ { name: 'taxi', path: 'taxi', meta: { text: '交通' } }, { name: 'tel', path: 'tel', meta: { text: '通信' } } ] } ] } ] }, { name: 'sec', path: '/sec', meta: { text: '审核' }, children: [ { name: 'acl', path: '/acl', meta: { text: 'ACL' } } ] }]

组件实现:

先看看render函数,其中包含一个递归函数elements:

render (r) { return r( 'el-menu', { props: { backgroundColor: "#545c64", textColor: "#fff", activeTextColor: "#ffd04b" }, on: { select: this.onSelect } }, this.elements(this.routes, r) ) }

elements函数:

elements (routes, r) { return routes .map(route => { if (!route.paths) route.paths = [] if (route.children && route.children.length) { return r( 'el-submenu', { props: { index: route.name } }, [ r( 'span', { slot: 'title' }, [ route.meta.text ] ), this.elements(route.children, r) ] ) } else if (route.path) { return r( 'el-menu-item', { props: { index: route.name } }, [ route.meta.text ] ) } else { return null } }) .filter(item => item) }

最终效果:


完整代码示例请戳:https://codepen.io/360vislab/pen/GQqBve

总结:

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对的支持。

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章