element NavMenu 导航菜单顶栏二级菜单

最新推荐文章于 2023-08-06 17:43:46 发布

原创最新推荐文章于 2023-08-06 17:43:46 发布 · 2k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js

收录于

这篇博客介绍了如何在Element UI框架中创建带有二级菜单的顶部导航栏。通过利用`el-menu`和`el-submenu`组件，可以轻松构建多级导航，允许根据数据动态生成菜单项。博客内容详细解释了如何遍历数据并判断是否存在子集，以及如何展示二级菜单，对于前端开发者在构建复杂导航菜单时具有参考价值。

element顶部导航栏二级菜单

element NavMenu 导航菜单顶栏如下
<el-menu :default-active=“activeIndex” class=“el-menu-demo” mode=“horizontal” @select=“handleSelect”>
处理中心

如要顶栏使用二级菜单则可以在el-menu内如下写法
// 此处遍历所以list
// 在这判断是否有子集
{{item.label}}

// 有子集时el-submenu内遍历子集

{{item.name}} // 此为有子集的name

{{v.label}} // 这一步下来二级就可以出来了