vue左侧菜单栏实现动态

Vue 左侧菜单栏可以通过动态渲染实现。具体来说，可以通过一个菜单数据数组来控制菜单栏的显示和隐藏。

首先，需要在 Vue 实例中定义菜单数据数组，例如：

data() {
  return {
    menuList: [
      {
        name: '菜单1',
        icon: 'el-icon-menu',
        children: [
          {
            name: '子菜单1',
            path: '/menu1/child1'
          },
          {
            name: '子菜单2',
            path: '/menu1/child2'
          }
        ]
      },
      {
        name: '菜单2',
        icon: 'el-icon-document',
        children: [
          {
            name: '子菜单3',
            path: '/menu2/child3'
          },
          {
            name: '子菜单4',
            path: '/menu2/child4'
          }
        ]
      }
    ],
    currentMenu: ''
  }
}

其中，`menuList` 数组包含了所有的菜单信息，包括菜单名称、图标和子菜单列表。`currentMenu` 则是当前选中的菜单项。

接下来，在 HTML 模板中，使用 `v-for` 指令遍历菜单数据数组，生成菜单栏的 HTML 代码：

<el-menu :default-active="currentMenu" class="el-menu-vertical-demo" @select="handleMenuSelect">
  <template v-for="(menu, index) in menuList">
    <el-submenu v-if="menu.children" :index="index.toString()">
      <template slot="title">
        <i :class="menu.icon"></i>
        <span slot="title">{{ menu.name }}</span>
      </template>
      <el-menu-item v-for="(child, childIndex) in menu.children" :index="child.path" :key="childIndex">{{ child.name }}</el-menu-item>
    </el-submenu>
    <el-menu-item v-else :index="menu.path" :key="index.toString()">
      <i :class="menu.icon"></i>
      <span slot="title">{{ menu.name }}</span>
    </el-menu-item>
  </template>
</el-menu>

在菜单栏中，使用 `v-if` 指令判断当前菜单项是否有子菜单，如果有，则生成一个子菜单，否则直接生成一个菜单项。同时，使用 `v-for` 指令遍历子菜单，生成子菜单项的 HTML 代码。

最后，在 Vue 实例中添加 `handleMenuSelect` 方法，用于处理菜单项的选中事件：

methods: {
  handleMenuSelect(index) {
    this.currentMenu = index;
  }
}

当用户选中菜单项时，该方法会将 `currentMenu` 属性更新为选中的菜单项的索引或路径，从而实现菜单栏的动态渲染。