vue js 实现树形菜单

最新推荐文章于 2025-05-25 23:17:51 发布

weixin_30539625

最新推荐文章于 2025-05-25 23:17:51 发布

阅读量179

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/whm-blog/p/7094588.html

本文介绍如何使用Vue.js创建动态树形菜单组件，并通过模板和组件注册实现菜单项的循环显示。文章展示了如何利用Vue的条件渲染特性来区分不同类型的菜单节点，并通过Ajax获取后端数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

添加一个模板。
<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 "

:class="model.icon"

></i> <!-- 图标 --> <span class="menu-text">{{model.title}}</span></a> </li> </template>

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

$.post("http://127.0.0.1:88/admin/getFunctionJson.action", null, function(data) {
        var app = new Vue({
            el: "#app",
            data: data
        })
    })

使用：

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

<!-- 树形菜单... -->
<template id="menu-template">
    <li v-if="model.nodeList!=undefined" class="treeview">
        <a href="#" class="menu-dropdown"> <i class="fa" :class="model.icon"></i>
            <span>
        {{model.title}}</span> <i class="fa fa-angle-left pull-right"></i></span>
        </a>
        <ul class="treeview-menu">
            <item v-for="model in model.nodeList" :key="model.id" :model="model"></item>
        </ul>
    </li>

    <li v-else>
        <a href="javascript:void(0)" data-url=""><i class="fa" :class="model.icon"></i>
            <!-- 图标  -->
            <span>{{model.title}}</span></a>
    </li>
</template>
<script>
    Vue.component('item', {
        template: '#menu-template',
        props: {
            model: Object
        }
    })
    var message = [];
    $.post("{$ctx}/admin/auth/getFuncTree", null, function (data) {
        var obj = {};
        obj.message = data;
        var app = new Vue({
            el: "#app",
            data: obj
        })
    })