DDR爱好者之家 Design By 杰米
什么是树形菜单还是要简单的啰嗦一下,比如:
上图是截图自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
总结:
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对的支持。
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
更新日志
2025年10月29日
2025年10月29日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]

