elemen导航实现三级菜单详细（附代码）

HTML部分
 

<el-menu router :default-active="$route.path" class="el-menu-vertical-demo" @open="handleOpen"
    @close="handleClose" style="text-align:left" active-text-color="#0071DB" :router="true"
    background-color="#fff" text-color="#000" :unique-opened="true">
    <div v-for="(item,index) in asideArr" :key="index">
       <!-- 一级菜单（没有子级菜单）-->
       <el-menu-item :index="item.path" v-if="!item.children">{{item.title}}</el-menu-item>
       <!-- 一级菜单（有子菜单）-->
        <el-submenu :index="item.path" v-else>
           <template slot="title">{{item.title}}</template>
             <!-- 遍历二级菜单 -->
              <div v-for="(i,index) in item.children" :key="index">
                 <!-- 二级菜单（没有三级菜单）-->
                 <el-menu-item :index="i.path" v-if="!i.children">{{i.title}}</el-menu-item>
                 <!-- 二级菜单（有三级菜单）-->
                   <el-submenu :index="i.path" v-if="i.children">
                      <template slot="title">{{i.title}}</template>
                        <el-menu-item :index="j.path" v-for="(j,index) in i.children" :key="index">{{j.title}}</el-menu-item>
                   </el-submenu>
              </div> 
             </el-submenu>
      </div>
 </el-menu>

表格数据：

asideArr: [
            {
              path: '/onekeyCheckin',
              title: '一键入住',
              icon: 'el-icon-edit',
              children: [
                {
                  path: '/chief_representative',
                  title: '首席代表',
                  icon: 'icon-rongqi',
                },
                {
                  path: '/business_teacher',
                  title: '业务老师',
                  icon: 'icon-rongqi', 
                }
              ]
            },
          ]


//导航方法
methods: {
      handleOpen(key, keyPath) {
          console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
          console.log(key, keyPath);
      }
  }