判断fullPath 中是否包含某个参数,来决定是否加上某个类名 究竟什么样的是二级菜单? el-menu -> el-submenu -> el-menu-item 整体 标题 具体菜单 如下的是一级菜单: el-menu -> el-menu-item 代码中的 activeTitle 用的还是很好的 el-dropdown 下面的第一个标签才会触发,所以用 div 标签包起来了 -->...
--第一级节点el-submenu中的属性 含义 index:用于菜单折叠,唯一 key:唯一 第二级节点el-submenu中的属性含义 index:用于页面跳转,唯一 key:唯一 --> <el-submenu v-for="root in intMue" :index="'id-'+root.id" :key="'key-'+root.id"> <template slot="title"> {{root.text}} </template> ...
//因为导航到的每个页面,都包含了导航栏、头部、底部、主体部分(统一到MyLayout组件中) //所以我每个菜单都会让根菜单component: MyLayout,再用 redirect 找到原本component的主体页面。(有多个子菜单的 redirect 可以省略) { path: '/dealCenter', name: 'dealCenter', component: MyLayout, redirect: "/dealCe...
借助Elemente-UI<el-aside>:侧边栏容器 <<el-menu>:导航菜单 创建 父组件页面 aside.vue *( default-active 为当前激活菜单的 index,(设置为当前的路由名称 this.$route.fullPath) @select 事件为 菜单选择触发的事件 借助跳转路由 并设置 default-active 的值 ) <el-aside> <el-menu :default-active="$...
8.element-ui三级菜单 <el-menu default-active="/1/1/1" class="el-menu-vertical-demo" @open="handleOpen" @contextmenu.prevent.native="rightClick"> <templatev-for="item in list"><el-submenuv-if="item.children && item.children.length":index="item.path":key="item.path"><templateslot=...
Element UI导航菜单(NavMenu),动态多级菜单实现 今天同事封装一个导航栏的组件,使用的 ElementUI的NavMenu组件。 遇到一个问题,如果菜单没有下拉是<el-menu-item />标签,而有下拉的是<el-submenu />标签。 在循环遍历的时候就出了问题,必须要判断一下是否有二级菜单,并区分展示。
此文件只是左侧菜单组件,需要更多功能请参考element-ui 官网的 NavMenu 导航菜单 image.png image.png LeftAsideNav.vue 文件 <template><el-menu:default-active="NavigationDefaultActive"routerbackground-color="#02012b"text-color="#fff"active-text-color="#407ce7"><templatev-for="(item,index) in menu...
在el-menu组件基础上扩展支持传递数据动态生成菜单项,使用方法与el-menu一样,增加了data 和 props 参数。 /** * 菜单组件 * @module widgets/my-menu * @example * * // 使用说明 */ export default { name: 'MyMenu', /** * 属性参数
在最近的项目中,我使用的是vue-cli和elementUI 1.4.3版本,当时elementUI还没有更新2.0版本。 首先遇到的是: 左侧菜单的样式修改,虽然element提供了提供了主题色theme的设置,但这并不能解决UI提供的大量的细节之处,结果自然是UI的bug。 修改后的UI 1.4.3elementUI ...
非动态多级菜单(写死了,不灵活,不建议使用) <el-menu :default-active="activeIndex" class="elMenu" background-color="#333" text-color="#B0B0B2" active-text-color="#fff" :unique-opened="true" router ref="elMenu" @select="menuSelect" > <el-submenu index="非叶子节点也需要index属性"> ...