ElementUI实现二级菜单

Element UI是一个基于Vue.js的开源UI组件库，它提供了一系列预设的组件和丰富的功能，包括实现二级菜单。在Element UI中，你可以利用其`el-menu`组件及其`submenu`属性轻松创建二级菜单。

首先，在HTML结构上，你可以这样做：

<template>
  <div>
    <el-menu default-active="1" class="el-menu-demo">
      <el-submenu index="1">
        <template slot="title">一级菜单</template>
        <el-menu-item-group title="二级菜单组">
          <el-menu-item index="1-1">菜单项1</el-menu-item>
          <el-menu-item index="1-2">菜单项2</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <!-- 添加更多的一级菜单... -->
    </el-menu>
  </div>
</template>

在CSS样式方面，可以根据需求调整`.el-menu-demo`的样式。

然后，在JavaScript或Vue组件内，你可以初始化这个菜单：

<script>
export default {
  data() {
    return {};
  },
  mounted() {
    this.$refs.menu // 获取到el-menu元素
      .defaultOpeneds.push('1') // 打开一级菜单
      .defaultActive = '1-1'; // 设置默认激活的二级菜单项
  }
}
</script>