Vue2+ElementUI实现无限级菜单

        使用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,