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

矫情吗；* 2024-03-17 12:32 21阅读 0赞

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

基于element-ui的侧板栏。

### 效果展示 ###

![在这里插入图片描述][519cbe08b06741a9bc7ad8baadf9c0ed.png]

### 代码讲解 ###

代码结构  
![在这里插入图片描述][4e498e51910b4a74b74d2207effd7e2c.png]

<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;
    }

![在这里插入图片描述][fe50c4b0b487483ea4e7d6340921b678.png]

[519cbe08b06741a9bc7ad8baadf9c0ed.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/ac0712febe2b4643bcc0a4e194b649a0.png
[4e498e51910b4a74b74d2207effd7e2c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/886f4ee767cc4f77be6a1d86f21f145f.png
[fe50c4b0b487483ea4e7d6340921b678.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/566429af5381479daec899c3fe8b3696.png

发表评论取消回复

表情：

评论列表（有 0 条评论，21人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue+ELementUI主页布局----侧边栏布局（el-aside）

第一节Login.vue登录表单知识： [Element-UI+vue实现登录表单\_我爱布朗熊的博客-CSDN博客][Element-UI_vue_-CSDN] 具体El

港控/mmm°/ 2024年04月03日 08:01/ 0 赞/ 98 阅读

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

基于element-ui的侧边栏及其使用方法基于element-ui的侧板栏。效果展示 ![在这里插入图片描述][519cbe08b06741a9bc7ad8

矫情吗；*/ 2024年03月17日 12:32/ 0 赞/ 22 阅读

相关 requireJs sass侧边栏

koala 下载将sass编译为css文件 1 嵌套 2 $变量 3 @mixin 函数名(参数) 4 @include 函数调用 5 @import "xxx"

爱被打了一巴掌/ 2023年08月17日 16:20/ 0 赞/ 135 阅读

相关 21Flutter Drawer侧边栏、以及侧边栏内容布局

Tabs.dart import 'package:flutter/material.dart'; import 'tabs/Home.dart';

落日映苍穹つ/ 2023年08月17日 15:59/ 0 赞/ 141 阅读

相关小米侧边栏--css

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

悠悠/ 2023年07月02日 09:26/ 0 赞/ 54 阅读

相关 VScode的侧边栏设置

文章目录说是\`CSDN\`全站第一应该不过分吧？导读寻找侧边栏配置文件和\`Windows\`不太一样的安装目录和存储文件

╰+哭是因爲堅強的太久メ/ 2022年12月26日 09:25/ 0 赞/ 343 阅读

相关侧边导航栏

<template> <el-container style="height: 100vh" class="menu_container">

阳光穿透心脏的1/2处/ 2022年11月25日 10:12/ 0 赞/ 344 阅读

相关 html侧边导航栏,浮动侧边导航栏的基本布局

先来一张效果图 ![a34e46fcb0a2][] 效果图 HTML JS Bin 头部内容左侧的一些内容首页学习中心考试中心考

短命女/ 2022年10月06日 11:46/ 0 赞/ 337 阅读

相关侧边栏实现思路

如果你们在实际写代码的情况遇见bug可以加我QQ私聊 229236940 侧边栏式例 ![在这里插入图片描述][20190605171854957.gif] 上

爱被打了一巴掌/ 2022年01月22日 08:27/ 0 赞/ 400 阅读

相关侧边栏组件(Vue)

从右侧滑入使用方法: 外部传入draw的键,且键值为true开启外部监听@changeShow事件,通过将传入的draw值改为

蔚落/ 2021年07月24日 20:29/ 0 赞/ 708 阅读