Element UI左侧导航栏写法（递归组件实现）

1、左侧导航栏组件使用的是Element Ui的导航栏组件，思路：首先判断导航栏数据是否存在children，以此来实现一级菜单与多级菜单的渲染，然后使用递归组件实现多级菜单的子菜单渲染，注意使用递归组件需将菜单栏数据在父组件中从vuex中获取，再通过props传递给子组件，否则会陷入无限递归。

//父组件
<template><div><el-menudefault-active="2"class="el-menu-vertical-demo"@open="handleOpen"@close="handleClose"background-color="rgb(60, 60, 60)"text-color="#fff"active-text-color="#ffd04b"><Aside_demo :leftMenus="leftMenus"></Aside_demo></el-menu></div>
</template><script>
import Aside_demo from "../components/Aside_demo.vue";
import { mapState } from "vuex";
export default {name: "AsideLeft",data() {return {};},computed: {...mapState(["leftMenus"]),},components: {Aside_demo,},methods: {handleOpen(key, keyPath) {console.log(key, keyPath);},handleClose(key, keyPath) {console.log(key, keyPath);},},
};
</script><style>
.el-menu {width: 200px;
}
</style>

//子组件
<template><div><div v-for="(item, index) in leftMenus" :key="index"><!-- 多级导航 --><!-- 这里设置动态key值，解决高亮问题 ,并通过设置v-if来判断数据有无二级菜单数据，以此来展示二级菜单--><el-submenu :index="item.key" v-if="item.children"><template slot="title"><i class="el-icon-location"></i><span>{{ item.title }}</span></template><!-- <el-submenu index="1-4"><template slot="title">选项4</template><el-menu-item index="1-4-1">选项1</el-menu-item></el-submenu> --><!-- 这里使用递归组件,用来遍历多级菜单，将children数据传给递归组件,自己遍历自己 --><nav-menu :leftMenus="item.children"></nav-menu></el-submenu><!-- 一级导航 --><el-menu-item :index="item.key" v-else><i class="el-icon-menu"></i><span slot="title">{{ item.title }}</span></el-menu-item></div></div>
</template><script>export default {// 注意使用递归组件，name值就要改变了name: "NavMenu",data() {return {};},props:['leftMenus'],methods: {},
};
</script><style></style>

3、效果图。