使用element ui（el-menu）实现无线级菜单

本文链接：https://blog.youkuaiyun.com/weixin_44678368/article/details/124925206

本文介绍了如何利用Vue.js和Element UI库中的el-menu组件，通过递归调用来创建无限级菜单。通过封装名为MenuTree的组件，可以在父级页面中灵活地构建多层级的导航菜单。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现的根本是MenuTree菜单组件一直调用自身。直接贴代码

封装组件MenuTree

<template>
  <div>
    <template v-for="(item,index) in menuData">
      <el-submenu v-if="item.type==='floder'" :index="item.title">
        <template slot="title">
          <i class="bi-folder-fill font-12-rem"></i>
          <span>{{ item.title }}</span>
        </template>
        <MenuTree v-if="item.content.length>0" :menuData="item.content"/>
      </el-submenu>
      <el-menu-item v-else :index="item.title">
        <i class="bi-markdown-fill font-12-rem"></i>
        <span>{{ item.title }}</span>
      </el-menu-item>
    </template>
  </div>
</template>
<script>
export default {
  name: 'MenuTree',
  props: {
    menuData: {
      type: Array,
      default: []
    }
  },
  data () {
    return {}
  },
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>

父级页面

 <el-menu
          @open="handleOpen"
          @close="handleClose"
      >
        <MenuTree :menuData="file_list"/>
      </el-menu>


<script>

export default {
  name: 'index',
  data () {
    return {
      context: '1234',
      show_search_input: false,
      search_value: '221',
      file_list: [
        {
          id: 1,
          title: '我的日记',
          type: 'floder',
          content: [
            {
              id: 3,
              title: '666.md',
              type: 'md',
              content: '内容'
            },
            {
              id: 4,
              title: '选项二',
              type: 'floder',
              content: [{
                id: 5,
                title: '777.md',
                type: 'md',
                content: '内容'
              }]
            }
          ]
        },
        {
          id: 2,
          title: '888.md',
          type: 'md',
          content: '内容'
        }
      ]
    }
  },
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>