element-plus menu菜单点击一级导航不选中二级导航的问题
遇到的问题:
在实现侧边栏的时候,点击一级导航的时候只是打开了二级导航,并没有跳转到二级导航里面,如图
这里我想到的方法是给一级导航商品管理点击事件,手动跳转一级导航下的第一个二级导航,而出现了另外一个问题,就是在点击二级导航的其他元素是都会被点击事件重定向到第一个商品列表页面,因为二级导航也属于一级导航的内容。
最终解决方案,在商品管理的span标签上绑定点击事件并使用.stop修饰符阻止默认事件
<el-sub-menu index="/goods/list">
<template #title>
<el-icon style="color: aliceblue">
<span class="iconfont icon-shangpin"></span>
</el-icon>
<span style="color: aliceblue" @click.stop="handleGoods">商品管理</span>
</template>
<el-menu-item index="/goods/list">商品列表</el-menu-item>
<el-menu-item index="/goods/add">商品添加</el-menu-item>
<el-menu-item index="/goods/category">商品分类</el-menu-item>
</el-sub-menu>
这样就可以丝滑的实现点击一级导航,选中第一个二级导航了