view js 实现 树形菜单

Posted 2020-09-25 正义的伙伴！

添加一个模板。
<template id="menu-template">
    <li v-if="model.nodes!=undefined">
        <a href="#" class="menu-dropdown"> <i class="menu-icon ${child.icon!‘‘}"></i> <span class="menu-text">
                    {{model.title}} </span> <i class="menu-expand"></i>
        </a>
        <ul class="submenu">
            <item  v-for="model in model.nodes"   :model="model"></item>
        </ul>
    </li>

    <li v-else>
        <a href="javascript:void(0)" data-url=""><i class="menu-icon "></i>
            <!-- 图标  -->
            <span class="menu-text">{{model.title}}</span></a>
    </li>
</template>

注册组件
Vue.component(‘item‘, {
        template: ‘#menu-template‘,
        props: {
            model: Object
        }
    }) 

使用：

<item  v-for="model in message" :model="model"></item>   message 为一个 数组