当前位置: 首页 > article >正文

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>

这样就可以丝滑的实现点击一级导航,选中第一个二级导航了


http://www.kler.cn/a/391769.html

相关文章:

  • Ubuntu安装MySQL8
  • AI 扩展开发者思维方式:以 SQL 查询优化为例
  • 红帽认证和华为认证哪个好?看完这4点你就明白了
  • C++组合复用中,委托的含义与作用
  • Docker入门系列——Docker-Compose
  • 后端:Aop 面向切面编程
  • C语言之用getopt解析命令行参数
  • java:使用Multi-Release Jar改造Java 1.7项目增加module-info.class以全面合规Java 9模块化规范
  • Unet++改进24:添加DualConv||轻量级深度神经网络的双卷积核
  • 无人机飞手考证,地面站培训技术详解
  • uniCloud云对象调用第三方接口,根据IP获取用户归属地的免费API接口,亲测可用
  • PNG图片批量压缩exe工具+功能纯净+不改变原始尺寸
  • SpringBoot项目快速打包成jar项目与部署
  • 深入浅出《钉钉AI》产品体验报告
  • Spring Boot编程训练系统:架构设计精要
  • 虚拟机linux7.9下安装mysql遇到的问题
  • 计算机低能儿从0刷leetcode | 36.有效的数独
  • 【数学二】线性代数-向量-正交规范化、正交矩阵
  • 一篇文章学会ES6 Promise
  • 8 ARM-PEG-FA由八个臂状结构的聚乙二醇(PEG)核心与叶酸(FA)分子通过化学连接而成
  • 什么是大数据治理?在企业数字化转型过程中有什么用?
  • PostgreSQL存储过程-pgAdmin
  • 命令行工具进阶指南
  • 【 AI写作鹅-注册安全分析报告-无验证方式导致安全隐患】
  • Flutter下拉刷新上拉加载的简单实现方式二
  • Lucene 和 Elasticsearch 中更好的二进制量化 (BBQ)