当前位置：首页 > news >正文

Vue2+ElementUI实现无限级菜单

news 来源：原创 2025/4/29 10:34:26

使用Vue2和ElementUI实现无限级菜单，通常菜单数据以树形结构存储，每个菜单包含多个子菜单，子菜单又可以继续包含更深层次的子菜单项。所以，需要使用递归形式，完成子项菜单的渲染。

这里，结合Element UI界面的el-menu和el-submenu组件来构建菜单结构，有子菜单时使用el-submenu，否则使用el-menu-item。可以通过自定义组件对Element-UI菜单组件递归渲染，也可以使用Vue的render方法完成Element-UI的菜单组件的渲染，通过render函数方式可以使用JavaScript代码来完成布局和结构。

render函数是Vue组件的一个方法，用于返回一个虚拟节点（VNode）结构，该结构将被转换为真实的DOM元素。

一、安装

vue2的安装之前已有一篇文章介绍过，不清楚朋友可以前去了解，地址：Vue.js快速入门之一：安装和配置_vue 安装 js-storage-CSDN博客。

1.1 vue-cli全局安装

npm install -g vue-cli

1.2 初始化项目

vue init webpack projectName

1.3 执行命令

打开git bash，输入命令创建项目，命令代码如下：

Administrator@PC-20240224TOYL MINGW64 /d/workspace/vue
$ vue init webpack vue2element-nav? Project name vue2element-nav
? Project description A Vue.js project
? Author 作者名称 <邮箱地址.qq.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recom
mended) npm

执行完毕后，如下图所示，表示已完成项目的创建和初始化。

通过上述提示命令，运行项目。

二、安装Element-UI

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。官网地址：Element - The world's most popular Vue UI framework。

2.1 安装

npm i -s element-ui

2.2 使用

打开main.js文件，引入Element UI组件。代码如下：

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI);

三、模拟数据

这里先使用模拟数据完成无限级菜单的实现，在项目src目录下创建data文件夹，并新建nav.js文件，用于存储模拟数据。如下图：

3.1 json数据

打开创建好的文件src/data/nav.js，将模拟数据贴入即可，代码如下：

/*** 模拟数据*/
const dataList = [{"name": "网络安全渗透工程师体系大纲","pid": 0,"createtime": "2023-03-29","updatetime": "2023-03-29","id": 1},{"name": "WEB通信、前后端原理","pid": 1,"createtime": "2023-03-29","updatetime": "2023-03-29","id": 2},{"name": "信息收集","pid": 1,"createtime": "2023-03-29","updatetime": "2023-03-29","id": 3},{"name": "注入全方位利用+数据库注入","pid": 1,"createtime": "2023-03-29","updatetime": "2023-03-29","id": 4},{"name": "前端渗透、文件上传解析漏洞","pid": 1,"createtime": "2023-03-29","updatetime": "2023-03-29","id": 5},{"name": "漏洞利用","pid": 1,"createtime": "2023-03-29","updatetime": "2023-03-29","id": 6},{"name": "漏洞挖掘","pid": 1,"createtime": "2023-03-29","updatetime": "2023-03-29","id": 7},{"name": "Web服务器通信原理","pid": 2,"createtime": "2023-03-29","updatetime": "2023-03-29","id": 8},{"name": "后端基础SQL","pid": 2,"createtime": "2023-03-29","updatetime": "2023-03-29","id": 9},{"name": "数据库简介及SQL语法","pid": 2,"createtime": "2023-03-29","updatetime": "2023-03-29","id": 10},{"name": "后端基础SQL高级查询与子查询","pid": 2,"createtime": "2023-03-29","updatetime": "2023-03-29","id": 11},{"name": "后端基础PHP简介及基本函数上","pid": 2,"createtime": "2023-03-29","updatetime": "2023-03-29","id": 12},{"name": "后端基础PHP—表单验证","pid": 2,"createtime": "2023-03-29","updatetime": "2023-03-29","id": 13},{"name": "正则表达式","pid": 2,"createtime": "2023-03-29","updatetime": "2023-03-29","id": 14},{"name": "信息搜集的意义 — 渗透测试的灵魂","pid": 3,"createtime": "2023-03-29","updatetime": "2023-03-29","id": 15},{"name": "信息收集（一）","pid": 3,"createtime": "2023-03-29","updatetime": "2023-03-29","id": 16},{"name": "网络架构-信息收集","pid": 3,"createtime": "2023-03-29","updatetime": "2023-03-29","id": 17},{"name": "前端-信息收集","pid": 3,"createtime": "2023-03-29","updatetime": "2023-03-29","id": 18},{"name": "系统-信息收集","pid": 3,