左侧导航 elementui

//html部分 


<el-menu background-color="#3f4d67" text-color="#fff" :default-active="$route.path" :unique-opened="true" :router="true" mode="vertical" >
        <template v-for="item in menu">

          <!-- 多级菜单外壳 -->
          <el-submenu v-if="item.children.length !== 0" :index="item.menuEnName" :key="item.menuEnName">

            <!-- 一级菜单包裹层 -->
            <template slot="title">
              <i :class="item.icon"></i>
              <span slot="title">{{langType === 'en'? item.name_en: item.menuName}}</span>
            </template>

            <!-- 二级菜单选项 -->
            <el-menu-item v-for="child in item.children" :index="child.menuEnName" :key="child.menuEnName">
              <i class="fa fa-long-arrow-right"></i>
              <span slot="title">{{langType === 'en'? child.name_en: child.menuName}}</span>
            </el-menu-item>
          </el-submenu>

          <!-- 单级菜单 -->
          <el-menu-item v-else :index="item.menuEnName" :key="item.menuEnName">
            <i :class="item.icon"></i>
            <span slot="title">{{langType === 'en'? item.name_en: item.menuName}}</span>
          </el-menu-item>
        </template>
      </el-menu>


  data () {
    return {
    
       
        menu:JSON.parse(
          localStorage.getItem("loginInfo")
        ).menuInfoTree, //从登录获取的导航树


         defaultProps: {  //默认渲染的  接口获取的  导航树  与 导航插件属性对应
          children: 'children',
          label: 'menuName'
        }
    }
  },

标签：en,menuName,name,elementui,item,左侧,langType,导航
来源： https://www.cnblogs.com/jinsuo/p/12119738.html