Element-ui-based sidebar and its usage

Element-ui-based sidebar and its usage

A sidebar based on element-ui.

Show results

code explanation

code structure

<!-- 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>

When using it, you need to pay attention, you need to add a div with the container attribute and wrap it, so that the layout can be normal.

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