vue.js树菜单HTML标记看起来更好

Question

我正在尝试使用vue.js组织树形菜单，
但是获取更多HTML标签存在问题。

'<'ul'>'标签成为Tree组件，下面的'<'li'>'标签成为要在每个Tree节点作为作用域插槽输出的模板定义。

在作用域切片中，使用传递的上下文数据（项目）打印节点的形状。

要在其中添加子树的标记成为ChildTree组件。
然后以递归方式打印模板。

注释菜单 https://jsfiddle.net/q31o7w9f/16/

[FolderView.vue]
<nav id="contract_navi">
<ul is="tree" :data="treeData" class="root_list">
            <li slot-scope="{ item, index, depth }">
                <a href="#" @click="$set(item,'showChildren',!item.showChildren)">
                    <i class="folder"></i>{{item.name}}</a>
                <ul style="display:block">
                    <li><a href="#">
                        <l is="childTree" :data="item.children" v-show="item.showChildren"/>
                    </a></li>
                </ul>
            </li>
        </ul>
</nav>


[tree-div.js]
export default function install(Vue) {
    Vue.component('tree', {
        name: 'tree',
        props: ['data', 'tag', '_depth'],
        isActive: false,
        render(h) {
            var data = this.$props.data || []
            var tag = this.$props.tag || this.$vnode.data.tag || 'ul'
            var depth = this.$props._depth || 0
            var slot = this.$scopedSlots.default

            var children = data.map((d, i) => {
                var context = {item: d, index: i, depth: depth}
                return slot(context)
            })
            return h(tag, children)
        }
    })

    function findParentTree(vm) {

        if (!vm)
            return null
        if (vm.$vnode && vm.$vnode.componentOptions &&
            vm.$vnode.componentOptions.tag === 'tree')
            return vm
        if (!vm.$parent)
            return null
        return findParentTree(vm.$parent)
    }

    Vue.component('childTree', {
        name: 'childTree',
        props: ['data', 'tag'],
        render(h) {

            var parentTree = findParentTree(this)
            console.log("BANG3392==" + parentTree)
            if (!parentTree)
                return h('')

            var data = this.$props.data || []
            var tag = this.$props.tag || this.$vnode.data.tag || 'ul'
            var parentDepth = parentTree.$props._depth || 0
            var slot = parentTree.$scopedSlots.default

            if (!slot)
                return h(tag)

            return h('tree', {
                props: {data: data, tag: tag, _depth: parentDepth + 1},
                scopedSlots: {default: slot}
            })
        }
    })
}

目前是HTML的结构。

<ul data-v-b7d6ea10="" class="root_list">
    <li data-v-b7d6ea10="">
        <a data-v-b7d6ea10="" href="#">
            <i data-v-b7d6ea10="" class="folder"></i>Test</a>
        <ul data-v-b7d6ea10="" style="display: block;">
            <li data-v-b7d6ea10="">
                <a data-v-b7d6ea10="" href="#">
                    <l data-v-b7d6ea10="" style="">
                        <li data-v-b7d6ea10=""><a data-v-b7d6ea10="" href="#"><i data-v-b7d6ea10="" class="folder"></i>bang1</a>
                            <ul data-v-CCb7d6ea10="" style="display: block;">
                                <li data-v-b7d6ea10="">
                                    <a data-v-b7d6ea10="" href="#">
                                        <l data-v-b7d6ea10="" style="display: none;"></l>
                                    </a>
                                </li>
                            </ul>
                        </li>
                    </l>
                </a>
            </li>
        </ul>
    </li>
    <li data-v-b7d6ea10=""><a data-v-b7d6ea10="" href="#"><i data-v-b7d6ea10="" class="folder"></i>TEST2</a>
        <ul data-v-b7d6ea10="" style="display: block;">
            <li data-v-b7d6ea10=""><a data-v-b7d6ea10="" href="#">
                <l data-v-b7d6ea10="" style="display: none;">
            <li data-v-b7d6ea10=""><a data-v-b7d6ea10="" href="#"><i data-v-b7d6ea10="" class="folder"></i>BANG1</a>
                <ul data-v-b7d6ea10="" style="display: block;">
                    <li data-v-b7d6ea10=""><a data-v-b7d6ea10="" href="#">
                        <l data-v-b7d6ea10="" style=""></l>
                    </a></li>
                </ul>
            </li>
            </l></a></li></ul>
    </li>
</ul>

但是我要构建的结构是

<ul data-v-b7d6ea10="" class="root_list">
    <li data-v-b7d6ea10=""><a data-v-b7d6ea10="" href="#"><i data-v-b7d6ea10="" class="folder"></i>Test</a>
        <ul data-v-b7d6ea10="" style="display: block;">
            <li data-v-b7d6ea10=""><a data-v-b7d6ea10="" href="#"><i data-v-b7d6ea10="" class="folder"></i>bang1</a>
            </li>
        </ul>
    </li>
    <li data-v-b7d6ea10=""><a data-v-b7d6ea10="" href="#"><i data-v-b7d6ea10="" class="folder"></i>TEST2</a>
        <ul data-v-b7d6ea10="" style="display: block;">
            <li data-v-b7d6ea10=""><a data-v-b7d6ea10="" href="#"><i data-v-b7d6ea10="" class="folder"></i>BANG1</a>
            </li>
        </ul>
    </li>
</ul>

尽我所能帮助我。