Vue3 + Element-Plus 实现动态菜单栏

<template>
  <el-menu
    :default-active="activeMenu"
    class="el-menu-vertical-demo"
    @open="handleOpen"
    @close="handleClose"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b">
    <template v-for="item in menuList" :key="item.index">
      <el-sub-menu v-if="item.children && item.children.length > 0" :index="item.index.toString()">
        <template #title>
          <i :class="item.icon"></i>
          <span>{{ item.title }}</span>
        </template>
        <template v-for="subItem in item.children" :key="subItem.index">
          <el-menu-item :index="subItem.index.toString()">
            {{ subItem.title }}
          </el-menu-item>
        </template>
      </el-sub-menu>
      <el-menu-item v-else :index="item.index.toString()">
        <i :class="item.icon"></i>
        <template #title>{{ item.title }}</template>
      </el-menu-item>
    </template>
  </el-menu>
</template>
 
<script setup>
import { ref } from 'vue';
 
const activeMenu = ref('1');
 
const handleOpen = (key, keyPath) => {
  console.log('open: ', key, keyPath);
};
 
const handleClose = (key, keyPath) => {
  console.log('close: ', key, keyPath);
};
 
const menuList = ref([
  {
    index: '1',
    title: '导航一',
    icon: 'el-icon-location',
    children: [
      { index: '1-1', title: '子导航一' },
      { index: '1-2', title: '子导航二' }
    ]
  },
  // ...更多菜单项
]);
</script>

这个代码实例使用了Vue 3和Element Plus来创建一个动态的菜单栏，其中menuList是一个响应式数据，可以根据实际应用程序的需求动态更新。代码中包含了菜单项的打开和关闭的处理函数，可以根据实际情况进行功能扩展。