vue3+elementplus无限级菜单

原创已于 2023-10-10 16:21:13 修改 · 1.5k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2023-10-10 10:18:19 首次发布

本文介绍了如何在Vue项目中安装ElementPlus库，包括npm安装和在入口文件中的引入，以及如何使用ElementPlus创建动态菜单，包括子菜单的渲染和Icon组件的导入。

1.在项目中安装elementplus

npm install element-plus --save

2.在项目入口文件中使用

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

3.创建菜单使用组件MainView 及子菜单渲染组件MenuItem

// ========MainView中的代码
<template>
  <div class="box">
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        :collapse="isCollapse"
        @open="handleOpen"
        @close="handleClose"
      >
<!-- menu-item为子组件（菜单渲染）并通过item把数据传递 给menu-item组件 -->
      <menu-item v-for="item in sliders" :key="item.indexPath" :item="item"  />

      </el-menu>
    </div>
</template>
<script setup>
import MenuItem from "@/components/MenuItem.vue";
// 得到菜单中的数据
const sliders = ref([        
        {
            "indexPath": "2",
            "title": "文章管理",
            "icon": "List",
            "children": [
                {
                    "indexPath": "/art-cate",
                    "title": "文章分类",
                    "icon": "Histogram"
                },
                {
                    "indexPath": "/art-list",
                    "title": "文章列表",
                    "icon": "DocumentCopy"
                }
            ]
        },
        {
            "indexPath": "3",
            "title": "个人中心",
            "icon": "User",
            "children": [
                {
                    "indexPath": "/user-info",
                    "title": "基本资料",
                    "icon": "Operation"
                },
                {
                    "indexPath": "/user-avatar",
                    "title": "更换头像",
                    "icon": "Camera"
                },
                {
                    "indexPath": "/user-pwd",
                    "title": "重置密码",
                    "icon": "Key"
                }
            ]
        }
    ])
// 请求

</script>

MenuItem.vue组件中的代码如下：

<template>
    <el-menu-item v-if="!item.children" :index="item.indexPath">
      <el-icon><component class="icon" :is="item.icon"></component></el-icon>
      <span :data-path="item.indexPath">{{ item.title }}</span>
    </el-menu-item>
   
    <el-sub-menu v-else :index="item.indexPath">
      <template #title>
        <el-icon><component class="icon" :is="item.icon"></component></el-icon>
        <span>{{ item.title }}</span>
      </template>
   
      <!-- 组件自调 -->
      <s-menu
        v-for="ele in item.children"
        :index="ele.indexPath"
        :key="ele"
        :item="ele"
      />
    </el-sub-menu>
  </template>
  <script setup>
  defineOptions({
    name: "SMenu",//组件命名
  });
  defineProps(["item"]);//父组件向子组件传递的数据

  </script>

注意：在MenuItem.vue组件中<component class="icon" :is="item.icon"></component>，在elementplus中icon是一个图标组件，需要以下步骤：

1.安装icon图标

npm install @element-plus/icons-vue

2.在入口文件中导入图标

// 如果您正在使用CDN引入，请删除下面一行。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

最后运行效果：