vue动态二级菜单,vue三级联动下拉菜单
这篇文章主要为大家详细介绍了某视频剪辑软件递归实现三级菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件递归实现三级菜单的具体代码，供大家参考，具体内容如下
父组件
模板
div class= menu-level-menu menu-level-menu-enter v-if= showLevelMenu
菜单项class= menu-item :菜单日期=菜单列表/菜单项
/div
/模板
子组件
模板
差异
div class= v-for=(menu，index) in menuDate :key=index
//每一个菜单项
div class= menu-row @ click= menu spread(menu)
:class=[{ menu-row-selected :menu。选定的菜单。孩子。length=0 }]
div class=菜单-行-左侧
div class= menu-row-left-line :class=[{ menu-selected :菜单。选定的菜单。孩子。length=0 }]/div
I class= icon font :class=[菜单.菜单图标，{ color-icon :showIconColor(menu)}]/I
/div
div class=菜单-行-右侧
span:class=[{ font-16 :菜单。level=== 0 }] { { menu。menuname } }/span
菜单。孩子。长度=0 /I
图标字体图标-列标下拉菜单。孩子。长度0！menu.selected/i
图标字体图标-列标手气 v-if=菜单.孩子。长度为0的菜单。选定的/I
/div
/div
//递归展示菜单
菜单项v-show=菜单。选定的“v-if=”菜单。孩子。“长度0”:菜单日期=“菜单”。儿童/菜单项
/div
/div
/模板
脚本
导出默认值{
道具：{
菜单日期：数组
},
名称："菜单项",
方法：{
菜单预览（菜单){
如果(菜单.菜单路由器)这个1000美元路由器。按(菜单。菜单路由器)；
menu.selected=！菜单。菜单.选定
this.recursion(this.menuDate，menu)；
},
递归（全部，临时){
all.forEach(item={
if (item.menuName！==temp.menuName) {
item.selected=false
this.recursion(item.children，temp)；
}
});
},
showIconColor(菜单){
let show=false
if (menu.level===0) {
menu.children.forEach(item={
如果(项。孩子。长度=0项。选定){
show=true
}
if (item.children.length 0) {
item.children.forEach(item={
if (item.selected) {
show=true
}
});
}
});
}
回归秀；
}
}
};
/脚本
效果图
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。