菜单级别不确定，想要自适应，且可以折叠的菜单。
数据是一个数组。
<template><div class="Level" ref="Level"></div>
</template>import {ref} from 'vue'
export default{data(){Level:ref(null),menuData: [{parentid: 0,name: "医院",contents: [{parentid: 1,name: "外科",contents: [],level: 2,para: {"para1": "值1","para2": "值2"}}],]}
}为什么想用DFS呢？因为数组内对象嵌套的数组，又不知道后端确切最高返回几层，只能按照深度读取，并且为每个节点逐深度的创建DOM，为每个节点（不包括只有父节点）添加点击展开和隐藏事件，使用dispaly属性完成。
实现DFS
/*** 递归分级菜单* @param {node} object 追加的dom节点* @param {parentElement} Dom :被追加的dom* @return {void}*/DFSLevel(node, parentElement) {if (!node) return;// 为当前节点创建一个div元素var text = document.createElement("div");text.innerHTML = node.name;// 存在子集if (node.contents && Array.isArray(node.contents) && node.contents.length > 0) {// 添加点击事件，实现隐藏和显示子元素的功能text.addEventListener('click', () => {// 获取子元素的divvar childrenDivs = text.querySelectorAll('div');// 显隐切换childrenDivs.forEach(div => {if(div.style.display=='block') div.style.display ='none';else div.style.display = 'block'});});node.contents.forEach(subNode => {this.DFSLevel(subNode, text); // 递归});}parentElement.appendChild(text);},initMenu() {// 从根节点开始递归this.menuData.forEach(rootNode => {this.DFSLevel(rootNode, this.$refs.Level);});}虽然Vue 可以通过v-for 和v-if 层层判断，但是我真的受够了
