环境准备：Vue3+Element-UI Plus
<script setup>
import {ref} from "vue";// 是否折叠菜单，默认折叠
const isCollapse = ref(true)// 退出登录
function logout() {alert('退出')
}// 个人中心
function profile() {alert('个人中心')
}
</script><template><el-container><el-aside><el-scrollbar><el-menu:collapse="isCollapse"active-text-color="#ffd04b"background-color="#545c64"class="el-menu-vertical-demo"default-active="2"text-color="#fff"><el-sub-menu index="1"><template #title><el-icon><location/></el-icon><span>Navigator One</span></template><el-menu-item-group title="Group One"><el-menu-item index="1-1">item one</el-menu-item><el-menu-item index="1-2">item two</el-menu-item></el-menu-item-group><el-menu-item-group title="Group Two"><el-menu-item index="1-3">item three</el-menu-item></el-menu-item-group><el-sub-menu index="1-4"><template #title>item four</template><el-menu-item index="1-4-1">item one</el-menu-item></el-sub-menu></el-sub-menu><el-menu-item index="2"><el-icon><Menu/></el-icon><span>Navigator Two</span></el-menu-item><el-menu-item index="3" disabled><el-icon><document/></el-icon><span>Navigator Three</span></el-menu-item><el-menu-item index="4"><el-icon><setting/></el-icon><span>Navigator Four</span></el-menu-item></el-menu></el-scrollbar></el-aside><el-container style="height: 100vh;"><el-header><el-row align="middle" justify="space-between" style="height: 100%"><el-col :span="1" style="cursor: pointer"><el-icon v-show="isCollapse" @click="isCollapse=false"><Expand/></el-icon><el-icon v-show="!isCollapse" @click="isCollapse=true"><Fold/></el-icon></el-col><el-col :span="1"><el-dropdown><el-image class="avatar" src="/public/vite.svg"></el-image><template #dropdown><el-dropdown-menu><el-dropdown-item @click="profile">个人信息</el-dropdown-item><el-dropdown-item @click="logout" divided>退出</el-dropdown-item></el-dropdown-menu></template></el-dropdown></el-col></el-row></el-header><el-main></el-main></el-container></el-container>
</template><style scoped lang="scss">
.el-container {.el-aside {height: 100vh;width: auto;:deep(.el-scrollbar__view ){height: 100%;.el-menu {height: 100%;width: 100%;}}}.el-container {.el-header {background-color: #ffffff;.avatar {border-radius: 50%;cursor: pointer;}}.el-main {background-color: #efefef;}}
}
</style>
