确定el-menu-item的默认选中属性或方法: el-menu组件的default-active属性用于设置默认选中的菜单项。 el-menu-item组件的index属性用于标识每个菜单项的唯一性。 在Vue组件中设置el-menu-item的默认选中状态: 在你的Vue组件中,使用el-menu包裹el-menu-item。 设置el-menu的default-active属性为你想要默认选中的...
<el-menu-item index="/device_new/">设备管理</el-menu-item> <el-menu-item index="/monitor/">状态监测</el-menu-item> <el-menu-item index="/fault_new/">故障诊断</el-menu-item> <el-menu-item index="/trend_new/">趋势分析</el-menu-item> <el-menu-item index="/spectrogram/">谱...
elmenuitem默认选中不生效步骤:1、路由跳转,NavMenu子菜单没有vif,加刷新。2、路由跳转,NavMenu有些子菜单会加上vif,权限控制时候经常发生,刷新。3、由跳转过来,选中失效。
最后设置el-menu-item的index属性为router.js文件里跳转路由的name值,route属性为:路由的path,如图: 通过这样设置,就可以实现刷新页面时,导航栏的选中项和页面显示一致,并且从b页面跳转到c页面时,还能保持b选中的状态。 效果图如下: 最后点击去“child1”的按钮,跳转到child1,导航栏会自动选中到导航一。 至此,刷...
el-menu-item 就是普通的菜单项 el-submenu 是菜单项里还有子菜单 el-menu-item-group 是菜单项组,就是好几个菜单项有个标题 网络异常,图片无法展示 | index的妙用 建议将每个el-menu-item和el-submenu上加上index的属性。 好处以下: 选中的时候,有高亮的状态 方便设置默认选中的菜单,可以default-active=...
<el-menu-item index="product2">产品2</el-menu-item> </el-submenu> </el-menu> 在上面的示例中,我们创建了一个水平模式的菜单,并设置了默认选中的菜单项。同时,我们开启了路由模式,这样当点击菜单项时,会自动触发路由跳转。 需要注意的是,在使用el-menu的过程中,我们需要和VueRouter进行配合使用,以实现...
components:{'el-menu':Menu,'el-submenu':Submenu,'el-menu-item':MenuItem,'el-menu-item-group':MenuItemGroup }, data () {return{ navselected:"/", openends:['1','2','3','4','5','6']//默认menu展开} }, mounted(){ console.log(this.navselected) ...
)">{{ item2.name }}</el-menu-item></el-submenu></el-menu></div></div></template> script和style: <script>export default { data() { return { defaultActive: '', left_list:[{'id':1,'name':'天下大势',temArr:[{'id':2,'name':'国内新闻'},{'id':3,'name':'国际新闻'}]...
点击的时候不会选中菜单,页面不跳转。但是访问其他子页面后,通过浏览器回退按钮退回到index页面时,莫名就选中了2菜单栏,包括下面2个子菜单。如下图: error 想了下应该是子菜单没有设置唯一标志index。而且/index这个路由在menus中也找不到,所以就默认匹配index===null的路由了?于是给el-menu-item加上index,果然好...
<fragment v-for="item in menuList" :key="item.key"> <!-- 一级菜单 --> <el-submenu v-if="item.children && item.children.length" :index="item.path" :key="item.key" > <template slot="title" ><i class="icon iconfont" v-html="item.icon"></i ...