10-使用导航菜单后展示效果与原效果不符问题（elementui）

前提条件：在使用了elementui的布局后加入导航菜单el-menu，但是效果与el-menu示例效果不一样，菜单名称过于靠近展开图标，三级菜单的位置前移

示例图

使用效果图

过程，排查一轮问题后发现，是布局的样式导致了样式问题，主要原因在于el-aside侧边栏容器

在添加布局的时候，一般会将示例中的样式也一并添加，这其中就有影响了el-menu中菜单文本位置的属性，也就是text-align

解决方法可以是

1、不使用el-aside

2、清除text-align

3、在el-menu的父元素（el-aside或其它）上添加style="text-align:left"覆盖掉原样式

需要注意的是，在初始化项目时，App.vue中会自带样式，其中也有text-align，如果需要清除text-align的情况下，要把App.vue中的text-align也清除掉

最后效果就跟示例的一样了

坚持就是胜利！