element ui如何修改NavMenu 导航菜单里面选项的样式

要修改 Element UI 的 NavMenu 导航菜单里面选项的样式，可以使用以下两种方法：

1. 使用 Element UI 提供的样式类

在 NavMenu 组件中，每个选项都是一个 el-menu-item 组件，因此你可以使用 Element UI 提供的样式类来修改选项的样式。例如，要修改选项的背景颜色和字体颜色，可以在 CSS 文件中添加以下代码：

/* 修改选项的背景颜色 */
.el-menu-item.is-active,
.el-menu-item:hover {
  background-color: #f0f0f0;
}

/* 修改选项的字体颜色 */
.el-menu-item.is-active a,
.el-menu-item:hover a {
  color: #333;
}

2. 自定义 NavMenu 组件的模板

如果你需要更复杂的样式修改，可以自定义 NavMenu 组件的模板，在模板中添加自己的 CSS 样式。具体操作步骤如下：

1）在 Vue 组件中，使用 template 属性自定义 NavMenu 组件的模板，并在模板中添加自己的 CSS 样式。例如：

<template>
  <el-menu class="my-nav-menu">
    <template v-for="item in menuData">
      <el-menu-item :index="item.index" :key="item.index">
        <i :class="item.icon"></i>
        <span slot="title">{{ item.title }}</span>
      </el-menu-item>
    </template>
  </el-menu>
</template>

<style scoped>
.my-nav-menu {
  /* 自定义 NavMenu 的样式 */
}

.my-nav-menu .el-menu-item {
  /* 自定义 NavMenu 选项的样式 */
}
</style>

2）在 Vue 组件的 script 标签中，使用 components 属性注册自定义的 NavMenu 组件，并在其他组件中使用自定义的 NavMenu 组件。

<script>
import { defineComponent } from 'vue';
import MyNavMenu from './MyNavMenu.vue';

export default defineComponent({
  name: 'MyApp',
  components: {
    'my-nav-menu': MyNavMenu,
  },
});
</script>

<template>
  <div>
    <my-nav-menu :menuData="menuData" />
  </div>
</template>

通过以上两种方法，你可以灵活地修改 NavMenu 导航菜单里面选项的样式。