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

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