vue左侧菜单递归组件--基于 iview dropdown组

基于 iview dropdown 组件，$http 用 axios 进行了封装

SideBar.vue （递归调用）

<template>
    <div class="side-body">
        <Dropdown class="side-drop" v-for="key,x in treeData" placement="right-start" :key="key">
            <a href="javascript:void(0)" @click="createHtml(x)">
                <i :class="x.icon"></i>
                <span class="layout-text"> {{x.title}}</span>
            </a>
            <DropdownMenu slot="list">
                <mi :menudata="x.children"></mi>
            </DropdownMenu>
        </Dropdown>
    </div>
</template>
<script>
    import mi from './mi.vue'

    export default {
        data() {
            return {
                treeData: []
            }
        },
        components: {mi},
        methods: {
        },
        created() {//初始化获取菜单json 
            this.$http.get('dashboard/entries')
                .then(res => {
                    let code = res.data.returnCode;
                    if (code == 0) {
                        this.treeData = res.data.beans;
                    } else {
                        alert(res.data.returnMessage);
                    }
                })
                .catch(function (error) {
                    console.log(error)
                })
        }
    }
</script>

mi.vue （递归组件）

<template>
    <div>
        <div v-for="x in menudata">
            <div v-if="x.children && x.children.length>0">
                <Dropdown placement="right-start">
                    <DropdownItem>
                        <span @click="createHtml(x)">{{x.title}}</span>
                        <Icon type="ios-arrow-right"></Icon>
                    </DropdownItem>
                    <DropdownMenu slot="list">
                        <mi :menudata="x.children"></mi>
                    </DropdownMenu>
                </Dropdown>
            </div>
            <div v-else>
                <DropdownItem>
                    <span @click="createHtml(x)">{{x.title}}</span>
                </DropdownItem>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'mi',
        props: ['menudata'],
        data: function () {
            return {}
        }
    }
</script>