基于element-ui的侧边栏及其使用方法

极客李华

已于 2023-09-04 00:04:26 修改

阅读量1.1k

点赞数

分类专栏： element-ui 文章标签： javascript 开发语言 ecmascript

于 2023-06-29 11:53:11 首次发布

本文链接：https://blog.csdn.net/qq_51447496/article/details/131453586

版权

element-ui 专栏收录该内容

4 篇文章

订阅专栏

该文介绍了如何基于Element-UI库创建一个具有侧边栏的Vue应用。侧边栏包含两个子菜单，分别用于攻略管理和发布攻略。样式设置使得侧边栏具有特定背景色和文字颜色。使用时需注意将侧边栏置于具有`container`样式的div内，以保证正常布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基于element-ui的侧边栏及其使用方法

基于element-ui的侧板栏。

效果展示

在这里插入图片描述

代码讲解

代码结构
在这里插入图片描述

<!-- TabbarLeftView.vue -->
<template>
  <el-aside width="200px">
    <el-menu
      default-active="1"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      router
    >
      <el-submenu index="1">
        <template slot="title">攻略管理</template>
        <el-menu-item index="/">攻略列表</el-menu-item>
      </el-submenu>

      <el-submenu index="2">
        <template slot="title">发布攻略</template>
        <el-menu-item index="/orders">发布攻略</el-menu-item>
      </el-submenu>
    </el-menu>
  </el-aside>
</template>

<style>
.el-aside {
  background-color: #545c64;
  color: #fff;
  padding-top: 20px;
}
</style>

使用的时候需要注意，需要加上一个container属性的div，包裹，这样才可以正常布局。

.container {
  display: flex;
  height: 100vh;
}

在这里插入图片描述