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>
    <!--http://www.dadijd.cn/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如何實現多級菜單效果”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。