vue.js--element-ui实现递归菜单栏
·
准备一个空的项目，如果不知怎么弄可以看我以前的文章（基于vue-cli3 如何准备一个空项目（https://blog.csdn.net/qq_43634411/article/details/109455591） ）
下面我展示一下做出来的效果
第一步（打开element-ui 的官网，当然你必须安装element-ui ）
如何安装的你可以看我前面的文章(在新建的home.vue 中添加 下面这段代码)
<!-- -->
<template>
<div class=''>
<el-container>
<el-header>Header</el-header>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-container>
<el-main>Main</el-main>
<el-footer>Footer</el-footer>
</el-container>
</el-container>
</el-container>
</div>
</template>
<script>
export default {
components: {},
data () {
return {
}
},
computed: {},
watch: {},
methods: {
},
created () {
},
mounted () {
}
}
</script>
<style scoped>
</style>
页面效果
接下来我们来做上面下过的侧边栏部分（以为要递归侧边栏 所以我们把 要用到的 封装 模板 ）
1.新建一个subMenu.vue
<!-- -->
<template>
<!-- 判断index 后面会用 -->
<el-submenu :index="item.url">
<!-- 相当于一个item的功能 -->
<template slot="title">
<i class="el-icon-location"></i>
<span>{{item.name}}</span>
</template>
<!-- 循环 -->
<div v-for="item in item.children" :key="item.id">
<!-- 判断是否有children -->
<!-- 如果有children 就自身条用自身 :item 是父子传值 如果不懂可以看vue.js 父子组件传值 -->
<sub-menu v-if="item.children " :index="item.id" :item="item"></sub-menu>
<!-- 如果没有 childern menu-item是自定义的组件-->
<menu-item v-else :item='item'></menu-item>
</div>
</el-submenu>
</template>
<script>
// 引用 menu-item 组件
import MenuItem from '@/views/Home/Menu/MenuItem'
export default {
name: 'sub-menu',
components: {
// 注册组件
MenuItem
},
// 接收 父组件传来的值
props: {
item: {
type: Object,
default: () => ({})
}
},
data () {
return {
}
},
computed: {},
watch: {},
methods: {
},
created () {
},
mounted () {
}
}
</script>
<style scoped>
</style>
Menuitem.vue 页面
<!-- -->
<template>
<div class=''>
<el-menu-item :index="item.url">
<i class="el-icon-menu"></i>
<span slot="title">{{item.name}}</span>
</el-menu-item>
</div>
</template>
<script>
export default {
components: {},
// props 接收来自父组件传下来的值 父组件 传值的值 == 子组件的值
props: {
item: {
type: Object,
default: () => ({})
}
},
data () {
return {
}
},
computed: {},
watch: {},
methods: {
},
created () {
},
mounted () {
}
}
</script>
<style scoped>
</style>
home.vue页面
<!-- -->
<template>
<div class=''>
<el-container>
<el-header>Header</el-header>
<el-container>
<el-aside width="200px">
<!-- 必须加el-menu 标签 因为 要做一些菜单操作 不要问 问就是elemen-ui 官网有 -->
<el-menu>
<template v-for="item in roles">
<!-- 如果有children 执行 -->
<sub-menu v-if="item.children" :item="item" :key="item.url"></sub-menu>
<!-- 没有的话就吧当前菜单的数据添加到 页面 -->
<menu-item v-else :item="item" :key="item.id"> </menu-item>
</template>
</el-menu>
</el-aside>
<el-container>
<el-main>
</el-main>
<el-footer>Footer</el-footer>
</el-container>
</el-container>
</el-container>
</div>
</template>
<script>
// 引入 菜单栏 需要的组件
import SubMenu from '@/views/Home/Menu/SubMenu'
import MenuItem from '@/views/Home/Menu/MenuItem'
export default {
components: {
SubMenu,
MenuItem
},
data () {
return {
roles: [
{
id: '1',
name: '数据展示',
url: '/welcome'
},
{
id: '2',
name: '人员管理',
url: '/personnel',
children: [
{
id: '2-1',
name: '人员列表',
url: '/personnel_list'
},
{
id: '2-2',
name: '人员列表1',
url: '/personnel_list1',
children: [
{
id: '2-1-1',
name: '人员列表2',
url: '/personnel_list2'
},
{
id: '2-2-2',
name: '人员列表2-1',
url: '/personnel_list21'
}
]
}
]
},
{
id: '3',
name: '房间管理',
url: '/room',
children: [
{
id: '3-1',
name: '房间列表',
url: '/room_list'
}
]
}
]
}
},
computed: {},
watch: {},
methods: {
},
created () {
},
mounted () {
}
}
</script>
<style scoped>
.el-aside {
background: black;
}
</style>
效果 如下 以为是递归 所以可以无限 但是我数据只是准备了二层
注意必须注意一个地方 必须要有这一步 name: ‘sub-menu’,
用这个你会发现 r如下图的问题 
添加 就可以了
.el-menu {
border: 0;
}
如何全屏 好说加一行代码j就ok
第一步在App.vue 加
html,
body,
#app {
height: 100%;
}
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
html,
body,
#app {
height: 100%;
}
</style>
第二部 在home.vue
<!-- -->
<template>
<el-container class="home_container">
<el-header>Header</el-header>
<el-container>
<el-aside width="200px">
<!-- 必须加el-menu 标签 因为 要做一些菜单操作 不要问 问就是elemen-ui 官网有 :default-active="menuurl" -->
<el-menu class="el-menu-vertical-demo" :unique-opened="true" background-color="#545c64" text-color="#fff" router active-text-color="#ffd04b">
<template v-for="item in roles">
<!-- 如果有children 执行 -->
<sub-menu v-if="item.children" :item="item" :key="item.url"></sub-menu>
<!-- 没有的话就吧当前菜单的数据添加到 页面 -->
<menu-item v-else :item="item" :key="item.id"> </menu-item>
</template>
</el-menu>
</el-aside>
<el-container>
<el-main>
</el-main>
<el-footer>Footer</el-footer>
</el-container>
</el-container>
</el-container>
</template>
<script>
// 引入 菜单栏 需要的组件
import SubMenu from '@/views/Home/Menu/SubMenu'
import MenuItem from '@/views/Home/Menu/MenuItem'
export default {
components: {
SubMenu,
MenuItem
},
data () {
return {
roles: [
{
id: '1',
name: '数据展示',
url: '/welcome'
},
{
id: '2',
name: '人员管理',
url: '/personnel',
children: [
{
id: '2-1',
name: '人员列表',
url: '/personnel_list'
},
{
id: '2-2',
name: '人员列表1',
url: '/personnel_list1',
children: [
{
id: '2-1-1',
name: '人员列表2',
url: '/personnel_list2'
},
{
id: '2-2-2',
name: '人员列表2-1',
url: '/personnel_list21'
}
]
}
]
},
{
id: '3',
name: '房间管理',
url: '/room',
children: [
{
id: '3-1',
name: '房间列表',
url: '/room_list'
}
]
}
]
}
},
computed: {},
watch: {},
methods: {
},
created () {
},
mounted () {
}
}
</script>
<style scoped>
.el-aside {
background: black;
}
.el-menu {
border: 0;
}
.home_container {
height: 100%;
margin: 0px;
padding: 0px;
}
</style>
腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)