<el-submenu>中的<el-menu-item>，触发时的颜色如何设置

<-menu-item>触发时的颜色可以通过设置<el-menu-item>的属性"active-text-color"来实现。例如，如果你想要触发时的颜色为红色，可以这样写：

<el-submenu index="1">
  <template slot="title">
    <i class="el-icon-location"></i>
    <span>导航一</span>
  </template>
  <el-menu-item index="1-1" :active-text-color="'red'">选项1</el-menu-item>
  <el-menu-item index="1-2" :active-text-color="'red'">选项2</el-menu-item>
  <el-menu-item index="1-3" :active-text-color="'red'">选项3</el-menu-item>
</el-submenu>

在这个示例中，当选项被触发时，文字颜色将变为红色。

相关问题

<el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect" style="padding-left: 5px;font-weight: bold;"> <el-submenu> <template slot="title">分类</template> <div v-for="(types, index) in Types" :key="index"> <el-menu-item>{{ types.tname }}</el-menu-item> </div> </el-submenu> </el-menu>

这是一个使用 Element UI 组件库的 Vue.js 代码片段。这段代码定义了一个水平导航菜单（`el-menu`），默认选中项的索引由 `activeIndex` 变量控制，菜单的模式为水平模式（`mode="horizontal"`），当用户选择菜单项时，会触发 `handleSelect` 方法。在菜单中定义了一个子菜单（`el-submenu`），并使用 `v-for` 指令遍历 `Types` 数组中的元素，在子菜单中为每个元素添加一个菜单项（`el-menu-item`），菜单项的内容为 `types.tname`，其中 `types` 是遍历到的当前元素，`tname` 是该元素的属性。最终的效果是在菜单中显示了一个名为“分类”的子菜单，子菜单中包含了多个菜单项，每个菜单项的内容为 `Types` 数组中的元素的 `tname` 属性。

<el-menu router>

`<el-menu router>`是一个Vue.js组件，在使用Vue.js开发Web应用程序时可以用来创建具有路由功能的菜单。它是由Element UI团队开发的，可以方便地与Element UI的其他组件集成使用。

使用`<el-menu router>`组件可以实现以下功能：

1. 根据路由配置动态生成菜单。
2. 点击菜单项时自动切换路由。
3. 支持多级菜单。
4. 支持自定义菜单项内容和样式。

要使用`<el-menu router>`组件，需要先安装并引入Element UI库，然后在Vue组件中引入`<el-menu router>`组件，并根据需要配置路由和菜单项。例如：

<template>
  <el-menu router :default-active="$route.path">
    <el-menu-item index="/">首页</el-menu-item>
    <el-submenu index="/products">
      <template slot="title">产品</template>
      <el-menu-item index="/products/list">产品列表</el-menu-item>
      <el-menu-item index="/products/detail">产品详情</el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
import { Menu, MenuItem, Submenu } from 'element-ui';

export default {
  components: {
    'el-menu': Menu,
    'el-menu-item': MenuItem,
    'el-submenu': Submenu,
  },
  data() {
    return {
      // ...
    }
  }
}
</script>

在上面的例子中，我们创建了一个包含两个菜单项的菜单。第一个菜单项是“首页”，路由路径为“/”。第二个菜单项是一个子菜单，包含两个菜单项，分别是“产品列表”和“产品详情”，路由路径分别为“/products/list”和“/products/detail”。使用`<el-menu router>`组件时，需要将`router`属性设置为`true`，这样菜单项的点击事件会自动触发路由切换。另外，我们还可以使用`default-active`属性来设置初始选中的菜单项，这里我们将其设置为当前路由路径。