前端工作总结151-动态路由和表结构无关

<template>
  <el-menu :unique-opened="true" :default-active="defaultActive" :router="true">
    <template v-for="item in routes">
      <el-submenu v-if="item.children" :index="item.text" :key="item.text">
        <template slot="title">
          <i v-if="item.icon" :class="item.icon" />
          <i v-else class="empty-icon" />
          {{ item.text }}
        </template>
        <el-menu-item
          v-for="subItem in item.children"
          :index="subItem.path"
          :key="subItem.name"
        >
          <i v-if="subItem.icon" :class="subItem.icon" />
          <i v-else class="empty-icon" />
          {{ subItem.text }}
        </el-menu-item>
      </el-submenu>
      <el-menu-item v-else :index="item.path" :key="item.name">
        <i v-if="item.icon" :class="item.icon" />
        <i v-else class="empty-icon" />
        {{ item.text }}
      </el-menu-item>
    </template>
  </el-menu>
</template>
<script>
import { staticRoutes, iconMap } from "../router/staticRoutes";
import { ACCESS_MODE } from "@/store/KeyConstants";
import Vue from "vue";
export default {
  name: "SideMenu",
  computed: {
    routes() {
      /*获取数据里面的控制业务端和营销端的mode数值*/
      const property = Vue.ls.get(ACCESS_MODE);
      /*const */
   /*   const showingMenu = staticRoutes.filter(item){
        return !item.hidden
      }*/
      /*去除里面的不是item.hidden是隐藏的属性*/
     const showingMenu = staticRoutes.filter(item => !item.hidden);
     /*拿出所有的菜单*/
      let menu = [];
      let pNames = new Set();
      /*for循环得出所需要的结构*/
      for (const item of showingMenu) {
        /*如果没有父亲级别菜单 就开始继续进行执行*/
        if (!item.meta.pName) {
          /*如果这个端是业务端 并且里面的name的数值不是没有大菜单 比较多的*/
          if (property == 1 && (item.name == "Order" || item.name == "Content"))
          {
          } else {
            /*否则就是业务端*/
            menu.push({
              path: item.path,
              name: item.name,
              icon: item.meta.icon,
              text: item.meta.text
            });
          }
          /*如果pnames有大菜单 */
        } else if (!pNames.has(item.meta.pName)) {
          /*就去除里面的pname*/
          const peers = showingMenu
            .filter(i => i.meta.pName === item.meta.pName)
            .map(i => ({
              path: i.path,
              name: i.name,
              icon: i.meta.icon,
              text: i.meta.text
            }));
          menu.push({
            text: item.meta.pName,
            icon: iconMap[item.meta.pName],
            children: peers
          });
          pNames.add(item.meta.pName);
        }
      }
      return menu;
    },
    defaultActive() {
      return this.$route.path;
    }
  },
  data() {
    return {};
  },
  methods: {}
};
</script>
<style lang="scss">
.el-menu {
  height: 100%;
}
.el-menu-item,
.el-submenu__title {
  .empty-icon {
    margin-right: 5px;
    width: 24px;
    display: inline-block;
  }
}
</style>