自己的項目要寫一個豎欄菜單，所以記錄一下思路吧，先粗糙的實現(xiàn)一把，有機會再把細節(jié)修飾一下

功能上就是無論這個菜單有多少層級，都能顯示出來，另外，需要帶圖標，基于element-plus寫成，當這個菜單欄點開的時候最好整個頁面的高度不要有變化，最后整成了個小草稿

MyMenu.vue
<template><!-- 自己寫的豎欄菜單組件 --><!-- <el-menu style="height: 100%;width:100%"> --><el-scrollbar max-height=100%><el-menu style="width: 100%;border: 0;" unique-opened :default-active="props.defaultIndex" active-text-color="#ffd04b"background-color="#545c64" text-color="#fff"><MenuTree :menu-data="props.data"></MenuTree></el-menu></el-scrollbar>
</template>
<script lang="ts" setup>
import MenuTree from "./MenuTree.vue"
const props=defineProps<{data:Array<any>,defaultIndex:string}>()
</script>

里面有個遞歸組件

MenuTree.vue
<template><!-- 遞歸組件 --><!-- 為了創(chuàng)建無限菜單而使用 --><template v-for="value in props.menuData"><!-- 沒有children就是一個單標簽 --><el-menu-item v-if="!value.children" :index="value.index"><template v-if="value.icon"><component :is="value.icon" style="width: 1rem;"></component></template>{{ value.title }}</el-menu-item><!-- 多標簽的情況 --><el-sub-menu v-else :index="value.index"><template #title><template v-if="value.icon"><component :is="value.icon" style="width: 1rem;"></component></template> <span>{{ value.title }}</span></template><MenuTree :menuData="value.children"></MenuTree></el-sub-menu></template>
</template>
<script setup lang="ts">
import MenuTree from "../Page1/MenuTree.vue"
const props=defineProps<{menuData:Array<any>}>()
</script>

最后寫個參數(shù)掛載一下，我這邊用的icon是element-plus組件自帶的

<template><el-container style="height: 100vh;"><el-header style="padding: 0;height: 5rem;"><div style="height: 100%;background-color:pink"><span>welcome to page1</span><br /><span>該頁面用來寫一個豎版menu</span></div></el-header><el-container style="height: calc(100vh - 5rem);"><el-aside width="15%" style="background-color:lightblue;"><MyMenu :data="menuData" :default-index="defaultIndex"/></el-aside><el-main style="background-color:rgb(246, 199, 11);"><component :is="iconStr" style="width: 1rem;"></component></el-main></el-container></el-container>
</template>
<script setup lang="ts">
import {ref} from "vue"
import { Search,Select,Close,User } from '@element-plus/icons-vue';
import MyMenu from './MyMenu.vue';
let menuData = [{title: "睡覺",index: "0",icon: Select},{title: "游戲",index: "1",icon: Search,children: [{title: "上古卷軸",index: "1-1",children: [{title: "上古卷軸匕首雨",index: "1-1-1",},{title: "上古卷軸天際",index: "1-1-2",icon: Select}]},{title: "輻射",index: "1-2",children: [{title: "龍萬德",index: "1-2-1"},{title: "輻射新維加斯",index: "1-2-2"}]}]},{title: "美食",index: "2",icon: Close,children: [{title: "淮揚菜",index: "2-1",children: [{title: "紅燒獅子頭",index: "2-1-1"},{title: "豬頭肉",index: "2-1-2"},]},{title: "川菜",index: "2-2",children: [{title: "四川泡菜",index: "2-2-1"},{title: "水煮魚",index: "2-2-2"},{title: "開水白菜",index: "2-2-3"},]},{title: "粵菜",index: "2-3",children: [{title: "白切雞",index: "2-3-1"},{title: "順德魚生",index: "2-3-2"},{title: "豬肚雞",index: "2-3-3"},]}]},{title: "編程",index: "3",icon: User,children: [{title: "golang",index: "3-1",children: [{title: "云原生",index: "3-1-1"},{title: "gin",index: "3-1-2"}]},{title: "js",index: "3-2"},{title: "python",index: "3-3"}]}
]
// 默認index值
let defaultIndex = ref("0")
</script>

主要過程就是寫了一個遞歸的菜單欄，然后用el-scrollbar包裝了一下，以免這個菜單展開的時候把盒子高度撐開。

細節(jié)上難看了一點，此外我覺得整個菜單的高度應該和傳入數(shù)組的最大深度相關，得把這個el-scrollbar組件換掉才行，先寫著，有時間完善。