element二级菜单展示-王荣荣，如此可爱！

 <el-menu  
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      >
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>导航一</span>
        </template>
          <el-menu-item index="1-1">
            <template slot="title" >
          <i class="el-icon-location"></i>
          <span>导航一</span>
        </template>
          </el-menu-item>
          
         
      </el-submenu>

   
    </el-menu>

修复css 样式：

一般修复框架样式，直接可以用 !important

我原来写的话，直接将方法放到了生命周期中，这样不好，我们应该将方法放到 methods 中才行！

这样的话我们的async await 就不需要写在created

王荣荣，如此可爱！

这就是套路，以后我们生命周期中，尽量不要写大段代码，都放到methods 中就行了！这就是约定，行，我们得到了数据，我给大家截图下：

有了数据了，利用vue 数据绑定功能，绑定上去！

 <el-menu  
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      >
      <el-submenu :index="'/' + item.path" v-for="(item) in menuList" :key = "item.id">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>{
   
   {item.authName}}</span>
        </template>
          <el-menu-item :index="'/' + item.path" v-for="(item) in item.children" :key = "item.id" >
            <template slot="title" >
          <i class="el-icon-location"></i>
          <span>{
   
   {item.authName}}</span>
        </template>
          </el-menu-item>

         
      </el-submenu>

   
    </el-menu>

我觉得不需要修复菜单Padding 我又去掉了，原来挺好友层次感觉!

行，这节，我们完成了左侧菜单的展示，下节就是修复一些菜单的问题！

element二级菜单展示-王荣荣，如此可爱！

猜你喜欢