vue3使用el-menu多级菜单出现点击一个全部展开的问题

• 前端

第一步、创建SubMenu


  
    
      
        {{menu.name}}
      
      
    
    
      
        {{menu.name}}
      
    
  




export default {
  name: "SubMenu",
  props: {
    menuData:null
  },
}

第二步、创建MenuTree文件

  
    
  



import SubMenu from "@/views/template/menu/SubMenu";
export default {
  components: {SubMenu},
  props: {
    menuData:null
  },
  name: "MenuTree"
}

第三步、使用

vue3使用el-menu多级菜单出现点击一个全部展开的问题

第三步、出现问题，尝试解决

        测试时发现单击菜单显示子菜单时其它的菜单也被展开，看了其它文章写的是修改:index=”menu.index”，vue3使用el-menu多级菜单出现点击一个全部展开的问题

        虽然点击菜单其它的子菜单不会展开了，但是index存的是编号，url存的是路由地址，点击子菜单地址栏显示的是编号信息，不是地址，如图所示

vue3使用el-menu多级菜单出现点击一个全部展开的问题

 第四步、发现问题所在，解决问题

         查看循环菜单的数据menuList，发现只有叶子菜单的数据才配置了url,其它级别的则为空数据，所以就导致了配置:index=”menu.url”时出现点击一个全部展开的情况。

vue3使用el-menu多级菜单出现点击一个全部展开的问题

 第五步、解决方法

第一种，使用第二步的写法，后台数据库的数据url字段不为null且值不相同

第二种，修改代码el-sub-menu中的:index值为menu.index，el-menu-item的值为menu.url

vue3使用el-menu多级菜单出现点击一个全部展开的问题

注意：后端数据库url和index传的值是唯一的，也不能出现两个空值

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://www.net2asp.com/5a116cec4f.html

赞 (0)
« 上一篇 1天前
下一篇 » 1天前

相关推荐