vue 无限分类

效果图

css

<style>
        .parents {}
        .childItem {
            margin: 10px;
            margin-left: 20px;
        }
</style>

html

<div id="app">
    <template v-for="navItem in nav">
        <div class="parents" :key="navItem.menuId" @click.stop="navItem.isShow = !navItem.isShow">
            <div style="display: flex;flex-flow: row;align-items: center;">
                <div v-if="navItem.sysMenus != null" :style="navItem.isShow === true? 'transform: rotate(90deg)' : ''">
                    ▶
                </div>
                <div contenteditable >{{navItem.menuName}}</div>
            </div>
            <!-- 子 -->
            <children-item
                    v-if="navItem.isShow === true"
                    :class="{childItem : true}"
                    v-for="item in navItem.sysMenus"
                    :options="item"
                    :key="item.menuId">
            </children-item>
            <!-- 子 -->
        </div>
    </template>
</div>

script 引入方式：<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
    Vue.component('children-item', {
        props: ['options'],
        template: `
          <div @click.stop="options.isShow = !options.isShow">
          <div style="display: flex;flex-flow: row;align-items: center;">
            <div v-if="options.sysMenus != null" :style="options.isShow === true? 'transform: rotate(90deg)' : ''">
              ▶
            </div>
            <div contenteditable >{{ options.menuName }}</div>
          </div>
          <children-item
              v-if="options.isShow === true"
              :class="{childItem : true}"
              v-for="item in options.sysMenus"
              :options="item"
              :key="item.menuId">
          </children-item>
          </div>`
    })
    var app = new Vue({
        el: '#app',
        data: {
            nav: 'Hello Vue!'
        },
        methods: {
        },
        mounted() {
            this.nav = [{
                "menuId": 1,
                "menuName": "系统管理",
                "parentId": 0,
                "isShow": true,
                "sysMenus": [{
                    "menuId": 100,
                    "menuName": "用户管理1",
                    "parentId": 1,
                    "isShow": true,
                    "sysMenus": [{
                        "menuId": 1000,
                        "menuName": "用户查询1",
                        "parentId": 100,
                        "isShow": true,
                        "sysMenus": null,
                    }],
                    "sysMenus": [{
                        "menuId": 1001,
                        "menuName": "用户查询2",
                        "parentId": 100,
                        "isShow": true,
                        "sysMenus": [{
                            "menuId": 10001,
                            "menuName": "用户查询2-1",
                            "parentId": 1001,
                            "isShow": true,
                            "sysMenus": null,
                        }],
                    }],
                }, {
                    "menuId": 200,
                    "menuName": "用户管理2",
                    "parentId": 1,
                    "isShow": true,

                    "sysMenus": [{
                        "menuId": 2000,
                        "menuName": "用户查询1",
                        "parentId": 200,
                        "isShow": true,
                        "sysMenus": null,
                    }],
                    "sysMenus": [{
                        "menuId": 2000,
                        "menuName": "用户查询2",
                        "parentId": 200,
                        "isShow": true,
                        "sysMenus": [{
                            "menuId": 20001,
                            "menuName": "用户查询2-1",
                            "parentId": 200,
                            "isShow": true,
                            "sysMenus": null,
                        }],
                    }],
                }
                ],
            }, {
                "menuId": 2,
                "menuName": "系统管理2",
                "parentId": 0,
                "isShow": true,
                "sysMenus": [{
                    "menuId": 200,
                    "menuName": "用户管理1",
                    "parentId": 2,
                    "isShow": true,
                    "sysMenus": [{
                        "menuId": 2000,
                        "menuName": "用户查询1",
                        "parentId": 200,
                        "isShow": true,
                        "sysMenus": null,
                    }],
                    "sysMenus": [{
                        "menuId": 2000,
                        "menuName": "用户查询2",
                        "parentId": 200,
                        "isShow": true,
                        "sysMenus": [{
                            "menuId": 20001,
                            "menuName": "用户查询2-1",
                            "parentId": 2000,
                            "isShow": true,
                            "sysMenus": null,
                        }],
                    }],
                }, {
                    "menuId": 100,
                    "menuName": "用户管理2",
                    "parentId": 1,
                    "isShow": true,
                    "sysMenus": [{
                        "menuId": 1000,
                        "menuName": "用户查询1",
                        "parentId": 100,
                        "isShow": true,
                        "sysMenus": null,
                    }],
                    "sysMenus": [{
                        "menuId": 1000,
                        "menuName": "用户查询2",
                        "parentId": 100,
                        "isShow": true,
                        "sysMenus": [{
                            "menuId": 1000,
                            "menuName": "用户查询2-1",
                            "parentId": 100,
                            "isShow": true,
                            "sysMenus": null,
                        }],
                    }],
                }
                ],
            },
            ]

        }
    })
</script>