如何使用elementui实现二级下拉菜单

Element UI是一个流行的前端组件库，它提供了一个名为`el-menu`的元素用于创建导航菜单，包括二级下拉菜单。要使用Element UI实现二级下拉菜单，你可以按照以下步骤操作：

1. 引入依赖：首先，在你的Vue项目中安装Element UI并引入CSS样式和组件库。

   npm install element-ui --save

然后，在你的`.vue`文件或全局样式中导入：

   <template>
     <div id="app">
       <!-- 其他内容 -->
     </div>
   </template>

   <script>
     import { ElMenu, ElMenuItem } from 'element-ui';
     // ...其他import
   </script>

2. 创建`ElMenu`组件：在模板部分，创建一个`<el-menu>`元素，并设置属性如`default-active`来指定默认激活的菜单项。

   <el-menu :default-active="$route.path" class="el-menu-demo">
     <!-- 下拉菜单结构 -->
   </el-menu>

3. 定义二级菜单项：使用`ElMenuItem`组件来表示菜单项，对于二级菜单，可以添加`index`属性和`submenu`标签来开启下拉模式。

   <el-menu-item index="1">一级菜单</el-menu-item>
   <el-submenu index="2">
     <template slot="title">二级菜单</template>
     <el-menu-item index="2-1">二级子菜单1</el-menu-item>
     <el-menu-item index="2-2">二级子菜单2</el-menu-item>
   </el-submenu>

4. 动态加载数据：如果需要动态生成菜单，可以在`v-for`循环中使用类似的数据结构，并结合`active-name`或`route`属性关联实际路由或状态。

5. 渲染完成后，二级菜单就会自动展开。如果你需要手动控制下拉菜单的显示隐藏，可以使用`el-menu-item`的`open-key`属性配合`@open`和`@close`事件。

完整例子：

<template>
  <el-menu default-active="1" @open="handleOpen" @close="handleClose">
    <el-menu-item index="1">一级菜单</el-menu-item>
    <el-submenu index="2">
      <template slot="title">二级菜单</template>
      <el-menu-item v-for="(item, index) in subItems" :key="index" :index="`${item.id}-${index}`">{{ item.name }}</el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      subItems: [
        { id: 1, name: '二级子菜单1' },
        { id: 2, name: '二级子菜单2' }
      ]
    };
  },
  methods: {
    handleOpen(key, indexPath) {
      console.log('当前激活的二级菜单:', key, indexPath);
    },
    handleClose(key, indexPath) {
      console.log('二级菜单关闭:', key, indexPath);
    }
  }
};
</script>