Element-UI修改默认的菜单样式

这个是在做小应用时遇到的问题，本来想以后将问题汇总后一起发布。可是很开心撒，而且网上没找到这个问题的简单解决方案（解决方案中经常让使用Vue或者scss等外部组件，可我就一个Hello Word，安装vue-cli什么的感觉太小题大做），所以先记录下来，也让需要的人少跑几步。
先贴上图看一下效果，虽然不美观，但聪明的你掌握思路后还可以继续美化哈。

这个问题的解决方法当然不是我凭空想出来的，也是在网上找了很多文章后自己鼓捣出来的（虽然这些文章没有给出解决方案，但告诉了我怎么自己去寻找答案，哈哈）。其中一个问题是：element-ui 如何修改nav menu 带有二级的title样式？。

接下来说一下这个问题的解决思路，虽然我只是修改了水平菜单栏，但其他控件的样式修改思路应该是差不多的。对于Element-UI这种前端框架，里面的自定义标签（例如el-menu，el-header等）基本上都是通过设置原生html标签的class属性来实现的，包括自定义标签的其他属性，最后大部分都转换成了class的值（例如el-menu的mode属性如果是horizontal，那么最后会转换成class中的一个值“el-menu–horizontal”，而菜单中的slot属性title会转换为“.el-submenu__title”，bootstrap就很直接，直接设置原生html标签的类属性），所以修改样式时只需找到这些标签对应的类名称，然后按照结构用css语法做相应的处理。
知道了原理还不行，最麻烦的实际上还是怎么找这些类的值，用F12开发人员工具一步一步找到自己需要的内容，对于那些在浏览器源码中没有找到的属性，就需要自己琢磨一下了。

根据代码说明会比较容易理解，贴上代码，里面只包含菜单相关的内容，为了便于解释，我将说明直接写到了代码中。

<el-header style="padding: 0px;">
        <!-- 设置顶部菜单的最大高度以避免菜单栏太高 -->
          <el-menu id="menubar" mode="horizontal" style="max-height:30px;">
              <el-submenu index="1">
                <template slot="title">
                  <i class="fa fa-edit"></i>
                  <span slot="title">打开的文件</span>
                </template>
                <el-menu-item index="1-1">选项1</el-menu-item>
              </el-submenu>
              <el-submenu index="2">
                <template slot="title">
                  <i class="fa fa-file-text-o"></i>
                  <span slot="title">临时文件</span>
                </template>
                <el-submenu index="2-1">
                  <span slot="title">选项4</span>
                  <el-menu-item index="2-1-1">选项1</el-menu-item>
                </el-submenu>
              </el-submenu>
              <el-submenu index="3">
                <template slot="title">
                  <i class="fa fa-star-o"></i>
                  <span slot="title">模板文件</span>
                </template>
                <el-menu-item index="3-1">选项1</el-menu-item>
              </el-submenu>
              <el-submenu index="4">
                <template slot="title">
                  <i class="fa fa-file-archive-o"></i>
                  <span slot="title">归档文件</span>
                </template>
                <el-submenu index="4-1">
                  <span slot="title">选项4</span>
                  <el-menu-item index="4-1-1">选项1</el-menu-item>
                </el-submenu>
              </el-submenu>
              <el-menu-item index="4">
                <i class="fa fa-trash-o"></i>
                <span slot="title">废纸篓</span>
              </el-menu-item>
            </el-menu>
      </el-header>

<style>
  /* 水平菜单顶层菜单样式 */
  /* >符号表示直接孩子，.el-menu--horizontal>.el-submenu .el-submenu_title表示的
  是类.el-menu--horizontal元素（这个是顶层菜单el-menu）下的第一层元素（sub-menu）下的标题，
  这个标题是放在<i>元素的slot属性中的，从而找到了<i>元素，修改它的样式就可以了 */
  .el-menu--horizontal>.el-submenu .el-submenu__title {
    height: 30px;
    line-height: 30px;
    border-bottom: 2px solid transparent;
  }
  /* 水平菜单子菜单的标题（注意，标题和菜单项不一样，标题是使用<i slot="title">表示的，需要单独处理），
  这里使用.el-submenu>.el-submenu_title定位到子菜单（不是菜单项） */
  .el-menu--horizontal .el-menu .el-submenu>.el-submenu__title {
    float: none;
    height: 23px;
    line-height: 23px;
  } 
  /* 水平菜单子菜单中的所有菜单项 */
  .el-menu--horizontal .el-menu .el-menu-item {
    float: none;
    height: 23px;
    line-height: 23px;
    width: auto;
  } 

</style>

就写这么多吧，因为注释写的比较简单，希望能够帮到你。如果对于文章中的内容有疑问，欢迎指出来以便讨论或修正。

补充一下竖直菜单折叠后的处理情况：
非折叠的竖直菜单处理方式和上方的水平菜单一样，只不过需要将horizontal改为vertical。对于折叠菜单，菜单栏会和非折叠竖直菜单的菜单栏样式一样，只需要单独处理弹出菜单的情况。样式如下代码所示：

/* ########################## */
  /* Element-UI中，在没有折叠的菜单中，无论是水平还是竖直菜单，子菜单是放在菜单栏所在的div中的，
  只是将display属性设置为了none。
     而在折叠菜单中，虽然菜单项也是放在页面上，但不在是放在菜单栏所在的div中，而是放在了页面底部的单独div中，
     类属性值是el-menu--popup，因为是单独的div，所以在处理弹出菜单时就比较方便，直接处理el-submenu__title
     和el-menu-item就可以，而不必区分是几级菜单项（如果不同级别菜单项要分别处理，需要使用“>”等操作分别处理） */
  /* 处理竖直菜单收齐后的弹出菜单中的子菜单 */
  .el-menu--vertical .el-menu--popup .el-submenu__title {
    height: 30px;
    line-height: 30px;
  }
  .el-menu--vertical .el-menu--popup .el-menu-item {
    height: 30px;
    line-height: 30px;
  }

弹出菜单效果: