vue+elementui实现多级菜单栏（x-template模板方式）

最近在写框架，开发主页面的时候布局采用的是左侧菜单栏的形式，因为没有现成的轮子与使用技术栈的原因，选择使用elementui的navmenu控件进行改造，实现多层级的菜单栏展现样式，先上个效果图

因为是使用asp.net mvc5进行的开发，所以不可能使用webpackge纯前端的方式使用vue单文件的形式造轮子，所以经过搜索，决定使用x-template类型的脚本文件作为模板载体进行二次封装，首先分析下navmenu的结构，最底层的无孩子节点的菜单使用el-menu-item标签标识，有孩子节点的菜单使用el-submenu标签进行嵌套，template标签显示该层级的菜单名称，所以我们需要对el-menu-item这个标签进行递归判断，上一波代码

1.模板

2.调用

3.注册组件与初始化数据

注：

1.在不使用vue工程开发组件的时候，采用x-template类型的脚本声明模板，在注册的时候模板使用#+脚本的id进行调用

2.组件循环的原理就是在拥有nodes数据，即拥有孩子节点时，在模板中嵌套使用声明的组件

3.如果想将模板分离，可以将模板内容定义在一个html文件中，通过ajax的get方法获取内容，可参考如下代码

var treetemplatepath = applicaitoncontext + '/component/tree/fastdo-tree-template.html';
Vue.component('fastdo-tree', function (resolve, reject) {
    $.get(treetemplatepath).then(function (res) {
        resolve({
            template: res,
            //这边的参数名称，例如defaultExpandAll要与elementui中的保持一致，否则会不被识别
            props: ["data", "defaultProps", "defaultExpandAll"],
            methods: {
                handleNodeClick(data) {
                    //子组件调用父组件方法，node-click为绑定事件方法而非js函数名
                    this.$emit('node-click', data)
                }
            }
        })
    });
});

示例源码地址：https://gitee.com/grassprogramming/vue_multilevel_menu_bar/tree/master