因为我的项目用了vue-router,页面通过<router-view></router-view>引入组件的,所以我就想,在进入组件的时候,设置公共变量值adminleftnavnum为导航的index,然后在导航所在的组件watch该变量, 设置el-menu的 :active=”adminleftnavnum”,这样基本上就可以实现该效果了。 1、引入扩展库 要使用公共变量,我们先引入vue...
el-menu是Element UI提供的一个用于创建导航菜单的组件。它支持多种属性,如mode(菜单模式,如水平或垂直)、default-active(当前激活的菜单项的index)、collapse(是否水平折叠收起菜单)等。 2. 准备动态菜单所需的数据结构 动态菜单的数据结构通常是一个数组,数组中的每个元素代表一个菜单项。每个菜单项可以包含属性如...
</el-menu-item> <el-sub-menu index="/subMenuConfig"> <template #title> 选项设置 </template> <el-menu-item index="/department">部门设置</el-menu-item> <el-menu-item index="/system">系统设置</el-menu-item> <el-menu-item index="/warn">超时设置</el-menu-item> <el-menu-item ind...
-- 这个是没子节点的 没有子内容,用el-menu-item结构 --><el-menu-itemindex="/vue"><iclass="el-icon-star-off"></i><spanslot="title">vue页面</span></el-menu-item><el-menu-itemindex="/react"><iclass="el-icon-star-off"></i><spanslot="title">react页面</span></el-menu-item...
组件思路是:el-menu,里面是一会儿将要嵌套的小组件~小组件循环每个路由单项; 组件单项思路(将menu-item抽出来):看el-menu中从有没有子项就分为el-sub-menu和el-menu-item两种:el-sub-menu是右侧有小箭头,代表该项存在子菜单,可展开;el-menu-item没有小箭头,代表没有子菜单; ...
<el-menu :default-active="$route.path"></el-menu> 2、稍微麻烦一些: (1)、<el-menu> 设置属性 :default-active="activeIndex" (2)、watch方法检测路由变化 (3)、created生命周期设置路由 具体代码如下: <template> <div id="app"> <el-menu ...
在Vue中动态赋值 `el-menu` 组件可以通过绑定数据来实现。您可以使用Vue的数据属性来存储菜单数据，然后...
我直接用element-ui的el-menu组件,结构是(这是用来注释的,完整代码在后面) <el-menu> <template v-for="(item, key) in menuList">---前端得到的数据存放到menuList数组 <el-submenu :key="key" v-if="item.children && item.children.length!==0" :index="item.m_url">---父级菜单,判断有子节...
el-submenu` 可以通过遍历数据来实现。以下是一个示例代码，演示如何动态渲染 `el-menu` 和多个 `el-...
<div class="left"> <!-- default-active 默认激活第一个 unique-opened 是否只需要展示一个菜单 router 开启路由跳转 对应的是 el-submenu 上绑定的index--> <el-menu :default-active="active" unique-opened router class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" ...