基于 iview dropdown 組件匿值，$http 用 axios 進(jìn)行了封裝
SideBar.vue （遞歸調(diào)用）
<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>
