Vue+ElementUi实现菜单循环

1. 在Sider.vue中调用组件，并将在vuex中获取到的菜单数据以传值的方式传入封装组件中

javascript 复制代码

<template>
  <el-menu
      :default-active="$route.path"
      class="el-menu-vertical-demo"
      router
      background-color="#011528"
      text-color="#fff"
      active-text-color="#ffd04b"
      :collapse="isCollapse"
  >
    <div class="title">
      <div class="my_icon">
        <svg t="1706167107625" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
             p-id="3741" width="16" height="16">
          <path
              d="M525.599654 862.378036c-142.796363 7.699804-268.393164-78.198008-323.091772-195.395023-60.198467-128.696722-48.798757-255.893483 37.099056-369.290595 81.897914-108.197244 195.695016-151.096152 330.491582-134.996562 66.898296 7.999796 125.896794 35.499096 177.395482 79.097986 27.899289 23.699396 27.299305 34.299126-3.699906 51.998675-26.899315 15.399608-53.898627 30.599221-80.597947 46.298821-73.898118 43.298897-148.296223 85.897812-221.394361 130.596674-39.099004 23.899391-46.998803 62.098418-25.099361 101.797408 23.699396 42.898907 69.49823 52.798655 118.096992 24.69937C679.195742 513.886912 823.192074 429.489061 967.988387 346.791168c23.999389-13.699651 26.599323-27.599297 15.999592-50.798707-37.499045-81.597922-92.697639-148.596215-166.595757-198.794936C653.896386-13.599654 479.600825-31.3992 301.005374 52.798655c-178.095464 83.997861-274.892999 231.394107-290.992589 425.789156-13.299661 161.095897 47.998778 297.492423 164.295816 409.789563 162.095872 156.496014 433.08897 181.095388 619.384225 55.298592 48.498765-32.799165 48.498765-32.799165 18.399531-82.797891-32.499172-54.098622-64.79835-64.098367-121.196913-37.099056-53.498637 25.599348-108.797229 42.198925-165.29579 38.599017z"
              fill="#1296db" p-id="3742"></path>
          <path
              d="M1015.787169 633.483866c-2.699931-38.699014-23.699396-70.098215-41.798935-102.597387-5.89985-10.59973-15.399608-6.499834-23.899392-1.699957-33.199154 18.999516-66.298311 38.199027-99.69746 56.698556-14.199638 7.899799-16.699575 17.399557-8.499784 31.299203 19.099514 32.099182 37.999032 64.298362 56.198569 96.897532 7.899799 14.099641 17.499554 17.399557 31.199205 8.699779 19.999491-12.599679 40.698963-24.399379 59.998472-37.999033 17.099564-12.099692 27.199307-29.099259 26.499325-51.298693z"
              fill="#1296db" p-id="3743"></path>
        </svg>
      </div>
      <div :class="!isCollapse?'my_title':''">
        <span v-if="!isCollapse">权限管理系统</span>
      </div>
    </div>
    <MyMenu :route="$store.state.menuStore.menuList"></MyMenu>
  </el-menu>
</template>

<script>
import {mapState} from "vuex";
import MyMenu from "@/components/MyMenu.vue";

export default {
  name: 'my_aside',
  data() {
    return {};
  },
  components: {MyMenu},
  computed: {
    ...mapState("menuStore", ["menuList", "isCollapse"])
  },
  mounted() {
  },
  methods: {}
}
</script>

2. 分装MyMenu.vue组件，注意格式问题，动态生成后收缩菜单栏会造成格式问题

javascript 复制代码

<template>
  <div>
    <el-submenu v-for="r in route" :index="r.path" v-if="r.children && r.children.length>0">
      <template #title>
        <i :class="r.icon"></i>
        <span>{{ r.title }}</span>
      </template>
      <!-- 循环遍历组件-->
      <MyMenu :route="r.children"></MyMenu>
    </el-submenu>
    <el-menu-item :index="r.path" v-else>
      <i :class="r.icon"></i>
      <span slot="title">{{ r.title }}</span>
    </el-menu-item>
  </div>
</template>
<script>

export default {
  name: 'MyMenu',
  props: ['route']
}
</script>

<style>
/*设置为左对齐*/
.el-submenu {
  text-align: left;
}

.el-menu-item {
  text-align: left;
}

/* 注意<style>标签中不要加scope，否则导致>还是无法隐藏 */
/*由于 element-ui 的<el-menu>标签本身希望里面嵌套的是<el-menu-item>,<el-submenu>,<el-menu-item-group>之一，但是却嵌套了<div>,而导致收折就隐藏不了文字*/
/*隐藏文字*/
.el-menu--collapse .el-submenu__title span {
  display: none;
}

/*隐藏 > */
.el-menu--collapse .el-submenu__title .el-submenu__icon-arrow {
  display: none;
}
</style>