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