在吗？手把手教vue-cli4+elementUI搭建通用后台管理系统---(一)UI界面搭建之sidebar侧边栏菜单(点击左侧导航，切换右侧内容)

---

前言

上一篇文章在吗？手把手教vue-cli4+elementUI搭建通用后台管理系统—(一)UI界面搭建之head头部已经搭建好头部，那么本文将讲侧边栏导航。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、创建侧边栏组件

在项目目录src/views下创建一个TheHeader.vue文件，代码如下：

<template>
  <div class="sidebar">
    <div class="collapse" @click="collClick">
      <i
        :class="!isCollapse ? 'el-icon-s-fold' : 'el-icon-s-unfold'"
      ></i>
    </div>
    <div class="menu">
      <el-menu
        default-active="1-4-1"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        background-color="#324157"
        text-color="#BFCBD9"
        :collapse="isCollapse"
      >
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span slot="title">导航一</span>
          </template>
          <el-menu-item index="1-1">选项1</el-menu-item>
          <el-menu-item index="1-2">选项2</el-menu-item>
          <el-submenu index="1-4">
            <span slot="title">选项4</span>
            <el-menu-item index="1-4-1">选项1</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span slot="title">项目管理</span>
          </template>
          <el-menu-item index="2-1">共有项目</el-menu-item>
          <el-menu-item index="2-2">私有项目</el-menu-item>
        </el-submenu>
        <el-menu-item index="3">
          <i class="el-icon-document"></i>
          <span slot="title">导航三</span>
        </el-menu-item>
        <el-menu-item index="4">
          <i class="el-icon-setting"></i>
          <span slot="title">导航四</span>
        </el-menu-item>
      </el-menu>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      isCollapse: false
    };
  },
  components: {},
  mounted() {},
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    collClick() {
      this.isCollapse = !this.isCollapse;
    }
  }
};
</script>

<style>
.sidebar {
  height: 100%;
  /* width: 201px; */
  background-color: #324157;
  float: left;
  overflow-y: scroll;
}
.collapse {
  cursor: pointer;
  font-size: 28px;
  color: white;
  height: 30px;
  position: relative;
  padding: 10px 0;
}
.collapse > i {
  display: inline-block;
  position: absolute;
  left: 15px;
}

.sidebar > div.menu {
  height: 100%;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  height: 100%;
}
</style>

样式得自己书写，style scoped意味着样式只用于此页面

1. 我使用的是带有折叠按钮的侧栏
2. 折叠按钮的icon切换是elementUI自带的icon
3. 侧栏我删掉了分组，如有需要可以保留，看自己需求

本示例使用到的elementUI组件如下：
elementUI导航菜单组件
elementUI icon图标

二、在Home.vue中拼接侧栏导航

Home.vue代码如下：

<template>
  <div class="wrapper">
    <TheHeader></TheHeader>
    <TheSidebar></TheSidebar>
  </div>
</template>

<script>
// @ is an alias to /src
import TheHeader from '@/views/TheHeader.vue';
import TheSidebar from '@/views/TheSidebar.vue';
export default {
  name: "Home",
  components: {
    TheHeader,
    TheSidebar
  },
  data() {
    return {
    }
  },
  mounted() {
    console.log("mounted");
  },
  methods: {

  }
};
</script>

三、菜单优化

上面的菜单都是写死在template中，对于以后需求变动有诸多不便，那最好的做法就是将菜单抽成数组，以变量的形式动态渲染到页面中，如果后续有新的菜单加入或者菜单顺序、层级变化，则只需要修改这个数组即可。

1、分析template中的结构

总结：

菜单模板由一下几个部分组成：

1. 唯一标识-----------------------------------------------------------index
2. 菜单名称------------------------------------------------------------title
3. 菜单icon------------------------------------------------------------icon
4. 子菜单（如果这个菜单有子菜单的情况下）--------------subs

模拟数据：
1主页
2客户管理
2-1用户管理
2-2车主卡管理
2-3司机管理
3测试
3-1测试二级菜单
3-1-1测试三级菜单

所以菜单数组应该这么写：

//先直接写在data(){}里即可
data() {
    return {
      isCollapse: false,
      menuList: [
        {
          icon: "el-icon-s-home",
          index: "homepage",
          title: "主页",
          name: "主页"
        },
        {
          icon: "el-icon-s-custom",
          index: "custommanage",
          title: "客户管理",
          subs: [
            {
              index: "usermanage",
              title: "用户管理",
              name: "用户管理"
            },
            {
              index: "usercard",
              title: "车主卡管理",
              name: "车主卡管理"
            },
            {
              index: "drivermanage",
              title: "司机管理",
              name: "司机管理"
            }
          ]
        },
        {
          icon: "el-icon-s-flag",
          index: "test1",
          title: "测试",
          subs: [
            {
              index: "test2",
              title: "测试二级",
              subs: [
                {
                  index: "test1-3",
                  title: "1-测试三级",
                  name: '1-测试三级'
                },
                {
                  index: "test2-3",
                  title: "2-测试三级",
                  name: '2-测试三级'
                }
              ]
            }
          ]
        }
      ]
    };
  },

根据菜单数组，修改template后，TheSidebar.vue完整代码如下：

<template>
  <div class="sidebar">
    <div class="collapse" @click="collClick">
      <i :class="!isCollapse ? 'el-icon-s-fold' : 'el-icon-s-unfold'"></i>
    </div>
    <div class="menu">
      <el-menu
        default-active="1-4-1"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        background-color="#324157"
        text-color="#BFCBD9"
        :collapse="isCollapse"
      >
        <template v-for="item in menuList">
          <template v-if="item.subs">
            <el-submenu :index="item.index" :key="item.index">
              <template slot="title">
                <i :class="item.icon"></i>
                <span slot="title">{{ item.title }}</span>
              </template>
              <template v-for="two in item.subs">
                <el-submenu v-if="two.subs" :index="two.index" :key="two.index">
                  <span slot="title">{{ two.title }}</span>
                  <!-- 三级菜单 -->
                  <el-menu-item
                    v-for="three in two.subs"
                    :index="three.index"
                    :key="three.index"
                    >{{ three.title }}</el-menu-item
                  >
                </el-submenu>

                <!-- 二级菜单 -->
                <el-menu-item v-else :index="two.index" :key="two.index">{{
                  two.title
                }}</el-menu-item>
              </template>
            </el-submenu>
          </template>

          <!-- 一级菜单 -->
          <template v-else>
            <el-menu-item :index="item.index" :key="item.index">
              <i :class="item.icon"></i>
              <span slot="title">{{ item.title }}</span>
            </el-menu-item>
          </template>
        </template>
      </el-menu>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      isCollapse: false,
      menuList: [
        {
          icon: "el-icon-s-home",
          index: "homepage",
          title: "主页",
          name: "主页",
        },
        {
          icon: "el-icon-s-custom",
          index: "custommanage",
          title: "客户管理",
          subs: [
            {
              index: "usermanage",
              title: "用户管理",
              name: "用户管理",
            },
            {
              index: "usercard",
              title: "车主卡管理",
              name: "车主卡管理",
            },
            {
              index: "drivermanage",
              title: "司机管理",
              name: "司机管理",
            },
          ],
        },
        {
          icon: "el-icon-s-flag",
          index: "test1",
          title: "测试",
          subs: [
            {
              index: "test2",
              title: "测试二级",
              subs: [
                {
                  index: "test1-3",
                  title: "测试三级1",
                  name: "测试三级1",
                },
                {
                  index: "test2-3",
                  title: "测试三级2",
                  name: "测试三级2",
                },
              ],
            },
          ],
        },
      ],
    };
  },
  components: {},
  mounted() {},
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    collClick() {
      this.isCollapse = !this.isCollapse;
    },
  },
};
</script>

<style>
.sidebar {
  height: 100%;
  /* width: 201px; */
  background-color: #324157;
  float: left;
  overflow-y: scroll;
}
.collapse {
  cursor: pointer;
  font-size: 28px;
  color: white;
  height: 30px;
  position: relative;
  padding: 10px 0;
}
.collapse > i {
  display: inline-block;
  position: absolute;
  left: 15px;
}

.sidebar > div.menu {
  height: 100%;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  height: 100%;
}

.menu /deep/.el-submenu__title {
  text-align: left;
}

.menu /deep/.el-menu-item {
  text-align: left;
}
</style>

四、查看效果

1、导航没有折叠时，效果如图

2、导航折叠时，效果如图：

---

总结

以上就是今天要讲的内容，本文仅仅简单介绍了封装一个侧栏导航组件，并且菜单可以动态获取渲染。