vue element 左侧动态树形导航 Demo

因为官方给的例子是死的数据，全都用html写出来很多，所以想通过数据去展示nav，于是简单踩了下坑。

第一种：折叠式 nav code

第二种：普通 nav 效果图

code

      
        
          
            

              
              
                
                {{ subMenu.title }}
              
              
              
                
                
                  
                    
                    {{ menu.title }}
                  
                
              
            
          
        
      
    

js

data() {
    return {
      navList: [
        {
          icon: 'apps',
          title: 'Index',
          children: [
            {
              icon: 'apps',
              title: 'page1',
              to: '/ac'
            },
            {
              icon: 'apps',
              title: 'page2',
              to: '/'
            }
          ]
        },
        { icon: 'assignment', title: 'BKMs', to: '/acb' },
        {
          icon: 'apps',
          title: 'demo',
          children: [
            {
              icon: 'apps',
              title: 'demo1',
              to: '/accb'
            }
          ]
        }
      ]
    }
  },

• 首先想让他变成路由导航，el-menu 一定要添加 router 属性，此时他就会根据 el-menu-item 中的 index 去 push router
• 需要注意的是：多级菜单时，虽然 el-submenu 并不想让他跳转，但是一定要加上 index 属性（可以放index就行，保证唯一性）
• index 属性的值一定要是 string ，比如 我的 subIndex 就要拼接个 ‘’ ，达到转换字符串的目的
• 我的 Demo 只有两层，如果需要更多层，继续嵌套就可以了。

---

觉得有帮助的小伙伴右上角点个赞~

扫描上方二维码关注我的订阅号~