vue+element UI 实现无限极分类（一）

快来打我* 2022-05-21 02:42 140阅读 0赞

简单的例子参考，参考别人的简书

[ { "id": 1, "parent_id": 0, "menu_name": "第一级菜单 1", "sorting": 0, "node": [ { "id": 2, "parent_id": 1, "menu_name": "第二级菜单 1-1", "sorting": 0, "node": [ { "id": 3, "parent_id": 2, "menu_name": "第三级菜单 1-1-1", "sorting": 1 } ] } ] }, { "id": 4, "parent_id": 0, "menu_name": "第一级菜单 2", "sorting": 0, "node": [ { "id": 5, "parent_id": 4, "menu_name": "第二级菜单 2-1", "sorting": 0 } ] } ]

### 新建MenuBar.vue文件,实现获取后端数据及布局功能 ###

<template>
        <div>
            <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
                <el-radio-button :label="false">展开</el-radio-button>
                <el-radio-button :label="true">收起</el-radio-button>
            </el-radio-group>
            <el-menu class="menu-Bar" :collapse="isCollapse">
                <MenuTree :menuData="this.menuData"></MenuTree>
            </el-menu>
        </div>
    </template>
    <script> import MenuTree from '@/components/MenuTree' export default { data () { return { isCollapse: false, menuData: [] } }, props: ['apiUrl'], created: function () { this.getMenu() }, methods: { getMenu: function () { this.$http.get(this.apiUrl + 'menu').then(function (response) { this.menuData = response.data }, function (error) { console.log(error) }) } }, components: { 'MenuTree': MenuTree } } </script>
    <style> .menu-Bar:not(.el-menu--collapse) { width: 200px; min-height: 400px; } </style>

### 新建MenuTree.vue 实现菜单栏列的递归渲染 ###

<template>
        <div>
            <template v-for="value in this.menuData">
                <el-submenu index="value.id" v-if="value.node">
                    <template slot="title">
                        <i class="el-icon-message"></i>
                        <span slot="title">{
       {value.menu_name}}</span>
                    </template>
                    <MenuTree :menuData="value.node"></MenuTree>
                </el-submenu>
                <el-menu-item index="value.id" v-else>
                    <i class="el-icon-message"></i>
                    <span slot="title">{
       {value.menu_name}}</span>
                </el-menu-item>
            </template>
        </div>
    </template>
    
    <script> export default { props: ['menuData'], name: 'MenuTree' } </script>

### 最后实现效果为 ###

![70][]

[70]: /images/20220521/f098c97e946a4696a054eb587fbdec15.png