首页导航菜单创建（动态获取、递归无限级）

public/test/menu.json

@@ -0,0 +1,47 @@
+[
+	{
+		"menuId":"1",
+		"menuName":"首页",
+		"icon":"HomeFilled"
+	},
+	{
+		"menuId":"2",
+		"menuName":"单井数据",
+		"icon":"Document"
+	},
+	{
+		"menuId":"3",
+		"menuName":"多井数据",
+		"icon":"DocumentCopy"
+	},
+	{
+		"menuId":"4",
+		"menuName":"井站管理",
+		"icon":"School"
+	},
+	{
+		"menuId":"5",
+		"menuName":"系统管理",
+		"icon":"Tools",
+		"subMenus":[
+			{
+				"menuId":"5-1",
+				"menuName":"井站基础数据"
+			},
+			{
+				"menuId":"5-2",
+				"menuName":"设备管理"
+			},
+			{
+				"menuId":"5-3",
+				"menuName":"模板管理",
+				"subMenus":[
+					{
+						"menuId":"5-3-1",
+						"menuName":"单井模板"
+					}
+				]
+			}
+		]
+	}
+]

src/api/header.js

@@ -0,0 +1,9 @@
+import request from '../utils/request';
+
+export const fetchData = query => {
+    return request({
+        url: './test/menu.json',
+        method: 'get',
+        params: query
+    });
+};

src/components/Header.vue

@@ -14,8 +14,8 @@
 			    text-color="#bfcbd9"
 			    active-text-color="#20a0ff"
 			  >
-			  <el-menu-item index="1">Processing Center</el-menu-item>
-			  <el-sub-menu index="2">
+			    <!-- <el-menu-item index="1">Processing Center</el-menu-item>
+			    <el-sub-menu index="2">
 			        <template #title>Workspace</template>
 			        <el-menu-item index="2-1">item one</el-menu-item>
 			        <el-menu-item index="2-2">item two</el-menu-item>
@@ -26,14 +26,20 @@
 			          <el-menu-item index="2-4-2">item two</el-menu-item>
 			          <el-menu-item index="2-4-3">item three</el-menu-item>
 			        </el-sub-menu>
-			      </el-sub-menu>
-			      <el-menu-item index="3" disabled>Info</el-menu-item>
-			      <el-menu-item index="4">OrdersOrders</el-menu-item>
-				  <el-menu-item index="5">OrdersOrders</el-menu-item>
-				  <el-menu-item index="6">OrdersOrders</el-menu-item>
-				  <el-menu-item index="7">OrdersOrders</el-menu-item>
-				  <el-menu-item index="8">OrdersOrders2</el-menu-item>
-				  <el-menu-item index="9">OrdersOrders3</el-menu-item>
+			    </el-sub-menu>
+			    <el-menu-item index="3" disabled>Info</el-menu-item>
+			    <el-menu-item index="4">OrdersOrders</el-menu-item>
+				<el-menu-item index="5">OrdersOrders</el-menu-item>
+				<el-menu-item index="6">OrdersOrders</el-menu-item>
+				<el-menu-item index="7">OrdersOrders</el-menu-item>
+				<el-menu-item index="8">OrdersOrders2</el-menu-item>
+				<el-menu-item index="9">OrdersOrders3</el-menu-item>
+				<el-menu-item index="9">OrdersOrders4</el-menu-item>
+				<el-sub-menu index="10">
+					<template #title>Workspace10</template>
+					<el-menu-item index="10-1">item one00</el-menu-item>
+				</el-sub-menu> -->
+				<navmenu-item v-for="menu in menus" :key="menu.menuId" :item="menu"></navmenu-item>
 			</el-menu>
 			
 		</div>
@@ -48,10 +54,7 @@
                     </el-tooltip>
                     <span class="btn-bell-badge" v-if="message"></span>
                 </div>
-                <!-- 用户头像 -->
-                <!-- <div class="user-avator">
-                    <img src="../assets/img/img.jpg" />
-                </div> -->
+               
                 <!-- 用户名下拉菜单 -->
                 <el-dropdown class="user-name" trigger="click">
                     <span class="el-dropdown-link">
@@ -71,10 +74,24 @@
     </div>
 </template>
 <script setup>
-	import { ref,computed} from 'vue'
+	import { reactive,ref,computed} from 'vue'
 	import { storeToRefs } from 'pinia'
 	import { useHomeStore } from "../store/home.js"
 	import { useRouter } from "vue-router"
+	import { fetchData } from "../api/header.js"
+	import navmenuItem from "./NavmenuItem.vue"
+	
+	const menus = ref([])
+	
+	const getData = () => {
+	    fetchData({}).then((res) => {
+	        console.log(res)
+			menus.value=res
+	    });
+	};
+	getData();
+	
+	
 	
 	const store=useHomeStore()
 	
@@ -112,16 +129,16 @@
     height: 60px;
     font-size: 22px;
     color: #fff;
-	display: flex;
+	/* display: flex; */
 }
 .collapse-btn {
-    /* float: left; */
+    float: left;
     padding: 0 15px;
     cursor: pointer;
     line-height: 60px;
 }
 .header .logo {
-    /* float: left; */
+    float: left;
     width: 210px;
     line-height: 60px;
 	font-size:18px;
@@ -129,22 +146,28 @@
 	padding-left:20px;
 }
 .header .nav-menu{
-	flex:1;
+	/* flex:1; */
+	float:left;
+	
+	
 	line-height: 60px;
+	width:calc(100vw - 402px);
 }
 .header .nav-menu:deep(.el-menu--horizontal){
 	border:none;
 }
 
 .el-menu-demo{
-	height:calc(100% - 1.8px);
-	box-sizing: border-box;
+	height:59px;
+	/* height:calc(100% - 0px); */
+	/* box-sizing: border-box; */
 	
 }
 
 .header-right {
-    /* float: right; */
+    float: right;
     padding-right: 20px;
+	
 }
 .header-user-con {
     display: flex;
@@ -180,16 +203,9 @@
 }
 .user-name {
     margin-left: 10px;
+	width:80px;
 }
-.user-avator {
-    margin-left: 20px;
-}
-.user-avator img {
-    display: block;
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-}
+
 .el-dropdown-link {
     color: #fff;
     cursor: pointer;

src/components/NavmenuItem.vue

@@ -0,0 +1,43 @@
+<template>
+	<el-menu-item :index="item?item.menuId:''" v-if="!item || !item.subMenus || item.subMenus.length ===0">
+		<el-icon v-if="item.icon">
+			<component :is="item.icon"></component>
+		</el-icon>
+		{{ item?.menuName }}
+	</el-menu-item>
+	
+	<el-sub-menu :index="item ? item.menuId : ''" v-else>
+		<template #title>
+			<el-icon v-if="item.icon">
+				<component :is="item.icon"></component>
+			</el-icon>
+		    {{ item?.menuName }}
+		</template>
+		<template v-for="(sub, index) in item?.subMenus" :key="index">
+			<template v-if="sub.subMenus && sub.subMenus.length > 0">
+			    <navmenu-item :key="sub.menuId" :item="sub"/>
+			</template>
+			<el-menu-item :index="sub.menuId"  v-else >
+			   {{ sub?.menuName }}
+			</el-menu-item>
+		</template>
+	</el-sub-menu>
+</template>
+
+<script setup>
+	import {toRefs} from 'vue';
+	
+	
+	const props=defineProps({
+		item:{
+			menuId:'',
+			menuName:'',
+			subMenus:null
+		}
+	})
+	
+	const { item } = toRefs(props);
+</script>
+
+<style scoped>
+</style>