Vue3+ElementUI-Plus模板menu菜单组件-二级菜单树形结构

由于使用ElementUI-plus的菜单的时候发现官方写的看不懂于是自己模拟了一个组件

我未封装改组件，需要的可以拿去自己封装，代码简单易懂，如对你有帮助请反馈。

<script setup>
import router from "@/router";
import menuArr from '../constant/aside_menu.json'
import {reactive} from "vue";
const menu=reactive([...menuArr])

</script>

<template>
  <el-menu
      mode="vertical"
  >
    <el-sub-menu :index='item.id'  v-for="(item,index) in menu">
      <template #title>
        <el-icon><ShoppingCartFull /></el-icon>
        <span>{{item.title}}</span>
      </template>
      <el-menu-item  v-for="(child,index) in item.children" :index='child.id'>{{child.title}}</el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<style scoped>

</style>

树形结构数据

[
  {
    "id": 100,
    "title": "首页",
    "path": "/main",
    "show": false,
    "children": [
      {
        "id": 101,
        "title": "555",
        "path": "",
        "show": true
      },
      {
        "id": 102,
        "title": "666",
        "path": "",
        "show": true
      }
    ]
  },
  {
    "id": 200,
    "title": "服务器管理",
    "path": "",
    "show": true,
    "children": [
      {
        "id": 201,
        "title": "222",
        "path": "",
        "show": true
      },
      {
        "id": 202,
        "title": "333",
        "path": "/",
        "show": true
      }
    ]
  },
  {
    "id": 300,
    "title": "ces",
    "path": "",
    "show": true,
    "children": [
      {
        "id": 301,
        "title": "222",
        "path": "",
        "show": true
      },
      {
        "id": 302,
        "title": "333",
        "path": "/",
        "show": true
      }
    ]
  }



]