vue实现多级菜单效果

// 子组件代码
<template>
    <li>
        <span @click="toggle(model)"> {{ isFolder? "<" + model.menuName : model.menuName   }}</span>
        <ul v-if="isFolder" v-show="open" style="position: absolute;left: -120px;top: 0px; width:100px; background-color: cadetblue;">
            <menuItems v-for="(item, index) in model.childTree" :model="item" :key="index"></menuItems>
        </ul>
    </li>
</template>
 
<script type="text/javascript">
    export default {
        // 组件递归必要条件，name属性,然后在标签就可以通过name直接使用自己
        name: 'menuItems',
        props: ['model',],
        data() {
            return {
                 // 控制子列表的显示隐藏
                open: false
            }
        },
        computed: {
            // 是否还有子列表需要渲染，作为v-if的判断条件
            isFolder() {
                return this.model.childTree && this.model.childTree.length
            }
        },
        methods: {
            // 切换列表显示隐藏的方法
            toggle(mode) {
                
                if(this.isFolder) {
                    this.open = !this.open
                }
    
            },
        }
    }
</script>
<style scoped>
    ul,li {
        list-style: none;
    }
</style>

<template>
    <!--https://www.jb51.net/CSS/378895.html-->
    <view>
        <div style="position: absolute;left:400px;">
            <ul>
                <menu-item v-for="(model, index) in list" :model="model" :key="index"></menu-item>
            </ul>
        </div>
    </view>
    
</template>
 
<script>
    import MenuItem from "../../components/MenuItem.vue"
    export default {
        components:{
            MenuItem
        },
        computed:{
            
        },
        data() {
            return {
                list: [ // 将菜单数据传到菜单组件中就行了
                {
                    "id": "1",
                    "menuName": "菜单1",
                    "childTree": [{
                        "menuName": "项目进度",
                        "childTree": [{
                            "menuName": "项目一",
                            "childTree": [{ "menuName": "详细信息" }]
                        }]
                    }, {
                        "menuName": "任务安排"
                    }]
                }, 
                {
                    "id": "2",
                    "menuName": "菜单2"
                }, 
                {
                    "id": "3",
                    "menuName": "菜单3"
                }]
            };
        },
        methods:{
        }
    }
</script>
 
<style>    
    ul,li{
    list-style: none !important;
     }
</style>