Vue+elementUi实现菜单⽆限级的分类导航Vue + elementUi 实现菜单⽆限级的分类导航
[
{
"id": 1,
"parent_id": 0,
"menu_name": "第⼀级菜单 1",
"sorting": 0,
"node": [
{
"id": 2,
"parent_id": 1,
"menu_name": "第⼆级菜单 1-1",
"sorting": 0,
"node": [
{
"id": 3,
"parent_id": 2,
"menu_name": "第三级菜单 1-1-1",
"sorting": 1
}
]
}
]
},
{
"id": 4,
"parent_id": 0,
"menu_name": "第⼀级菜单 2",
"sorting": 0,
"node": [
{
"id": 5,
"parent_id": 4,
"menu_name": "第⼆级菜单 2-1",
"sorting": 0
}
]
}
]
新建MenuBar.vue⽂件，实现获取后端数据及布局功能
<el-radio-group v-model="isCollapse" >            <el-radio-button :label="false">展开</el-radio-button>
<el-radio-button :label="true">收起</el-radio-button>
</el-radio-group>
<el-menu class="menu-Bar" :collapse="isCollapse">
<MenuTree :menuData="uData"></MenuTree>
</el-menu>
</div>
</template>
<script>
import MenuTree from '@/components/MenuTree'
export default {
data () {
return {
isCollapse: false,
menuData: []
}
},
props: ['apiUrl'],
created: function () {
导航菜单Menu()
},
methods: {
getMenu: function () {
this.$(this.apiUrl + 'menu').then(function (response) {
}, function (error) {
console.log(error)
})
}
},
components: {
'MenuTree': MenuTree
}
}
</script>
<style>
.menu-Bar:not(.el-menu--collapse) {
width: 200px;
min-height: 400px;
}
</style>
新建MenuTree.vue 实现菜单栏列的递归渲染
<template v-for="value uData">
<el-submenu index="value.id" v-if="de">
<template slot="title">
<i class="el-icon-message"></i>
<span slot="title">{{u_name}}</span>                </template>
<MenuTree :menuData="de"></MenuTree>            </el-submenu>
<el-menu-item index="value.id" v-else>
<i class="el-icon-message"></i>
<span slot="title">{{u_name}}</span>
</el-menu-item>
</template>
</div>
</template>
<script>
export default {
props: ['menuData'],
name: 'MenuTree'
}
</script>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。