element导航菜单二级菜单

```javascript
<template>
 <div>
  <el-container style="height: 500px; border: 1px solid #eee">
   <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
    <el-menu
     :default-active="defaultAct"
     active-text-color="#409eff"
     class="el-menu-vertical-demo"
    >
     <template v-for="(item, index) in list">
      <!-- 有子菜单的 -->
      <el-submenu :index="item.id + ''" :key="index" v-if="item.childList">
       <template slot="title">
        <span>{{ item.menuName }}</span>
       </template>
       <el-menu-item-group v-for="(i, key) in item.childList" :key="key">
        <el-menu-item :index="i.id + ''">{{ i.menuName }}</el-menu-item>
       </el-menu-item-group>
      </el-submenu>
      <!-- 没有子菜单的 -->
      <el-menu-item :index="item.id + ''" v-if="!item.childList" :key="index">
       {{ item.menuName }}</el-menu-item
      >
     </template>
    </el-menu>
   </el-aside>
   <el-container>
    <el-header style="text-align: right; font-size: 12px"> </el-header>
    <el-main> </el-main>
   </el-container>
  </el-container>
 </div>
</template>

<script>
export default {
 data() {
  return {
   defaultAct: "",
   list: [
    {
     id: 1,
     menuName: "首页",
     childList: [
      {
       id: 11,
       menuName: "首页1",
      },
      {
       id: 12,
       menuName: "首页2",
      },
     ],
    },
    {
     id: 2,
     menuName: "参数管理",
     childList: [
      {
       id: 22,
       menuName: "参数管理1",
      },
     ],
    },
    {
     id: "3",
     menuName: "系统管理",
    },
   ],
  };
 },
 created() {
  this.defaultAct = "";
  var name = "参数管理";
  this.list.forEach((item) => {
   //假如激活第一层并且子层存在
   if (item.menuName == name && item.childList) {
    this.defaultAct = item.childList[0].id + "";
    return;
   }
   //假如激活第一层并且子层不存在 
   if (item.menuName == name && !item.childList) {
    this.defaultAct = item.id + "";
    return;
   }
   if (item.childList) {
    item.childList.forEach((ele) => {
     if (ele.menuName == name) {
      this.defaultAct = ele.id + "";
     }
    });
   }
  });
  console.log(this.defaultAct);
 },
};
</script>
<style>
.el-header {
 background-color: #b3c0d1;
 color: #333;
 line-height: 60px;
}

.el-aside {
 color: #333;
}
</style>