element-plus如何弄多级菜单

Element Plus是一个基于Vue.js的UI组件库，它提供了一个易于使用的API来创建复杂的用户界面，包括导航栏和菜单。如果你想要实现多级菜单，可以按照以下步骤操作：

1. **安装Element Plus**：
首先确保已经安装了Vue，并通过npm或yarn将Element Plus添加到项目中：

   npm install element-plus @vue/cli-plugin-element-plus
   # 或者
   yarn add element-plus vue-cli-plugin-element-plus

2. **引入组件**：
在你的Vue组件中，需要导入`<el-menu>`及其子组件`<el-submenu>`：

   <template>
     <div>
       <el-menu :default-active="$route.path" router>
         <!-- 多级菜单 -->
         <el-submenu v-for="(item, index) in menuItems" :key="index">
           <template slot="title">{{ item.title }}</template>
           <el-menu-item v-for="(subItem, subIndex) in item.subItems" :key="subIndex">
             {{ subItem }}
           </el-menu-item>
         </el-submenu>
       </el-menu>
     </div>
   </template>

3. **数据驱动**：
创建一个名为`menuItems`的数据属性，包含一级菜单和它们对应的二级菜单：

   data() {
     return {
       menuItems: [
         { title: '菜单1', subItems: [ '子菜单1-1', '子菜单1-2' ] },
         { title: '菜单2', subItems: [ '子菜单2-1', '子菜单2-2' ] }
       ]
     };
   }

4. **模板绑定**：
使用`:default-active`属性设置当前激活的菜单项，这里假设你的路由路径与菜单标题相匹配。

5. **调整样式**：
如果需要自定义样式，可以使用Element Plus提供的主题系统或者直接修改CSS。

完整示例：

<template>
  <div>
    <el-menu :default-active="$route.path" class="menu-demo" router>
      <el-submenu v-for="(item, index) in menuItems" :key="index" :index="index + 100 * menuItems.length">
        <template slot="title">{{ item.title }}</template>
        <el-menu-item v-for="(subItem, subIndex) in item.subItems" :key="subIndex">
          {{ subItem }}
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        { title: '菜单1', subItems: [ '子菜单1-1', '子菜单1-2' ] },
        { title: '菜单2', subItems: [ '子菜单2-1', '子菜单2-2' ] }
      ]
    };
  }
};
</script>

<style scoped>
.menu-demo {
  /* 根据需求添加样式 */
}
</style>