elementplus->Container布局容器+el-menu

<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">Aside</el-aside>
      <el-container>
        <el-header>Header</el-header>
        <el-main>Main</el-main>
      </el-container>
    </el-container>
  </div>
</template>

el-aside

<el-aside :width="isCollapse ? '67px':'216px'">
    <div class="left-top"  @click="toggleCollapse">
      <div style="margin: 0 14px 0 13px;">
        <img src="@/assets/xx.png" style="width:40px;height: 40px;" alt="">
      </div>
      <div class="system-title">xxx系统</div>
    </div>
    <el-menu 
       :default-active="route.path"
       active-text-color="#409Eff" 
       background-color="#001529" 
       text-color="#fff"
       unique-opened 
       :collapse="isCollapse" 
       :router="true"
    >
      <!-- 一级菜单 -->
      <el-sub-menu :index="item.id+''" v-for="item in menulist" :key="item.id">
        <!-- 一级菜单模板区域 -->
        <template #title>
          <el-icon>
            // 遍历图标
            <component :is="item.icon"/>
          </el-icon>
          <span>{{item.authName}}</span>
        </template>
        <!-- 二级菜单 -->
        <el-menu-item 
           :index="'/'+subItem.path" 
           v-for="subItem in item.children" 
           :key="subItem.id"
         >
          <template #title>
            <span>{{subItem.authName}}</span>
          </template>
        </el-menu-item>
      </el-sub-menu>
    </el-menu>
</el-aside>

el-header

<el-header class="info-header">
    <div @click="toggleCollapse" style="cursor: pointer;">
      <el-icon v-if="!isCollapse"><Fold /></el-icon>
      <el-icon v-else><Expand/></el-icon>
    </div>
    <div class="info-header-word">{{ route.meta.title }}</div>
    <div>
      <el-dropdown>
        <span class="el-dropdown-link">
          个人操作
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="personalInfo">个人信息</el-dropdown-item>
            <el-dropdown-item @click="loginOut">登出</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
</el-header>

el-main

<el-main>
  <router-view />
</el-main>

整合

<el-container class="info-container">
    // el-aside
    <el-aside :width="isCollapse ? '67px':'216px'">
        <div class="left-top"  @click="toggleCollapse">
          <div style="margin: 0 14px 0 13px;">
           <img src="@/assets/xx.png" style="width:40px;height: 40px;" alt="">
          </div>
          <div class="system-title">xxx系统</div>
        </div>
        <el-menu 
          :default-active="route.path"
          active-text-color="#409Eff" 
          background-color="#001529" 
          text-color="#fff"
          unique-opened 
          :collapse="isCollapse" 
          :router="true"
        >
             <!-- 一级菜单 -->
             <el-sub-menu :index="item.id+''" v-for="item in menulist" :key="item.id">
                <!-- 一级菜单模板区域 -->
                <template #title>
                    <el-icon>
                      // 遍历图标
                      <component :is="item.icon"/>
                    </el-icon>
                    <span>{{item.authName}}</span>
                </template>
                <!-- 二级菜单 -->
                <el-menu-item 
                  :index="'/'+subItem.path" 
                  v-for="subItem in item.children" 
                  :key="subItem.id"
                >
                    <template #title>
                       <span>{{subItem.authName}}</span>
                    </template>
               </el-menu-item>
            </el-sub-menu>
        </el-menu>
    </el-aside>
    <el-container>
        <!-- el-header -->
        <el-header class="info-header">
           <div @click="toggleCollapse" style="cursor: pointer;">
              <el-icon v-if="!isCollapse"><Fold /></el-icon>
              <el-icon v-else><Expand/></el-icon>
           </div>
           <div class="info-header-word">{{ route.meta.title }}</div>
           <div>
                <el-dropdown>
                  <span class="el-dropdown-link">
                   个人操作
                     <el-icon class="el-icon--right">
                       <arrow-down />
                     </el-icon>
                  </span>
                  <template #dropdown>
                     <el-dropdown-menu>
                        <el-dropdown-item @click="personalInfo">个人信息</el-dropdown-item>
                        <el-dropdown-item @click="loginOut">登出</el-dropdown-item>
                    </el-dropdown-menu>
                 </template>
              </el-dropdown>
           </div>
        </el-header>
   <!-- el-main -->
     <el-main>
       <router-view />
     </el-main>
   </el-container>
</el-container>

import { reactive, ref, markRaw } from 'vue'
import { ArrowDown, User, UserFilled, Fold, Expand } from '@element-plus/icons-vue'
const isCollapse = ref(false)
// 菜单
const menulist = reactive([
  { 
    id: 1, key: 1, authName: '员工信息管理', icon: markRaw(User),
    children: [{ path: 'main/employeeInfo', id: '1.1', authName: '员工信息' }] 
  },
  { 
    id: 2, key: 2, authName: '用户信息管理', icon: markRaw(UserFilled), 
    children: [{ path: 'main/userInfo', id: '1.2', authName: '用户信息' }] 
  }
])

// 折叠
const toggleCollapse = () => {
  isCollapse.value = !isCollapse.value
}

样式

<style lang="scss" scoped>
.info-container {
  height: calc(100vh);
  .info-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    color: rgb(52, 47, 47);
    letter-spacing: 1px;
    .info-header-word {
      font-size: 25px;
      font-weight: bold;
    }
  }

  .el-aside {
    background-color: #001529;
    .el-menu {
      border-right: none;
    }
  }
  .el-main {
    padding: 20px 20px 0;
    background-color: #f5f6f9;
  }
  .left-top {
    display: flex;
    align-items: center;
    font-size: 16px;
    height: 60px;
    color: #fff;
    background-color: orange;
    cursor: pointer;
    .system-title {
      font-size: 17px;
      font-weight: 600;
      letter-spacing: 0.5px;
    }
  }
}

::v-deep .example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
.el-menu-item.is-active {
  color: #fff;
  background-color: #409eff;
}

</style>