vue ant 菜单递归

关注

原创最新推荐文章于 2026-04-26 14:48:29 发布 2.9k 阅读 AI 写同款· GEO 优化 ›

解决Ant Design Vue树形选择器中的常见问题：递归渲染、回显与菜单控制本文深入解析了Ant Design Vue树形选择器（a-tree-select）在复杂业务场景下的核心应用难题，重点提供了递归渲染、数据回显与精细化菜单控制的实战解决方案。文章通过具体代码示例，详细阐述了如何构建健壮的递归转换函数、确保选中项在各种操作后正确显示，以及如何根据业务规则动态控制节点的可选性，帮助开发者高效解决实际开发中的常见痛点。阅读详情

递归需要两个组件（正常是需要三个组件，但是vue组件可以自己调用自己）

我自己的数据结构

{ "code": 200, "message": "操作成功", "result": { "loginAuthDto": { "userId": "1", "loginName": "admin", "userName": "超级管理员", "groupId": null, "groupName": null }, "menuList": [ { "id": "11", "pid": "1", "menuCode": "uas", "menuName": "用户中心", "url": "/uas", "icon": "fa fa-bicycle", "number": null, "remark": "", "yn": null, "parentMenu": null, "subMenu": [ { "id": "111", "pid": "11", "menuCode": "xtsz", "menuName": "系统管理", "url": "/yxgl", "icon": "fa fa-desktop", "number": null, "remark": "", "yn": null, "parentMenu": null, "subMenu": [ { "id": "1111", "pid": "111", "menuCode": "uas_role", "menuName": "角色管理", "url": "/uas/role/list", "icon": "fa fa-hand-o-up", "number": null, "remark": "", "yn": null, "parentMenu": null, "subMenu": null, "hasMenu": false }, { "id": "1112", "pid": "111", "menuCode": "uas_user", "menuName": "用户管理", "url": "/uas/user/list", "icon": "fa fa-user", "number": null, "remark": "", "yn": null, "parentMenu": null, "subMenu": null, "hasMenu": false }, { "id": "1113", "pid": "111", "menuCode": "uas_menu", "menuName": "菜单管理", "url": "/uas/menu/list", "icon": "fa fa-paperclip", "number": null, "remark": "", "yn": null, "parentMenu": null, "subMenu": null, "hasMenu": false }, { "id": "1114", "pid": "111", "menuCode": "uas_action", "menuName": "权限管理", "url": "/uas/action/list", "icon": "fa fa-firefox", "number": null, "remark": "", "yn": null, "parentMenu": null, "subMenu": null, "hasMenu": false }, { "id": "1115", "pid": "111", "menuCode": "uas_group", "menuName": "组织管理", "url": "/uas/group/list", "icon": "fa fa-group", "number": null, "remark": "", "yn": null, "parentMenu": null, "subMenu": null, "hasMenu": false } ], "hasMenu": true } ], "hasMenu": true } ] } }

leftNav.vue

<template>
<a-menu @click="changNav" theme="light"
                :selectedKeys="selectedKeys"
                mode="inline" :defaultSelectedKeys="['1']"
                style="calc(height:100% - 64px;)">

            <a-sub-menu :key="key" v-for="(item, key) in menuList">
                <span slot="title"><a-icon :type="item.icon" /><span>{{item.menuName}}</span></span>

                <template v-for="(subMenuItem, subMenuKey) in item.subMenu">

                    <!--子导航栏-->
                    <template v-if="subMenuItem.subMenu">
                        <SubMenu :subMenuArr="subMenuItem" :key="subMenuKey" ></SubMenu>
                    </template>

                    <template v-else>
                        <!--导航栏-->
                        <a-menu-item :key="subMenuItem.url">{{subMenuItem.menuName}}</a-menu-item>
                    </template>

                </template>

            </a-sub-menu>
        </a-menu>
</template>
<script>
    import SubMenu from "./SubMenu";
    export default {
        components: {SubMenu},
        data() {
            return {
                collapsed: false,
                selectedKeys: '',
                menuList: []
            };
        },
        methods:{
            __requset() {
             // 网络请求获取菜单
            },
            changNav(item) {
                console.log(item.key)
                this.$router.push({path: item.key})
                this.selectedKeys = item.key
            },
            updateMenu () {
                const routes = this.$route.matched.concat()
                this.selectedKeys = [ routes.pop().path ]
            }
        },
        mounted() {

        },
        created() {
           this.__requset()

        }
    }
</script>

SubMenu.vue

<!--vue中的函数式组件也称为无状态组件，与Flutter中的无状态组件类似，其内部没有任何状态。函数式组件中只接受一个props参数，没有其他参数。-->
<template functional>
    <a-sub-menu :key="props.subMenuArr.id" :title="props.subMenuArr.menuName">

        <template v-for="(subMenuItem, subMenuKey) in props.subMenuArr.subMenu">

            <template v-if="subMenuItem.subMenu">
                <!--  vue组件自己调用自己  -->
                <sub-Menu :key="subMenuKey" :subMenuArr="subMenuItem" ></sub-Menu>
            </template>

            <template v-else>
                <a-menu-item :key="subMenuItem.url">{{subMenuItem.menuName}}</a-menu-item>
            </template>


        </template>
    </a-sub-menu>
</template>

<script>
    export default {
        name: 'SubMenu',
        components: {},
        props: {
            subMenuArr: {},
        }
    }
</script>

<style scoped>

</style>

收录于