vue如何实现多级菜单效果

这篇文章主要介绍了vue如何实现多级菜单效果的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue如何实现多级菜单效果文章都会有所收获，下面我们一起来看看吧。

效果图：

效果说明：

点击父菜单，如果有子菜单就在其左侧显示出子菜单

思路：

通过递归的方式。

代码：

子组件 MenuItem

// 子组件代码
<template>
    <li>
        <span @click="toggle(model)"> {{ isFolder? "<" + model.menuName : model.menuName   }}</span>
        <ul v-if="isFolder" v-show="open" >
            <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
                }
    /*             if(mode.id != undefined && this.open){
                    this.open = false;
                } */
            },
        }
    }
</script>
<style scoped>
    ul,li {
        list-style: none;
    }
</style>

父组件调用子组件

<template>
    <!--https://www.yisu.com/css/378895.html-->
    <view>
        <div >
            <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>

结语：

效果图中是将子菜单显示在父菜单的左侧，也可以直接通过把下面的样式删除，让子菜单显示子父菜单的右侧

关于“vue如何实现多级菜单效果”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“vue如何实现多级菜单效果”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。