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

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

//父组件
<template>
  <div>
    <el-menu
      default-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、效果图。