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开发人员工具一步一步找到自己需要的内容，对于那些在浏览器源码中没有找到的属性，就需要自己琢磨一下了。

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

        
          
              
                
                选项1
              
              
                
                
                  选项4
                  选项1
                
              
              
                
                选项1
              
              
                
                
                  选项4
                  选项1
                
              
              
                
                废纸篓
              
            
      

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

补充一下竖直菜单折叠后的处理情况：
非折叠的竖直菜单处理方式和上方的水平菜单一样，只不过需要将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;
  }

弹出菜单效果: