如何去除ElementUI菜单栏下划线

在使用ElementUI进行前端开发时，菜单栏是一个常用的组件。然而，默认情况下，菜单栏可能会带有下划线，这在某些设计需求下可能不太符合我们的预期。下面将介绍几种去除ElementUI菜单栏下划线的方法。

方法一：使用CSS样式覆盖

ElementUI的样式是基于CSS类来定义的。我们可以通过自定义CSS样式来覆盖默认的下划线样式。在你的项目中找到对应的CSS文件或者在组件的style标签中添加以下代码：

.el-menu--horizontal.el-menu-item.is-active {
  border-bottom: none;
}

上述代码中，.el-menu--horizontal 选择了水平方向的菜单栏，.el-menu-item.is-active 选择了当前激活的菜单项，border-bottom: none; 则将底部边框（即下划线）设置为无。

方法二：全局样式修改

如果你希望在整个项目中统一去除菜单栏的下划线，可以在全局的CSS文件中进行修改。比如，在App.vue或者main.css中添加以下代码：

.el-menu--horizontal.el-menu-item {
  border-bottom: none;
}

这样，所有水平方向的菜单栏菜单项的下划线都会被去除。

方法三：通过scoped样式局部修改

如果你只想在某个特定的组件中去除菜单栏的下划线，可以在该组件的style标签中添加 scoped 属性，然后添加如下样式：

<template>
  <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
    <!-- 菜单项内容 -->
  </el-menu>
</template>

<style scoped>
.el-menu-demo.el-menu-item.is-active {
  border-bottom: none;
}
</style>

这里通过给菜单栏添加了一个自定义类 el-menu-demo，然后在scoped样式中针对这个类下的激活菜单项去除下划线。

注意事项

在修改ElementUI的默认样式时，需要注意可能会影响到其他相关的样式。如果出现样式冲突或者其他问题，可以通过浏览器的开发者工具进行调试，查看具体的CSS样式应用情况，以便进行针对性的调整。