elementplus el-menu的用法

elementplus el-menu是一个基于Vue.js的菜单组件，可用于创建不同类型的菜单，包括垂直菜单、水平菜单和折叠菜单等。以下是elementplus el-menu的用法：

1. 引入el-menu组件：

import { ElMenu } from 'element-plus';

2. 在template中使用el-menu组件：

<el-menu :default-active="activeIndex" mode="horizontal" @select="handleMenuSelect">
  <el-menu-item index="1">菜单1</el-menu-item>
  <el-submenu index="2">
    <template #title>菜单2</template>
    <el-menu-item index="2-1">子菜单1</el-menu-item>
    <el-menu-item index="2-2">子菜单2</el-menu-item>
  </el-submenu>
  <el-menu-item index="3">菜单3</el-menu-item>
</el-menu>

3. el-menu组件的属性和事件：

属性：

- default-active：默认选中的菜单项的index值
- mode：菜单模式，可选值为horizontal（水平）和vertical（垂直），默认为vertical
- unique-opened：是否只保持一个子菜单展开，可选值为true和false，默认为false
- router：是否开启路由模式，可选值为true和false，默认为false

事件：

- select：菜单项被选中时触发的事件，参数为选中的菜单项的index值

4. el-menu-item和el-submenu组件：

el-menu-item和el-submenu是el-menu组件的子组件，用于创建菜单项和子菜单。el-menu-item组件的属性包括：

- index：菜单项的唯一标识，必填
- disabled：是否禁用菜单项，可选值为true和false，默认为false

el-submenu组件的属性包括：

- index：子菜单的唯一标识，必填
- disabled：是否禁用子菜单，可选值为true和false，默认为false

el-submenu组件还有一个特殊的插槽，用于自定义子菜单的标题，示例代码中的template #title就是自定义的子菜单标题。