el-sub-menu 默认展开

el-sub-menu是Element UI框架中的一个组件，用于在侧边栏中展示子菜单。

el-sub-menu默认是闭合状态，在点击父级菜单时才会展开显示子菜单。但是如果需要el-sub-menu默认展开，可以通过设置default-active属性来实现。

在default-active属性中，可以指定一个子菜单的index值，这个子菜单在页面加载时就会自动展开。例如：

<el-menu>
  <el-sub-menu default-active="1">
    <template slot="title">菜单一</template>
    <el-menu-item index="1">选项1</el-menu-item>
    <el-menu-item index="2">选项2</el-menu-item>
    <el-menu-item index="3">选项3</el-menu-item>
  </el-sub-menu>
</el-menu>

在上面的代码中，el-sub-menu组件的default-active属性被设置为"1"，表示菜单一的第一个子菜单默认展开。页面加载时，菜单一的选项1会自动展示。

需要注意的是，如果一个el-menu中有多个el-sub-menu，默认展开多个子菜单可能会让页面看起来比较杂乱。因此，只有在必要的情况下才应该使用default-active属性默认展开子菜单。

相关问题

el-sub-menu下级嵌套el-sub-menu高亮问题

在使用Element UI框架开发时，`el-sub-menu`是其中的一个组件，它用于创建下拉菜单中的子菜单项。有时候，我们可能会遇到下级嵌套`el-sub-menu`时高亮不正确的问题。这个问题通常是因为Element UI默认情况下只能保证当前激活的菜单项高亮，而不包括嵌套层级中的其他`el-sub-menu`。

要解决这个问题，你可以采取以下措施：

1. 确保每一级的`el-sub-menu`都有一个唯一的`index`属性，这样Element UI可以追踪当前激活的路径。
2. 如果你使用的是`el-menu`的`unique-opened`属性，确保嵌套的`el-sub-menu`也遵循这个规则。`unique-opened`属性默认只展开一个子菜单，如果要展开多级子菜单，需要确保正确处理这个属性或通过其他方式实现。
3. 如果你有自定义的逻辑来处理菜单的激活状态，确保更新所有相关的`el-sub-menu`使其高亮。

为了确保下级嵌套的`el-sub-menu`也能正确高亮，你可能需要编写一些额外的JavaScript代码来监听菜单项的点击事件，并相应地更新菜单的激活状态。

el-sub-menu和el-menu-item的区别

Element Plus库中的`<el-sub-menu>`与`<el-menu-item>`都是用于构建菜单结构的组件，但它们的功能和用途有所不同：

1. `<el-menu-item>`（顶级菜单项）[^3]:
- 是一级菜单的基本单元，通常直接出现在`<el-menu>`组件中，表示独立可点击的操作或导航选项。

2. `<el-sub-menu>`（子菜单）[^1]:
- 当一个`<el-menu-item>`内部包含`<el-sub-menu>`时，它代表了一个可以展开的二级菜单，点击后会展示其内部的子菜单项。
- 样式上，如你想覆盖默认的子菜单标题颜色，需注意由于 scoped 样式的作用范围限制，如果在 scoped 的 `<style>` 中修改 `.el-sub-menu__title`，可能会影响到父组件，除非你直接针对子组件应用样式。

因此，`<el-menu-item>`通常用来表示顶层菜单，而`<el-sub-menu>`则用于组织更深层次的菜单结构。要改变子菜单标题的颜色，可能需要考虑作用域策略或采用其他方式（如使用全局CSS变量或自定义主题）。