vue3+elementPlus之侧边菜单栏功能

村长在路上

已于 2023-11-25 22:54:07 修改

阅读量1k

点赞数

分类专栏：前端文章标签：前端 javascript vue.js

于 2023-11-25 22:43:00 首次发布

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/dwl764457208/article/details/134621412

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

选择默认的颜色，将代码拷贝至<el-aside>模块中

稍微把不需要的修改一下。

<template>
  <div class="common-layout">
    <el-container>
      <el-header class="homeHeader">
        <div class="headerTitle">Devops平台</div>
      </el-header>
      <el-container>
        <el-aside width="400px" class="aside">
          <el-row class="tac">
            <el-col :span="12">
              <el-menu
                  default-active="2"
                  class="el-menu-vertical-demo"
                  @open="handleOpen"
                  @close="handleClose"
              >
                <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><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-col>
            </el-row>
        </el-aside>
        <el-main>
          <div class="mainTitle">Devops管理系统</div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

效果图