element menu 递归

<template>
  <div class="box">
    <el-radio-group v-model="isCollapse" size="mini" style="margin-bottom: 20px">
      <el-radio-button :label="false"><i class="el-icon-s-unfold"></i></el-radio-button>
      <el-radio-button :label="true">
        <i class="el-icon-s-fold"></i>
      </el-radio-button>
    </el-radio-group>
    <el-menu
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      :collapse="isCollapse"
      v-if="isuseArray(menuList)"
     default-active="permissionDetail21"
    >
      <menuTree :menuTreeItem="item" v-for="item in menuList" :key="item.id"></menuTree>
    </el-menu>
  </div>
</template>

<script>
import menuTree from "./item.vue";
export default {
  components: { menuTree },
  data() {
    return {
      isCollapse: false,
      ops:['permissionDetail2'],
      menuList: [
        {
          id: 1,
          name: "首页",
          path: "/",
          icon: "location",
          component: "home",
          children: [],
        },
        {
          id: 2,
          name: "用户管理",
          path: "/user",
          icon: "location",
          component: "user",
          children: [
            {
              id: 3,
              name: "用户列表",
              path: "list",
              icon: "",
              component: "userList",
              children: [
                {
                  id: 4,
                  name: "用户详情",
                  path: "userDetail",
                  icon: "",
                  component: "userDetail",
                  children: [],
                },
              ],
            },
            {
              id: 5,
              name: "角色列表",
              path: "roleList",
              icon: "",
              component: "userList",
              children: [],
            },
          ],
        },
        {
          id: 6,
          name: "权限管理",
          path: "/permission",
          icon: "setting",
          component: "permission",
          children: [
            {
              id: 7,
              name: "权限列表",
              path: "permissionList",
              icon: "",
              component: "permissionList",
              children: [
                {
                  id: 8,
                  name: "权限详情-1",
                  path: "permissionDetail",
                  icon: "",
                  component: "permissionDetail",
                  children: [
                    {
                      id: 9,
                      name: "权限详情-2",
                      path: "permissionDetail2",
                      icon: "",
                      component: "permissionDetail2",
                      children: [
                    {
                      id: 9,
                      name: "权限详情-2",
                      path: "permissionDetail21",
                      icon: "",
                      component: "permissionDetail2",
                      children: [],
                    },
                  ],
                    },
                  ],
                },
              ],
            },
          ],
        },
      ],
    };
  },
  methods: {
    isuseArray(data) {
      return Array.isArray(data) && data.length;
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>
<style>
.box{
  width: 180px;
  overflow: auto;
    height: 400px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  /* width: 200px; */

  display: inline-block;
}

</style>



<template>
  <el-submenu
    v-if="isuseArray(menuTreeItem.children)"
    :index="menuTreeItem.path"
    :popper-append-to-body="false"
  >
    <template slot="title">
      <i class="el-icon-location"></i>
      <span slot="title">{{ menuTreeItem.name }}</span>

    </template>
    <menuTree
      :menuTreeItem="item2"
      v-for="item2 in menuTreeItem.children"
      :key="item2.id"
    ></menuTree>
  </el-submenu>

  <el-menu-item v-else :index="menuTreeItem.path">
    <i class="el-icon-menu"></i>
    <span slot="title">{{ menuTreeItem.name }}</span>
  </el-menu-item>
</template>

<script>
export default {
  name: "menuTree",
  props: {
    menuTreeItem: {},
  },

  methods: {
    isuseArray(data) {
      return Array.isArray(data) && data.length;
    },
  },
};
</script>

<style scoped lang="scss">

</style>

:popper-append-to-body="false" 容易有问题，或者包裹div 避免 mode为vertical的el-menu组件时，鼠标移入第一级的submenu菜单时，报错Maximum call stack size exceeded.即内存溢递归爆栈问题