关于vue优雅地使用ElementUI以及Ant-Design-Vue等UI框架的n层嵌套菜单设计

两层嵌套的菜单实现

两年前在上一家公司里面设计系统时，自行写了一个菜单，类似这样

由于当时的菜单比较简单，只有父子两层嵌套，因此代码也很简单，直接在template标签中使用两个for循环渲染出来，类似这样（当时使用的AntDesignVue的框架，由于他的menu组件卡顿太严重了，于是重新写的菜单组件）。

现在业务情况有些复杂了，子菜单里面还有子菜单，可能会出现好几层，但是不知道到底有几层，这可把鼠鼠难住了，咋办捏？
一开始想到使用component动态组件渲染，但是还是得写死固定几层，不行，像鼠鼠这么优雅的人，怎么能写出如此狼狈的代码.

多层嵌套复杂菜单的实现

我知道你很急，但是你先别急，先看看VUE文档中所描述的，说明template模板渲染并不是万能。

在有些时候，我们不得不做一些改变，在Render渲染函数中，也可以使用JSX。

这个时候，鼠鼠仿佛抓住了救命稻草，一道刺眼的光线照在了鼠鼠的身上，于是，写下了这段render函数代码。

render(h){
    const menuList = this.handlerMenu() // 多层嵌套的菜单配置列表
    let menuId = [] // 存放每个菜单的ID，做为每个菜单的唯一标识
    const fn = (menus)=>{
      return menus.map((x,i)=>{
        menuId.push(i) // 保存当前ID
        let result = '' // 存放节点的变量
        if(!x.submenu){ // 假如没有子菜单
          result = <el-menu-item onClick={()=>{this.open(x)}} index={menuId.join("-")}>
            <template slot="title">{x.title}</template>
            </el-menu-item>
        }else{
          result = <el-submenu index={menuId.join("-")}>
            <template slot="title">{x.title}</template>
            {fn(x.submenu)}  {/*这个递归就能解决多层嵌套的问题了*/}
            </el-submenu>
        }
        menuId.pop() // 每次将最后一个id干掉，保证每个子菜单的id与上一层关联
        return result
      })
    }
    return (<el-aside>
      <el-submenu index={menuId.join("-")}>
        {fn(menuList)}  {/*梦开始的地方*/}
        </el-submenu>
    </el-aside>)
  },

这段代码中用的UI是ElementUI，对jsx写法不熟悉的同学可以看一下文档学习学习，鼠鼠这就下班 。