Vue开发实例（六）实现左侧菜单导航-二、二级菜单

<div>
        <el-menu background-color="#545c64" text-color="#ffffff"
                 active-text-color="#ffd04b" default-active="2" >
            <el-submenu index="1">
                <template slot="title"><i class="el-icon-location"></i><span>一级菜单1</span></template>
                <el-menu-item index="1-1">选项1</el-menu-item>
                <el-menu-item index="1-2">选项2</el-menu-item>
            </el-submenu>
            <el-menu-item index="2"><i class="el-icon-document"></i>一级菜单2</el-menu-item>
            <el-menu-item index="3"><i class="el-icon-setting"></i>一级菜单3</el-menu-item>
        </el-menu>
    </div>

修改步骤：

1. 将 el-menu 修改为 el-submenu
2. 按钮名称、图标用 template 标签包裹，必须加入 slot="title"属性，否则菜单样式不对。
3. 加入新的两个 el-menu-item。

参考代码：

由于之前挖过一个坑，就是global.css里面的height，之前也提到过，所以要设置一下，el-submenu的高度，具体的参考代码

<template>
  <div>
    <el-menu
      background-color="#545c64"
      text-color="#ffffff"
      active-text-color="#ffd04b"
      default-active="2"
    >
      <el-submenu index="1">
        <template slot="title"
          ><i class="el-icon-location"></i><span>一级菜单1</span></template
        >
        <el-menu-item index="1-1">选项1</el-menu-item>
        <el-menu-item index="1-2">选项2</el-menu-item>
      </el-submenu>
      <el-menu-item index="2"
        ><i class="el-icon-document"></i>一级菜单2</el-menu-item
      >
      <el-menu-item index="3"
        ><i class="el-icon-setting"></i>一级菜单3</el-menu-item
      >
    </el-menu>
  </div>
</template>

<script>
export default {
  name: "Aside",
};
</script>

<style scoped>
.el-submenu {
  height: auto;
}
.el-icon-location,
.el-icon-document,
.el-icon-setting {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
</style>