el-menu动态侧边栏

您好！对于动态侧边栏，您可以使用 Element UI 中的 el-menu 组件来实现。el-menu 是一个强大的菜单组件，可以根据数据动态生成菜单项。

首先，您需要准备好菜单的数据。可以是一个数组，每个元素代表一个菜单项，包含菜单的标题、图标、路径等信息。

然后，在页面中使用 el-menu 组件，并通过 v-for 指令循环渲染菜单项。使用 v-bind 指令将菜单项的数据绑定到组件的属性上，例如 title、icon、index 等。

示例代码如下所示：

<el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" router>
  <template v-for="item in menuList">
    <el-submenu v-if="item.children && item.children.length > 0" :key="item.index" :index="item.index">
      <template slot="title">
        <i :class="item.icon"></i>
        <span>{{ item.title }}</span>
      </template>
      <el-menu-item v-for="child in item.children" :key="child.index" :index="child.index">
        <router-link :to="child.path">{{ child.title }}</router-link>
      </el-menu-item>
    </el-submenu>
    <el-menu-item v-else :key="item.index" :index="item.index">
      <i :class="item.icon"></i>
      <span>{{ item.title }}</span>
    </el-menu-item>
  </template>
</el-menu>

在上面的示例中，menuList 是一个数组，保存了菜单项的信息。使用 v-for 指令将其循环渲染成菜单项。如果菜单项有子菜单，则使用 el-submenu 组件包裹 el-menu-item 组件。如果没有子菜单，则直接使用 el-menu-item 组件。

通过 :index 绑定菜单项的索引值，可以实现高亮当前选中的菜单项。使用 :default-active 绑定 $route.path，可以根据当前路由路径自动选中对应的菜单项。

以上就是使用 el-menu 实现动态侧边栏的基本步骤，您可以根据自己的需求进行进一步的定制和样式调整。希望能对您有帮助！如果还有其他问题，请随时提问。