el-menu-item样式

el-menu-item 是 Element UI 框架中用于导航菜单的组件，它提供了一些默认的样式和属性，使得开发者可以快速构建美观的导航菜单。以下是一些常见的 el-menu-item 样式和属性：

1. **激活状态**：默认情况下，el-menu-item 会根据当前路由高亮显示激活状态的菜单项。
2. **禁用状态**：可以通过设置 `disabled` 属性来禁用某个菜单项，使其不可点击。
3. **图标**：可以使用 `icon` 属性为菜单项添加图标。
4. **自定义样式**：可以通过自定义 CSS 来覆盖默认样式，以满足特定的设计需求。

### 示例代码

<template>
  <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
    <el-menu-item index="1">处理中心</el-menu-item>
    <el-menu-item index="2" disabled>消息中心</el-menu-item>
    <el-menu-item index="3">
      <i class="el-icon-menu"></i>订单管理
    </el-menu-item>
    <el-menu-item index="4">用户管理</el-menu-item>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '1'
    };
  }
};
</script>

<style>
.el-menu-item.is-active {
  color: #409EFF;
}
</style>

### 常用属性

- `index`：唯一标识符，用于标识菜单项。
- `disabled`：是否禁用菜单项。
- `icon`：菜单项的图标类名。

### 自定义样式

可以通过覆盖默认的 CSS 类来修改样式。例如：

.el-menu-item {
  font-size: 16px;
  color: #333;
}
.el-menu-item:hover {
  background-color: #f0f0f0;
}
.el-menu-item.is-active {
  color: #409EFF;
  font-weight: bold;
}